เรียนรู้วิธีการใช้การตรวจสอบสิทธิ์แบบกำหนดเองในแอปพลิเคชัน Flutter ของคุณโดยใช้ Logto Flutter SDK
FlutterFlow เป็นแพลตฟอร์มที่มีโค้ดระดับต่ำที่ช่วยให้คุณสามารถพัฒนาแอปพลิเคชัน Flutter ได้อย่างง่ายดาย มันมีอินเตอร์เฟซแบบลากและปล่อยที่ช่วยให้คุณออกแบบ UI ของแอปพลิเคชันของคุณ และสร้างโค้ด Flutter ที่สอดคล้องกัน ตามเอกสาร ทางการ มีตัวเลือกการบูรณาการการตรวจสอบสิทธิ์ 3 ตัวเลือก:
สำหรับสองแบบแรก FlutterFlow ให้การบูรณาการไร้รอยต่อกับ Firebase และ Supabase คุณจะต้องตั้งค่าโครงการ Firebase หรือ Supabase ของคุณ และกำหนดค่าการตรวจสอบสิทธิ์ใน FlutterFlow อย่างไรก็ตาม หากคุณต้องการใช้ผู้ให้บริการตรวจสอบสิทธิ์รายอื่น คุณจะต้องพัฒนาตรรกะการตรวจสอบสิทธิ์ด้วยตัวเอง
สำหรับ การตรวจสอบสิทธิ์แบบกำหนดเอง FlutterFlow มีวิธีบูรณาการกับผู้ให้บริการตรวจสอบสิทธิ์ใดๆ โดยอาศัยโซลูชัน API การตรวจสอบสิทธิ์แบบกำหนดเอง ที่เดียว
อย่างไรก็ตาม การแลกเปลี่ยนข้อมูลผู้ใช้โดยตรงระหว่างไคลเอนต์และเซิร์ฟเวอร์ตรวจสอบสิทธิ์ไม่แนะนำตามมาตรฐานความปลอดภัยสมัยใหม่ แทนที่จะใช้การดำเนินการตรวจสอบสิทธิ์ที่ปลอดภัย เช่น OAuth 2.0 หรือ OpenID Connect (OIDC) เพื่อทำการตรวจสอบสิทธิ์ สำหรับผู้ให้บริการ Identity Providers (IdP) ที่ใช้ OAuth 2.0 หรือ OIDC สมัยใหม่ เช่น Auth0, Okta, และ Logto การให้สิทธิ์ประเภท resource owner password credentials (ROPC) ไม่แนะนำหรือถูกห้ามเนื่องจากเหตุผลด้านความปลอดภัย ดูข้อมูลเพิ่มเติมได้ที่ ประเภทการให้สิทธิ์ ropc ที่เลิกใช้แล้ว
การดำเนินการตรวจสอบสิทธิ์มาตรฐาน OAuth 2.0 หรือ OIDC จะมีการเคลื่อนไหวหลายขั้นตอนและการเปลี่ยนเส้นทางระหว่างไคลเอนต์แอปพลิเคชัน เซิร์ฟเวอร์อนุมัติ, และเบราว์เซอร์ของผู้ใช้ ในโพสต์นี้ เราจะแสดงวิธีการปรับแต่งคลาส CustomAuthManager ของ FluterFlow โดยใช้ Logto Flutter SDK เพื่อดำเนินการตรวจสอบสิทธิ์ที่ปลอดภัยในแอปพลิเคชัน FlutterFlow ของคุณ
เพื่อปรับแต่งคลาส CustomAuthManager คุณต้องเปิดใช้งานฟีเจอร์โค้ดที่ปรับแต่งใน FlutterFlow ตามที่คู่มือ Manage Custom Code In GitHub เพื่อเชื่อมโยงและซิงค์โครงการ FlutterFlow ของคุณกับ GitHub
เมื่อเสร็จสิ้น คุณจะมีสามสาขาต่างกันในที่เก็บ GitHub FlutterFlow ของคุณ:
main: สาขาหลักสำหรับโครงการ flutter คุณจะต้องใช้สาขานี้ในการปรับใช้โครงการของคุณflutterflow: สาขาที่ FlutterFlow จะซิงโครไนซ์การเปลี่ยนแปลงจาก UI editor กับโค้ดที่คุณทำเองdevelop: สาขาที่คุณสามารถแก้ไขโค้ดที่ปรับแต่งได้สร้าง UI ของคุณใน FlutterFlow คุณสามารถทำตามเอกสาร FlutterFlow เพื่อสร้าง UI ตามความต้องการของคุณ ในบทแนะนำนี้ ตามข้อกำหนดขั้นต่ำเราจะถือว่าคุณมีสองหน้า:
HomePage ที่มีปุ่มลงชื่อเข้าใช้ (ไม่จำเป็นต้องใช้ฟอร์มการลงชื่อเข้าใช้ การดำเนินการตรวจสอบสิทธิ์ผู้ใช้จะถูกจัดการด้านบน Logto โปรดดูที่คู่มือ customize sie เพิ่มเติมสำหรับรายละเอียด)
user เพื่อแสดงข้อมูลของผู้ใช้และปุ่มลงชื่อออก
ไปที่ App Settings - Authentication และเปิดใช้งานการตรวจสอบสิทธิ์ที่กำหนดเอง สิ่งนี้จะสร้างคลาส CustomAuthManager และไฟล์ที่เกี่ยวข้องในโครงการ FlutterFlow ของคุณ
หลังจากที่คุณสร้าง UI ที่กำหนดเองและเปิดใช้งานการตรวจสอบสิทธิ์ที่กำหนดเองใน FlutterFlow คุณต้องซิงค์โครงการของคุณกับ GitHub ไปที่ integrations - GitHub หน้าและคลิกที่ Push to Repository
CustomAuthManagerเปลี่ยนไปที่สาขา develop ในที่เก็บ GitHub ของคุณและรวมการเปลี่ยนแปลงล่าสุดจากสาขา flutterflow สิ่งนี้จะซิงโครไนซ์การเปลี่ยนแปลง UI ทั้งหมดไปยังสาขา develop ของคุณ รวมถึงวิดเจ็ตหน้าของคุณและคลาส CustomAuthManager ที่สร้างไว้แล้ว
เพิ่มการพึ่งพา Logto SDK ให้กับโครงการของคุณ
คลาส UserProvider รับผิดชอบในการจัดการสถานะการตรวจสอบสิทธิ์ผู้ใช้ เราจำเป็นต้องปรับแต่งคุณสมบัติเพื่อเก็บข้อมูลการตรวจสอบสิทธิ์ที่ได้รับจาก Logto SDK
เพิ่มคุณสมบัติ idToken ที่มีประเภท OpenIdClaims เพื่อเก็บการอ้างสิทธิ์ id_token สำหรับผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์
คลาส
OpenIdClaimsถูกกำหนดใน Logto SDK ซึ่งจะให้ข้อมูลการอ้างสิทธิ์id_tokenมาตรฐานOIDCจากผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์
เมธอด initialize จะเริ่มต้นวม Logto client instance และอัปเดตสตรีมของผู้ใช้ปัจจุบันด้วยสถานะการตรวจสอบสิทธิ์ของผู้ใช้ที่คงไว้ในที่เก็บข้อมูลในเครื่อง
Logto SDK ใช้แพ็คเกจ flutter_secure_storage เพื่อเก็บข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้อย่างปลอดภัย หลังจากที่ผู้ใช้ได้รับการตรวจสอบสิทธิ์ การอ้างสิทธิ์
id_tokenจะถูกเก็บไว้ในที่เก็บข้อมูลในเครื่อง
การเรียกเมธอด LogtoClient.signIn จะเริ่มการดำเนินการตรวจสอบสิทธิ์ OIDC มาตรฐาน หน้าลงชื่อเข้าใช้ของ Logto จะถูกเปิดใน webview การดำเนินการตรวจสอบสิทธิ์บน webview ได้รับการกำหนดโดย flutter_web_auth
LogtoClient จะจัดการขั้นตอนที่เกี่ยวข้องกับการอนุญาต, การแลกเปลี่ยนโทเค็น, และการดึงข้อมูลของผู้ใช้ เมื่อผู้ใช้ได้รับการตรวจสอบสิทธิ์ การอ้างสิทธิ์ idTokenClaims จะถูกเก็บไว้ในที่เก็บข้อมูลในเครื่อง
เรียกข้อมูล idTokenClaims จาก LogtoClient และอัปเดตสตรีมของผู้ใช้ปัจจุบัน
เมธอด signOut จะลบข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้ที่เก็บไว้ในที่เก็บข้อมูลในเครื่องและอัปเดตสตรีมของผู้ใช้ปัจจุบัน
authManager เพื่อเข้าถึง instance ของ CustomAuthManagercurrentUserUid เพื่อดึง uid ของผู้ใช้ปัจจุบันcurrentUserData เพื่อดึงข้อมูลของผู้ใช้ปัจจุบันlogtoClient เพื่อเข้าถึง instance ของ Logto clientเรียกเมธอด authManager.signIn เพื่อเริ่มขั้นตอนการตรวจสอบสิทธิ์เมื่อผู้ใช้คลิกที่ปุ่มลงชื่อเข้า
redirectUriคือ URL callback ที่จะใช้จับการตอบกลับจากหน้าลงชื่อเข้า Logto ดูรายละเอียดเพิ่มเติมในการ implement sign-in สำหรับ redirectUri
ผู้ใช้จะถูกเปลี่ยนเส้นทางไปที่หน้า user หลังจากการตรวจสอบสิทธิ์สำเร็จ
ใช้ getters ยูทิลการตรวจสอบสิทธิ์เพื่อเข้าถึงข้อมูลผู้ใช้ปัจจุบันและ instance ของ Logto client
ตัวอย่างเช่น, เพื่อแสดงข้อมูลผู้ใช้โดยใช้หลาย ๆ วิดเจ็ต Text:
เรียกเมธอดลงชื่อออกเมื่อผู้ใช้คลิกที่ปุ่มลงชื่อออกและเปลี่ยนเส้นทางกลับไปยังหน้าหลัก
รันแอปพลิเคชัน FlutterFlow ของคุณบน emulator คลิกที่ปุ่มลงชื่อเข้าที่หน้าแรกเพื่อเริ่มการดำเนินการตรวจสอบสิทธิ์ หน้าลงชื่อเข้า Logto จะถูกเปิดใน webview หลังจากการตรวจสอบสิทธิ์สำเร็จ ผู้ใช้จะถูกเปลี่ยนเส้นทางไปที่หน้าโปรไฟล์ผู้ใช้ ข้อมูลของผู้ใช้จะแสดงบนหน้าโปรไฟล์ผู้ใช้ คลิกที่ปุ่มลงชื่อออกเพื่อลงชื่อออกและเปลี่ยนเส้นทางกลับไปยังหน้าแรก
อย่าลืมรวมสาขา develop กลับไปยังสาขา main และส่งการเปลี่ยนแปลงไปยังที่เก็บ GitHub
Logto SDK ให้เมธอดเพิ่มเติมเพื่อทำงานร่วมกับ Logto API คุณอาจปรับแต่งคลาส CustomAuthManager เพิ่มเติมเพื่อนำเสนอฟีเจอร์เพิ่มเติมโดยใช้ Logto SDK