ไทย
  • flutter
  • authentication
  • flutter-flow

การตรวจสอบสิทธิ์ของ FlutterFlow แบบกำหนดเองโดยใช้ Logto

เรียนรู้วิธีการใช้การตรวจสอบสิทธิ์แบบกำหนดเองในแอปพลิเคชัน Flutter ของคุณโดยใช้ Logto Flutter SDK

Simeng
Simeng
Developer

แนะนำ

FlutterFlow เป็นแพลตฟอร์มที่มีโค้ดระดับต่ำที่ช่วยให้คุณสามารถพัฒนาแอปพลิเคชัน Flutter ได้อย่างง่ายดาย มันมีอินเตอร์เฟซแบบลากและปล่อยที่ช่วยให้คุณออกแบบ UI ของแอปพลิเคชันของคุณ และสร้างโค้ด Flutter ที่สอดคล้องกัน ตามเอกสาร ทางการ มีตัวเลือกการบูรณาการการตรวจสอบสิทธิ์ 3 ตัวเลือก:

  1. ผ่านการตรวจสอบสิทธิ์ Firebase ภายในตัว
  2. ผ่านการตรวจสอบสิทธิ์ Supabase ภายในตัว
  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 ของคุณ

ข้อกำหนดเบื้องต้น

  • บัญชี Logto Cloud หรือ ติดตั้ง Logto ด้วยตนเอง (ดู ⚡ เริ่มต้นใช้งาน เพื่อสร้าง Logto instance)
  • แอปพลิเคชัน Flutter ที่สร้างขึ้นโดยใช้ FlutterFlow
  • ลงทะเบียนแอปพลิเคชัน flutter ใน Logto console ของคุณ
  • ที่เก็บ GitHub เพื่อจัดการโค้ดที่คุณปรับแต่งใน FlutterFlow
  • ทบทวนคู่มือการบูรณาการ Logto Flutter SDK ในเอกสาร

ขั้นตอนที่ 1: เปิดใช้งานการจัดการโค้ดที่ปรับแต่งใน FlutterFlow

เพื่อปรับแต่งคลาส CustomAuthManager คุณต้องเปิดใช้งานฟีเจอร์โค้ดที่ปรับแต่งใน FlutterFlow ตามที่คู่มือ Manage Custom Code In GitHub เพื่อเชื่อมโยงและซิงค์โครงการ FlutterFlow ของคุณกับ GitHub

เมื่อเสร็จสิ้น คุณจะมีสามสาขาต่างกันในที่เก็บ GitHub FlutterFlow ของคุณ:

  1. main: สาขาหลักสำหรับโครงการ flutter คุณจะต้องใช้สาขานี้ในการปรับใช้โครงการของคุณ
  2. flutterflow: สาขาที่ FlutterFlow จะซิงโครไนซ์การเปลี่ยนแปลงจาก UI editor กับโค้ดที่คุณทำเอง
  3. develop: สาขาที่คุณสามารถแก้ไขโค้ดที่ปรับแต่งได้

ขั้นตอนที่ 2: ออกแบบและสร้างการดำเนินการ UI ที่ปรับแต่งใน FlutterFlow ของคุณ

สร้างหน้าที่ของคุณ

สร้าง UI ของคุณใน FlutterFlow คุณสามารถทำตามเอกสาร FlutterFlow เพื่อสร้าง UI ตามความต้องการของคุณ ในบทแนะนำนี้ ตามข้อกำหนดขั้นต่ำเราจะถือว่าคุณมีสองหน้า:

  1. หน้าหลัก HomePage ที่มีปุ่มลงชื่อเข้าใช้ (ไม่จำเป็นต้องใช้ฟอร์มการลงชื่อเข้าใช้ การดำเนินการตรวจสอบสิทธิ์ผู้ใช้จะถูกจัดการด้านบน Logto โปรดดูที่คู่มือ customize sie เพิ่มเติมสำหรับรายละเอียด)

หน้าหลัก

  1. หน้าข้อมูลส่วนตัว user เพื่อแสดงข้อมูลของผู้ใช้และปุ่มลงชื่อออก

หน้าผู้ใช้

เปิดใช้งานการตรวจสอบสิทธิ์ที่กำหนดเองใน FlutterFlow

ไปที่ App Settings - Authentication และเปิดใช้งานการตรวจสอบสิทธิ์ที่กำหนดเอง สิ่งนี้จะสร้างคลาส CustomAuthManager และไฟล์ที่เกี่ยวข้องในโครงการ FlutterFlow ของคุณ

การตรวจสอบสิทธิ์แบบกำหนดเองของ FlutterFlow

