## แนะนำ [FlutterFlow](https://flutterflow.io/) เป็นแพลตฟอร์มที่มีโค้ดระดับต่ำที่ช่วยให้คุณสามารถพัฒนาแอปพลิเคชัน Flutter ได้อย่างง่ายดาย มันมีอินเตอร์เฟซแบบลากและปล่อยที่ช่วยให้คุณออกแบบ UI ของแอปพลิเคชันของคุณ และสร้างโค้ด Flutter ที่สอดคล้องกัน ตามเอกสาร [ทางการ](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication) มีตัวเลือกการบูรณาการการตรวจสอบสิทธิ์ 3 ตัวเลือก: 1. ผ่านการตรวจสอบสิทธิ์ Firebase ภายในตัว 2. ผ่านการตรวจสอบสิทธิ์ Supabase ภายในตัว 3. การตรวจสอบสิทธิ์แบบกำหนดเอง สำหรับสองแบบแรก FlutterFlow ให้การบูรณาการไร้รอยต่อกับ Firebase และ Supabase คุณจะต้องตั้งค่าโครงการ Firebase หรือ Supabase ของคุณ และกำหนดค่าการตรวจสอบสิทธิ์ใน FlutterFlow อย่างไรก็ตาม หากคุณต้องการใช้ผู้ให้บริการตรวจสอบสิทธิ์รายอื่น คุณจะต้องพัฒนาตรรกะการตรวจสอบสิทธิ์ด้วยตัวเอง สำหรับ [การตรวจสอบสิทธิ์แบบกำหนดเอง](https://docs.flutterflow.io/data-and-backend/custom-authentication) FlutterFlow มีวิธีบูรณาการกับผู้ให้บริการตรวจสอบสิทธิ์ใดๆ โดยอาศัยโซลูชัน [API การตรวจสอบสิทธิ์แบบกำหนดเอง](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users) ที่เดียว อย่างไรก็ตาม การแลกเปลี่ยนข้อมูลผู้ใช้โดยตรงระหว่างไคลเอนต์และเซิร์ฟเวอร์ตรวจสอบสิทธิ์ไม่แนะนำตามมาตรฐานความปลอดภัยสมัยใหม่ แทนที่จะใช้การดำเนินการตรวจสอบสิทธิ์ที่ปลอดภัย เช่น OAuth 2.0 หรือ OpenID Connect (OIDC) เพื่อทำการตรวจสอบสิทธิ์ สำหรับผู้ให้บริการ Identity Providers (IdP) ที่ใช้ OAuth 2.0 หรือ OIDC สมัยใหม่ เช่น Auth0, Okta, และ Logto การให้สิทธิ์ประเภท resource owner password credentials (ROPC) ไม่แนะนำหรือถูกห้ามเนื่องจากเหตุผลด้านความปลอดภัย ดูข้อมูลเพิ่มเติมได้ที่ [ประเภทการให้สิทธิ์ ropc ที่เลิกใช้แล้ว](https://blog.logto.io/deprecated-ropc-grant-type/) การดำเนินการตรวจสอบสิทธิ์มาตรฐาน OAuth 2.0 หรือ OIDC จะมีการเคลื่อนไหวหลายขั้นตอนและการเปลี่ยนเส้นทางระหว่างไคลเอนต์แอปพลิเคชัน เซิร์ฟเวอร์อนุมัติ, และเบราว์เซอร์ของผู้ใช้ ในโพสต์นี้ เราจะแสดงวิธีการปรับแต่งคลาส `CustomAuthManager` ของ FluterFlow โดยใช้ [Logto Flutter SDK](https://docs.logto.io/quick-starts/flutter) เพื่อดำเนินการตรวจสอบสิทธิ์ที่ปลอดภัยในแอปพลิเคชัน FlutterFlow ของคุณ ## ข้อกำหนดเบื้องต้น - บัญชี [Logto Cloud](https://cloud.logto.io/) หรือ ติดตั้ง Logto ด้วยตนเอง (ดู [⚡ เริ่มต้นใช้งาน](https://docs.logto.io/docs/tutorials/get-started/) เพื่อสร้าง Logto instance) - แอปพลิเคชัน Flutter ที่สร้างขึ้นโดยใช้ FlutterFlow - ลงทะเบียนแอปพลิเคชัน flutter ใน Logto console ของคุณ - ที่เก็บ GitHub เพื่อจัดการโค้ดที่คุณปรับแต่งใน FlutterFlow - ทบทวนคู่มือการบูรณาการ Logto Flutter SDK [ในเอกสาร](https://docs.logto.io/quick-starts/flutter/) - แพ็กเกจ Logto Flutter SDK สามารถใช้ได้บน [pub.dev](https://pub.dev/packages/logto_dart_sdk) และ Logto [github repository](https://github.com/logto-io/dart). - SDK ในปัจจุบันสามารถใช้ได้เฉพาะบนแพลตฟอร์ม Android และ iOS เท่านั้น - จัดการโค้ดที่ปรับแต่งใน GitHub เป็นฟีเจอร์พิเศษใน FlutterFlow คุณต้องอัพเกรด FlutterFlow ของคุณเป็นแผน `Pro` เพื่อเปิดใช้งานฟีเจอร์นี้ ## ขั้นตอนที่ 1: เปิดใช้งานการจัดการโค้ดที่ปรับแต่งใน FlutterFlow เพื่อปรับแต่งคลาส `CustomAuthManager` คุณต้องเปิดใช้งานฟีเจอร์โค้ดที่ปรับแต่งใน FlutterFlow ตามที่คู่มือ [Manage Custom Code In GitHub](https://docs.flutterflow.io/customizing-your-app/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](https://docs.flutterflow.io/) เพื่อสร้าง UI ตามความต้องการของคุณ ในบทแนะนำนี้ ตามข้อกำหนดขั้นต่ำเราจะถือว่าคุณมีสองหน้า: 1. หน้าหลัก `HomePage` ที่มีปุ่มลงชื่อเข้าใช้ (ไม่จำเป็นต้องใช้ฟอร์มการลงชื่อเข้าใช้ การดำเนินการตรวจสอบสิทธิ์ผู้ใช้จะถูกจัดการด้านบน Logto โปรดดูที่คู่มือ [customize sie](https://docs.logto.io/docs/recipes/customize-sie/) เพิ่มเติมสำหรับรายละเอียด) ![หน้าหลัก](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. หน้าข้อมูลส่วนตัว `user` เพื่อแสดงข้อมูลของผู้ใช้และปุ่มลงชื่อออก ![หน้าผู้ใช้](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### เปิดใช้งานการตรวจสอบสิทธิ์ที่กำหนดเองใน FlutterFlow ไปที่ `App Settings` - `Authentication` และเปิดใช้งานการตรวจสอบสิทธิ์ที่กำหนดเอง สิ่งนี้จะสร้างคลาส `CustomAuthManager` และไฟล์ที่เกี่ยวข้องในโครงการ FlutterFlow ของคุณ การตรวจสอบสิทธิ์แบบกำหนดเองของ 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 ให้กับโครงการของคุณ ```bash flutter pub add logto_dart_sdk ``` แพ็กเกจ Http ที่เป็นตัวเลือก: Logto client ต้องการใช้ http client สำหรับการเรียก API คุณสามารถใช้แพ็กเกจ `http` หรือแพ็กเกจ http client อื่นที่คุณต้องการได้ ```bash flutter pub add http ``` ### อัปเดตคลาส UserProvider คลาส `UserProvider` รับผิดชอบในการจัดการสถานะการตรวจสอบสิทธิ์ผู้ใช้ เราจำเป็นต้องปรับแต่งคุณสมบัติเพื่อเก็บข้อมูลการตรวจสอบสิทธิ์ที่ได้รับจาก Logto SDK เพิ่มคุณสมบัติ `idToken` ที่มีประเภท `OpenIdClaims` เพื่อเก็บการอ้างสิทธิ์ `id_token` สำหรับผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์ > คลาส `OpenIdClaims` ถูกกำหนดใน Logto SDK ซึ่งจะให้ข้อมูลการอ้างสิทธิ์ `id_token` มาตรฐาน `OIDC` จากผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์ ```dart // lib/auth/custom_auth/custom_auth_user_provider.dart import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'package:rxdart/rxdart.dart'; import 'custom_auth_manager.dart'; class FlutterFlowAuthAuthUser { FlutterFlowAuthAuthUser({required this.loggedIn, this.uid, this.idToken}); bool loggedIn; String? uid; OpenIdClaims? idToken; } /// สร้างสตรีมของผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์ BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### ปรับแต่งคลาส CustomAuthManager และเริ่มใช้งาน Logto client ```dart // lib/auth/custom_auth/custom_auth_manager.dart import 'dart:async'; import 'package:flutter/foundation.dart'; import 'package:http/http.dart' as http; import 'package:logto_dart_sdk/logto_client.dart'; import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'custom_auth_user_provider.dart'; export 'custom_auth_manager.dart'; class CustomAuthManager { late LogtoClient logtoClient; // การกำหนดค่า Logto final logtoConfig = const LogtoConfig( appId: '', endpoint: ''); // ... FlutterFlowAuthAuthUser? _updateCurrentUser( {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) { // อัปเดตสตรีมของผู้ใช้ปัจจุบัน final updatedUser = FlutterFlowAuthAuthUser( loggedIn: loggedIn, uid: uid, idToken: idToken, ); flutterFlowAuthAuthUserSubject.add(updatedUser); return updatedUser; } Future initialize() async { logtoClient = LogtoClient(config: logtoConfig, httpClient: http.Client()); late OpenIdClaims? idToken; try { idToken = await logtoClient.idTokenClaims; } catch (e) { if (kDebugMode) { print('Error initializing auth: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` เมธอด `initialize` จะเริ่มต้นวม Logto client instance และอัปเดตสตรีมของผู้ใช้ปัจจุบันด้วยสถานะการตรวจสอบสิทธิ์ของผู้ใช้ที่คงไว้ในที่เก็บข้อมูลในเครื่อง > Logto SDK ใช้แพ็คเกจ [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) เพื่อเก็บข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้อย่างปลอดภัย หลังจากที่ผู้ใช้ได้รับการตรวจสอบสิทธิ์ การอ้างสิทธิ์ `id_token` จะถูกเก็บไว้ในที่เก็บข้อมูลในเครื่อง ### ใช้เมธอดลงชื่อเข้าใช้โดยใช้ Logto client การเรียกเมธอด `LogtoClient.signIn` จะเริ่มการดำเนินการตรวจสอบสิทธิ์ `OIDC` มาตรฐาน หน้าลงชื่อเข้าใช้ของ Logto จะถูกเปิดใน webview การดำเนินการตรวจสอบสิทธิ์บน webview ได้รับการกำหนดโดย [flutter_web_auth](https://pub.dev/packages/flutter_web_auth) ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signIn( String redirectUri, ) async { await logtoClient.signIn(redirectUri); var idTokenClaims = await logtoClient.idTokenClaims; return _updateCurrentUser( loggedIn: idTokenClaims != null, uid: idTokenClaims?.subject, idToken: idTokenClaims, ); } ``` LogtoClient จะจัดการขั้นตอนที่เกี่ยวข้องกับการอนุญาต, การแลกเปลี่ยนโทเค็น, และการดึงข้อมูลของผู้ใช้ เมื่อผู้ใช้ได้รับการตรวจสอบสิทธิ์ การอ้างสิทธิ์ `idTokenClaims` จะถูกเก็บไว้ในที่เก็บข้อมูลในเครื่อง เรียกข้อมูล `idTokenClaims` จาก LogtoClient และอัปเดตสตรีมของผู้ใช้ปัจจุบัน ### ใช้เมธอดลงชื่อออก ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` เมธอด `signOut` จะลบข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้ที่เก็บไว้ในที่เก็บข้อมูลในเครื่องและอัปเดตสตรีมของผู้ใช้ปัจจุบัน ### ปรับปรุงยูทิลการตรวจสอบสิทธิ์ - เพิ่ม getter `authManager` เพื่อเข้าถึง instance ของ `CustomAuthManager` - เพิ่ม getter `currentUserUid` เพื่อดึง uid ของผู้ใช้ปัจจุบัน - เพิ่ม getter `currentUserData` เพื่อดึงข้อมูลของผู้ใช้ปัจจุบัน - เพิ่ม getter `logtoClient` เพื่อเข้าถึง instance ของ Logto client ```dart // lib/auth/custom_auth/auth_util.dart import 'package:logto_dart_sdk/logto_client.dart'; import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'custom_auth_manager.dart'; export 'custom_auth_manager.dart'; final _authManager = CustomAuthManager(); CustomAuthManager get authManager => _authManager; String get currentUserUid => currentUser?.uid ?? ''; OpenIdClaims? get currentUserData => currentUser?.idToken; LogtoClient get logtoClient => _authManager.logtoClient; ``` ## ขั้นตอนที่ 5: อัปเดตปุ่มลงชื่อเข้าและลงชื่อออกใน UI ของคุณ ### หน้าแรก เรียกเมธอด `authManager.signIn` เพื่อเริ่มขั้นตอนการตรวจสอบสิทธิ์เมื่อผู้ใช้คลิกที่ปุ่มลงชื่อเข้า > `redirectUri` คือ URL callback ที่จะใช้จับการตอบกลับจากหน้าลงชื่อเข้า Logto > ดูรายละเอียดเพิ่มเติมในการ [implement sign-in](https://docs.logto.io/quick-starts/flutter/#implement-sign-in) สำหรับ redirectUri ```dart // lib/pages/home_page/home_page_widget.dart final redirectUri = 'io.logto://callback'; // ... FFButtonWidget( onPressed: () async { GoRouter.of(context).prepareAuthEvent(); await authManager.signIn(redirectUri); context.replaceNamed('user'); }, text: 'Sign In', // ... ) ``` ผู้ใช้จะถูกเปลี่ยนเส้นทางไปที่หน้า `user` หลังจากการตรวจสอบสิทธิ์สำเร็จ ### หน้าโปรไฟล์ผู้ใช้ ใช้ getters ยูทิลการตรวจสอบสิทธิ์เพื่อเข้าถึงข้อมูลผู้ใช้ปัจจุบันและ instance ของ Logto client ตัวอย่างเช่น, เพื่อแสดงข้อมูลผู้ใช้โดยใช้หลาย ๆ วิดเจ็ต `Text`: ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'User ID: $currentUserUid', ), Text( 'Display Name: ${currentUserData?.name}', ), Text( 'Username: ${currentUserData?.username}', ), Text( 'Email: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` เรียกเมธอดลงชื่อออกเมื่อผู้ใช้คลิกที่ปุ่มลงชื่อออกและเปลี่ยนเส้นทางกลับไปยังหน้าหลัก ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Sign Out', // ... ) ``` ## การทดสอบ รันแอปพลิเคชัน FlutterFlow ของคุณบน emulator คลิกที่ปุ่มลงชื่อเข้าที่หน้าแรกเพื่อเริ่มการดำเนินการตรวจสอบสิทธิ์ หน้าลงชื่อเข้า Logto จะถูกเปิดใน webview หลังจากการตรวจสอบสิทธิ์สำเร็จ ผู้ใช้จะถูกเปลี่ยนเส้นทางไปที่หน้าโปรไฟล์ผู้ใช้ ข้อมูลของผู้ใช้จะแสดงบนหน้าโปรไฟล์ผู้ใช้ คลิกที่ปุ่มลงชื่อออกเพื่อลงชื่อออกและเปลี่ยนเส้นทางกลับไปยังหน้าแรก อย่าลืมรวมสาขา `develop` กลับไปยังสาขา `main` และส่งการเปลี่ยนแปลงไปยังที่เก็บ GitHub การส่งไปยัง GitHub ของ FlutterFlow เป็นการซิงค์ทางเดียวจาก FlutterFlow ไปยัง GitHub การเปลี่ยนแปลงใดๆ ที่ทำภายใต้สาขา `flutterfl...` จะถูกเขียนทับโดย FlutterFlow UI editor เมื่อคุณส่งการเปลี่ยนแปลงไปยังที่เก็บ GitHub อย่าลืมใช้สาขา `develop` ในการจัดการโค้ดที่ปรับแต่งและรวมการเปลี่ยนแปลงกลับไปยังสาขา `main` สำหรับการปรับใช้ ## การอ่านเพิ่มเติม Logto SDK ให้เมธอดเพิ่มเติมเพื่อทำงานร่วมกับ Logto API คุณอาจปรับแต่งคลาส `CustomAuthManager` เพิ่มเติมเพื่อนำเสนอฟีเจอร์เพิ่มเติมโดยใช้ Logto SDK - [User info endpoint](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [Get resource access token](https://docs.logto.io/quick-starts/flutter/#api-resources) - [Get organization access token](https://docs.logto.io/quick-starts/flutter/#organization)