ขั้นตอนที่ 3: ซิงโครไนซ์โครงการ FlutterFlow กับ GitHub

หลังจากที่คุณสร้าง UI ที่กำหนดเองและเปิดใช้งานการตรวจสอบสิทธิ์ที่กำหนดเองใน FlutterFlow คุณต้องซิงค์โครงการของคุณกับ GitHub ไปที่ integrations - GitHub หน้าและคลิกที่ Push to Repository

FlutterFlow GitHub push

ขั้นตอนที่ 4: ปรับแต่งโค้ด CustomAuthManager

เปลี่ยนไปที่สาขา develop ในที่เก็บ GitHub ของคุณและรวมการเปลี่ยนแปลงล่าสุดจากสาขา flutterflow สิ่งนี้จะซิงโครไนซ์การเปลี่ยนแปลง UI ทั้งหมดไปยังสาขา develop ของคุณ รวมถึงวิดเจ็ตหน้าของคุณและคลาส CustomAuthManager ที่สร้างไว้แล้ว

ติดตั้งการพึ่งพา Logto SDK

เพิ่มการพึ่งพา Logto SDK ให้กับโครงการของคุณ

อัปเดตคลาส UserProvider

คลาส UserProvider รับผิดชอบในการจัดการสถานะการตรวจสอบสิทธิ์ผู้ใช้ เราจำเป็นต้องปรับแต่งคุณสมบัติเพื่อเก็บข้อมูลการตรวจสอบสิทธิ์ที่ได้รับจาก Logto SDK

เพิ่มคุณสมบัติ idToken ที่มีประเภท OpenIdClaims เพื่อเก็บการอ้างสิทธิ์ id_token สำหรับผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์

คลาส OpenIdClaims ถูกกำหนดใน Logto SDK ซึ่งจะให้ข้อมูลการอ้างสิทธิ์ id_token มาตรฐาน OIDC จากผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์

ปรับแต่งคลาส CustomAuthManager และเริ่มใช้งาน Logto client

เมธอด initialize จะเริ่มต้นวม Logto client instance และอัปเดตสตรีมของผู้ใช้ปัจจุบันด้วยสถานะการตรวจสอบสิทธิ์ของผู้ใช้ที่คงไว้ในที่เก็บข้อมูลในเครื่อง

Logto SDK ใช้แพ็คเกจ flutter_secure_storage เพื่อเก็บข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้อย่างปลอดภัย หลังจากที่ผู้ใช้ได้รับการตรวจสอบสิทธิ์ การอ้างสิทธิ์ id_token จะถูกเก็บไว้ในที่เก็บข้อมูลในเครื่อง

ใช้เมธอดลงชื่อเข้าใช้โดยใช้ Logto client

การเรียกเมธอด LogtoClient.signIn จะเริ่มการดำเนินการตรวจสอบสิทธิ์ OIDC มาตรฐาน หน้าลงชื่อเข้าใช้ของ Logto จะถูกเปิดใน webview การดำเนินการตรวจสอบสิทธิ์บน webview ได้รับการกำหนดโดย flutter_web_auth

LogtoClient จะจัดการขั้นตอนที่เกี่ยวข้องกับการอนุญาต, การแลกเปลี่ยนโทเค็น, และการดึงข้อมูลของผู้ใช้ เมื่อผู้ใช้ได้รับการตรวจสอบสิทธิ์ การอ้างสิทธิ์ idTokenClaims จะถูกเก็บไว้ในที่เก็บข้อมูลในเครื่อง

เรียกข้อมูล idTokenClaims จาก LogtoClient และอัปเดตสตรีมของผู้ใช้ปัจจุบัน

ใช้เมธอดลงชื่อออก

เมธอด signOut จะลบข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้ที่เก็บไว้ในที่เก็บข้อมูลในเครื่องและอัปเดตสตรีมของผู้ใช้ปัจจุบัน

ปรับปรุงยูทิลการตรวจสอบสิทธิ์

  • เพิ่ม getter authManager เพื่อเข้าถึง instance ของ CustomAuthManager
  • เพิ่ม getter currentUserUid เพื่อดึง uid ของผู้ใช้ปัจจุบัน
  • เพิ่ม getter currentUserData เพื่อดึงข้อมูลของผู้ใช้ปัจจุบัน
  • เพิ่ม getter logtoClient เพื่อเข้าถึง instance ของ Logto client

ขั้นตอนที่ 5: อัปเดตปุ่มลงชื่อเข้าและลงชื่อออกใน UI ของคุณ

หน้าแรก

เรียกเมธอด 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