ข้ามไปยังเนื้อหาหลัก
สำหรับเพื่อนใหม่ของเรา:

Logto คือทางเลือกแทน Auth0 ที่ออกแบบมาสำหรับแอปและผลิตภัณฑ์ SaaS ยุคใหม่ โดยมีทั้งบริการ Cloud และ Open-source เพื่อช่วยให้คุณเปิดตัวระบบการจัดการเอกลักษณ์และการเข้าถึง (IAM) ได้อย่างรวดเร็ว สนุกกับการยืนยันตัวตน (การยืนยันตัวตน), การอนุญาต (การอนุญาต), และการจัดการหลายผู้เช่า ครบจบในที่เดียว

เราแนะนำให้เริ่มต้นด้วย tenant สำหรับการพัฒนาแบบฟรีบน Logto Cloud เพื่อให้คุณสามารถสำรวจฟีเจอร์ทั้งหมดได้อย่างง่ายดาย

ในบทความนี้ เราจะพาคุณไปทีละขั้นตอนเพื่อสร้างประสบการณ์ลงชื่อเข้าใช้ GitHub (การยืนยันตัวตนของผู้ใช้) อย่างรวดเร็วด้วย Flutter และ Logto

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

  • มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
  • มีความรู้พื้นฐานเกี่ยวกับ Flutter
  • มีบัญชี GitHub ที่ใช้งานได้

สร้างแอปพลิเคชันใน Logto

Logto สร้างขึ้นบนพื้นฐานของการยืนยันตัวตน OpenID Connect (OIDC) และการอนุญาต OAuth 2.0 โดยรองรับการจัดการข้อมูลระบุตัวตนแบบรวมศูนย์ข้ามหลายแอปพลิเคชัน ซึ่งมักเรียกว่า การลงชื่อเข้าใช้ครั้งเดียว (Single Sign-On; SSO)

ในการสร้างแอปพลิเคชัน แอปเนทีฟ ของคุณ เพียงทำตามขั้นตอนเหล่านี้:

  1. เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน" Get started
  2. ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "แอปเนทีฟ" หรือกรองเฟรมเวิร์ก "แอปเนทีฟ" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก "Flutter" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ Frameworks
  3. กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"

🎉 เยี่ยมมาก! คุณเพิ่งสร้างแอปพลิเคชันแรกของคุณใน Logto คุณจะเห็นหน้าข้อความแสดงความยินดีซึ่งมีคู่มือการเชื่อมต่ออย่างละเอียด ให้ทำตามคู่มือเพื่อดูประสบการณ์ที่จะเกิดขึ้นในแอปพลิเคชันของคุณ

ผสานรวม Flutter กับ Logto

เคล็ดลับ:
  • แพ็กเกจ SDK มีให้ใช้งานบน pub.dev และที่ Logto GitHub repository
  • โปรเจกต์ตัวอย่างสร้างขึ้นโดยใช้ Flutter material คุณสามารถดูตัวอย่างได้ที่ pub.dev
  • SDK นี้สามารถใช้งานร่วมกับแอป Flutter บนแพลตฟอร์ม iOS, Android และ Web ส่วนแพลตฟอร์มอื่น ๆ ยังไม่ได้รับการทดสอบ

การติดตั้ง

คุณสามารถติดตั้ง logto_dart_sdk package ได้โดยตรงผ่านตัวจัดการแพ็กเกจ pub
รันคำสั่งต่อไปนี้ที่โฟลเดอร์รากของโปรเจกต์ของคุณ:

flutter pub add logto_dart_sdk

หรือเพิ่มบรรทัดต่อไปนี้ในไฟล์ pubspec.yaml ของคุณ:

dependencies:
logto_dart_sdk: ^3.0.0

จากนั้นรัน:

flutter pub get

การพึ่งพาและการตั้งค่า

ความเข้ากันได้ของเวอร์ชัน SDK

เวอร์ชัน Logto SDKเวอร์ชัน Dart SDKรองรับ Dart 3.0 หรือไม่
< 2.0.0>= 2.17.6 < 3.0.0false
>= 2.0.0 < 3.0.0>= 3.0.0true
>= 3.0.0>= 3.6.0true

การตั้งค่า flutter_secure_storage

เบื้องหลัง SDK นี้ใช้ flutter_secure_storage เพื่อจัดเก็บโทเค็นอย่างปลอดภัยข้ามแพลตฟอร์ม

  • สำหรับ iOS ใช้ Keychain
  • สำหรับ Android ใช้การเข้ารหัส AES

กำหนดค่าเวอร์ชัน Android

ตั้งค่า android:minSdkVersion เป็น >= 18 ในไฟล์ android/app/build.gradle ของโปรเจกต์ของคุณ

build.gradle
  android {
...

defaultConfig {
...
minSdkVersion 18
...
}
}

ปิดการสำรองข้อมูลอัตโนมัติบน Android

โดยปกติ Android จะสำรองข้อมูลไปยัง Google Drive ซึ่งอาจทำให้เกิดข้อผิดพลาด java.security.InvalidKeyException:Failed ในการถอดรหัสคีย์ เพื่อหลีกเลี่ยงปัญหานี้

  1. เพื่อปิดการสำรองข้อมูลอัตโนมัติ ให้ไปที่ไฟล์ manifest ของแอปและตั้งค่า android:allowBackup และ android:fullBackupContent เป็น false

    AndroidManifest.xml
    <manifest ... >
    ...
    <application
    android:allowBackup="false"
    android:fullBackupContent="false"
    ...
    >
    ...
    </application>
    </manifest>

  2. ยกเว้น sharedprefs จาก FlutterSecureStorage

    หากคุณต้องการเก็บ android:fullBackupContent ไว้สำหรับแอปของคุณแทนที่จะปิดการใช้งาน คุณสามารถยกเว้นไดเรกทอรี sharedprefs จากการสำรองข้อมูล ดูรายละเอียดเพิ่มเติมใน เอกสาร Android

    ในไฟล์ AndroidManifest.xml ของคุณ ให้เพิ่มแอตทริบิวต์ android:fullBackupContent ลงใน <application> ตามตัวอย่างด้านล่าง แอตทริบิวต์นี้จะชี้ไปยังไฟล์ XML ที่มีการกำหนดกฎการสำรองข้อมูล

    AndroidManifest.xml
    <application ...
    android:fullBackupContent="@xml/backup_rules">
    </application>

    สร้างไฟล์ XML ชื่อ @xml/backup_rules ในไดเรกทอรี res/xml/ ในไฟล์นี้ให้เพิ่มกฎด้วย <include> และ <exclude> ตัวอย่างนี้จะสำรอง shared preferences ทั้งหมดยกเว้น device.xml:

    @xml/backup_rules
    <?xml version="1.0" encoding="utf-8"?>
    <full-backup-content>
    <exclude domain="sharedpref" path="FlutterSecureStorage"/>
    </full-backup-content>

โปรดตรวจสอบรายละเอียดเพิ่มเติมได้ที่ flutter_secure_storage

การตั้งค่า flutter_web_auth_2

เบื้องหลัง SDK นี้ใช้ flutter_web_auth_2 เพื่อยืนยันตัวตนผู้ใช้กับ Logto แพ็กเกจนี้ช่วยให้ยืนยันตัวตนกับ Logto ได้ง่ายโดยใช้ system webview หรือ browser

ปลั๊กอินนี้ใช้ ASWebAuthenticationSession บน iOS 12+ และ macOS 10.15+, SFAuthenticationSession บน iOS 11, Chrome Custom Tabs บน Android และเปิดหน้าต่างใหม่บน Web

  • iOS: ไม่ต้องตั้งค่าเพิ่มเติม

  • Android: ลงทะเบียน callback url บน Android

    เพื่อให้สามารถรับ callback url จากหน้าลงชื่อเข้าใช้ของ Logto ได้ คุณต้องลงทะเบียน redirectUri ของคุณในไฟล์ AndroidManifest.xml

    AndroidManifest.xml
      <manifest>
    <application>
    <activity
    android:name="com.linusu.flutter_web_auth_2.CallbackActivity"
    android:exported="true">
    <intent-filter android:label="flutter_web_auth_2">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="YOUR_CALLBACK_URL_SCHEME_HERE" />
    </intent-filter>
    </activity>
    </application>
    </manifest>
  • เว็บเบราว์เซอร์: สร้าง endpoint เพื่อจัดการ callback URL

    หากคุณใช้แพลตฟอร์มเว็บ คุณต้องสร้าง endpoint เพื่อจัดการ callback URL และส่งกลับไปยังแอปพลิเคชันโดยใช้ API postMessage

    callback.html
    <!doctype html>
    <title>การยืนยันตัวตนเสร็จสมบูรณ์</title>
    <p>การยืนยันตัวตนเสร็จสมบูรณ์ หากไม่เกิดขึ้นโดยอัตโนมัติ กรุณาปิดหน้าต่างนี้</p>
    <script>
    function postAuthenticationMessage() {
    const message = {
    'flutter-web-auth-2': window.location.href,
    };

    if (window.opener) {
    window.opener.postMessage(message, window.location.origin);
    window.close();
    } else if (window.parent && window.parent !== window) {
    window.parent.postMessage(message, window.location.origin);
    } else {
    localStorage.setItem('flutter-web-auth-2', window.location.href);
    window.close();
    }
    }

    postAuthenticationMessage();
    </script>

โปรดตรวจสอบคู่มือการตั้งค่าในแพ็กเกจ flutter_web_auth_2 สำหรับรายละเอียดเพิ่มเติม

การผสานรวม

เริ่มต้น LogtoClient

นำเข้าแพ็กเกจ logto_dart_sdk และเริ่มต้นอินสแตนซ์ LogtoClient ที่ root ของแอปพลิเคชันของคุณ

lib/main.dart
import 'package:logto_dart_sdk/logto_dart_sdk.dart';
import 'package:http/http.dart' as http;

void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);


Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Logto Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;


State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
late LogtoClient logtoClient;

void render() {
// เปลี่ยนสถานะ
}

// LogtoConfig
final logtoConfig = const LogtoConfig(
endpoint: "<your-logto-endpoint>",
appId: "<your-app-id>"
);

void _init() {
logtoClient = LogtoClient(
config: logtoConfig,
httpClient: http.Client(), // http client (ไม่บังคับ)
);
render();
}


void initState() {
super.initState();
_init();
}

// ...
}

ดำเนินการลงชื่อเข้าใช้

ก่อนที่เราจะลงลึกในรายละเอียด นี่คือภาพรวมประสบการณ์ของผู้ใช้ปลายทาง กระบวนการลงชื่อเข้าใช้สามารถสรุปได้ดังนี้:

  1. แอปของคุณเรียกใช้งานเมธอดลงชื่อเข้าใช้
  2. ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto สำหรับแอปเนทีฟ ระบบจะเปิดเบราว์เซอร์ของระบบ
  3. ผู้ใช้ลงชื่อเข้าใช้และถูกเปลี่ยนเส้นทางกลับไปยังแอปของคุณ (ตามที่กำหนดไว้ใน redirect URI)

เกี่ยวกับการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง (redirect-based sign-in)

  1. กระบวนการยืนยันตัวตนนี้เป็นไปตามโปรโตคอล OpenID Connect (OIDC) และ Logto บังคับใช้มาตรการรักษาความปลอดภัยอย่างเข้มงวดเพื่อปกป้องการลงชื่อเข้าใช้ของผู้ใช้
  2. หากคุณมีหลายแอป คุณสามารถใช้ผู้ให้บริการข้อมูลระบุตัวตน (Logto) เดียวกันได้ เมื่อผู้ใช้ลงชื่อเข้าใช้แอปหนึ่งแล้ว Logto จะดำเนินการลงชื่อเข้าใช้โดยอัตโนมัติเมื่อผู้ใช้เข้าถึงแอปอื่น

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเหตุผลและประโยชน์ของการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง โปรดดูที่ อธิบายประสบการณ์การลงชื่อเข้าใช้ของ Logto


ก่อนเริ่มต้น คุณต้องเพิ่ม redirect URI ใน Admin Console สำหรับแอปพลิเคชันของคุณ

ไปที่หน้ารายละเอียดแอปพลิเคชันของ Logto Console เพิ่ม Redirect URI io.logto://callback แล้วคลิก "บันทึกการเปลี่ยนแปลง" (Save changes)

Redirect URI ใน Logto Console
  • สำหรับ iOS สคีมของ redirect URI ไม่สำคัญนัก เนื่องจากคลาส ASWebAuthenticationSession จะฟัง redirect URI ไม่ว่าจะลงทะเบียนหรือไม่ก็ตาม
  • สำหรับ Android สคีมของ redirect URI ต้องลงทะเบียนในไฟล์ AndroidManifest.xml

หลังจากตั้งค่า redirect URI แล้ว ให้เพิ่มปุ่มลงชื่อเข้าใช้ในหน้าของคุณ ซึ่งจะเรียก API logtoClient.signIn เพื่อเริ่มต้น flow การลงชื่อเข้าใช้ของ Logto:

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
// ...
final redirectUri = 'io.logto://callback';


Widget build(BuildContext context) {
// ...

Widget signInButton = TextButton(
onPressed: () async {
await logtoClient.signIn(redirectUri);
render();
},
child: const Text('Sign In'),
);

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
signInButton,
],
),
),
);
}
}

ดำเนินการลงชื่อออก

มาสลับไปที่หน้ารายละเอียดแอปพลิเคชันของ Logto Console กัน เพิ่ม Post Sign-out Redirect URI io.logto://callback แล้วคลิก "บันทึกการเปลี่ยนแปลง"

Post Sign-out Redirect URI ใน Logto Console

Post Sign-out Redirect URI เป็นแนวคิดของ OAuth 2.0 ซึ่งหมายถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังจากออกจากระบบ

ตอนนี้มาเพิ่มปุ่มลงชื่อออกในหน้าหลัก เพื่อให้ผู้ใช้สามารถลงชื่อออกจากแอปพลิเคชันของคุณได้

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
// ...

final postSignOutRedirectUri = 'io.logto//home';


Widget build(BuildContext context) {
// ...

Widget signOutButton = TextButton(
onPressed: () async {
await logtoClient.signOut(postSignOutRedirectUri);
render();
},
child: const Text('Sign Out'),
);

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
signInButton,
signOutButton,
],
),
),
);
}
}

จัดการสถานะการยืนยันตัวตน

Logto SDK มีเมธอดแบบอะซิงโครนัสสำหรับตรวจสอบสถานะการยืนยันตัวตน เมธอดนี้คือ logtoClient.isAuthenticated ซึ่งจะคืนค่าเป็น boolean โดยคืนค่า true หากผู้ใช้ได้รับการยืนยันตัวตนแล้ว มิฉะนั้นจะเป็น false

ในตัวอย่างนี้ เราจะแสดงปุ่มลงชื่อเข้าใช้หรือปุ่มลงชื่อออกตามสถานะการยืนยันตัวตน ตอนนี้มาอัปเดตเมธอด render ใน Widget ของเราเพื่อจัดการการเปลี่ยนแปลงสถานะ:

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
// ...
bool? isAuthenticated = false;

void render() {
setState(() async {
isAuthenticated = await logtoClient.isAuthenticated;
});
}


Widget build(BuildContext context) {
// ...

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
isAuthenticated == true ? signOutButton : signInButton,
],
),
),
);
}
}

จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ

ตอนนี้คุณสามารถทดสอบแอปพลิเคชันของคุณได้แล้ว:

  1. รันแอปพลิเคชันของคุณ คุณจะเห็นปุ่มลงชื่อเข้าใช้
  2. คลิกปุ่มลงชื่อเข้าใช้ SDK จะเริ่มกระบวนการลงชื่อเข้าใช้และเปลี่ยนเส้นทางคุณไปยังหน้าลงชื่อเข้าใช้ของ Logto
  3. หลังจากที่คุณลงชื่อเข้าใช้แล้ว คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณและเห็นปุ่มลงชื่อออก
  4. คลิกปุ่มลงชื่อออกเพื่อเคลียร์ที่เก็บโทเค็นและออกจากระบบ

เพิ่มตัวเชื่อมต่อ GitHub

เพื่อเปิดใช้งานการลงชื่อเข้าใช้อย่างรวดเร็วและเพิ่มอัตราการเปลี่ยนผู้ใช้ ให้เชื่อมต่อกับ Flutter ในฐานะผู้ให้บริการข้อมูลระบุตัวตน (Identity provider) ตัวเชื่อมต่อโซเชียลของ Logto ช่วยให้คุณสร้างการเชื่อมต่อนี้ได้ภายในไม่กี่นาที โดยสามารถกรอกพารามิเตอร์ได้หลายค่า

ในการเพิ่มตัวเชื่อมต่อโซเชียล ให้ทำตามขั้นตอนดังนี้:

  1. ไปที่ Console > Connectors > Social Connectors
  2. คลิก "Add social connector" และเลือก "GitHub"
  3. ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า
Connector tab
บันทึก:

หากคุณกำลังทำตามคู่มือ Connector แบบ in-place คุณสามารถข้ามส่วนถัดไปได้

ตั้งค่า GitHub OAuth app

ขั้นตอนที่ 1: สร้าง OAuth app บน GitHub

ก่อนที่คุณจะใช้ GitHub เป็นผู้ให้บริการการยืนยันตัวตน คุณต้องสร้าง OAuth App บน GitHub เพื่อรับข้อมูลประจำตัว OAuth 2.0

  1. ไปที่ GitHub และลงชื่อเข้าใช้ด้วยบัญชีของคุณ หรือสร้างบัญชีใหม่หากจำเป็น
  2. ไปที่ Settings > Developer settings > OAuth apps
  3. คลิก New OAuth App เพื่อขึ้นทะเบียนแอปใหม่:
    • Application name: กรอกชื่อที่สื่อความหมายสำหรับแอปของคุณ
    • Homepage URL: กรอก URL หน้าแรกของแอปพลิเคชันของคุณ
    • Authorization callback URL: คัดลอก Callback URI จากตัวเชื่อมต่อ GitHub ของคุณใน Logto แล้ววางที่นี่ หลังจากผู้ใช้ลงชื่อเข้าใช้ด้วย GitHub แล้ว พวกเขาจะถูกเปลี่ยนเส้นทางมาที่นี่พร้อมรหัสการอนุญาตที่ Logto ใช้เพื่อดำเนินการยืนยันตัวตนให้เสร็จสมบูรณ์
    • Application description: (ไม่บังคับ) เพิ่มคำอธิบายสั้น ๆ เกี่ยวกับแอปของคุณ
  4. คลิก Register application เพื่อสร้าง OAuth App
บันทึก:

เราแนะนำว่าไม่ควรติ๊กเลือก Enable Device Flow เพราะผู้ใช้ที่ลงชื่อเข้าใช้ด้วย GitHub บนอุปกรณ์มือถือจะต้องยืนยันการลงชื่อเข้าใช้ครั้งแรกในแอป GitHub บนมือถือ ซึ่งผู้ใช้ GitHub จำนวนมากไม่ได้ติดตั้งแอป GitHub บนโทรศัพท์ อาจทำให้ขั้นตอนการลงชื่อเข้าใช้ติดขัด เปิดใช้งานเฉพาะเมื่อคุณคาดว่าผู้ใช้จะยืนยันการลงชื่อเข้าใช้ผ่านแอป GitHub บนมือถือเท่านั้น ดูรายละเอียดเกี่ยวกับ device flow

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่า GitHub OAuth Apps ดูที่ Creating an OAuth App

ขั้นตอนที่ 2: ตั้งค่าตัวเชื่อมต่อ Logto ของคุณ

หลังจากสร้าง OAuth app ใน GitHub แล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังหน้ารายละเอียดซึ่งคุณสามารถคัดลอก Client ID และสร้าง Client secret ได้

  1. คัดลอก Client ID จาก GitHub OAuth app ของคุณแล้ววางลงในช่อง clientId ใน Logto
  2. คลิก Generate a new client secret ใน GitHub เพื่อสร้าง secret ใหม่ จากนั้นคัดลอกและวางลงในช่อง clientSecret ใน Logto
  3. คลิก Save and Done ใน Logto เพื่อเชื่อมต่อระบบข้อมูลระบุตัวตนของคุณกับ GitHub
คำเตือน:

เก็บรักษา Client secret ของคุณให้ปลอดภัยและอย่าเปิดเผยในโค้ดฝั่งไคลเอนต์ Client secret ของ GitHub ไม่สามารถกู้คืนได้หากสูญหาย — คุณจะต้องสร้างใหม่เท่านั้น

ขั้นตอนที่ 3: ตั้งค่าขอบเขต (Scopes) (ไม่บังคับ)

ขอบเขต (Scopes) กำหนดสิทธิ์ที่แอปของคุณร้องขอจากผู้ใช้ และควบคุมว่าแอปของคุณจะเข้าถึงข้อมูลใดจากบัญชี GitHub ของพวกเขาได้บ้าง

ใช้ช่อง Scopes ใน Logto เพื่อร้องขอสิทธิ์เพิ่มเติมจาก GitHub เลือกวิธีการต่อไปนี้ตามความต้องการของคุณ:

ตัวเลือกที่ 1: ไม่ต้องการขอบเขต API เพิ่มเติม

  • เว้นว่างช่อง Scopes ในตัวเชื่อมต่อ GitHub ของคุณใน Logto
  • ขอบเขตเริ่มต้น read:user จะถูกขอโดยอัตโนมัติเพื่อให้ Logto สามารถดึงข้อมูลผู้ใช้พื้นฐาน (เช่น อีเมล ชื่อ รูปโปรไฟล์) ได้อย่างถูกต้อง

ตัวเลือกที่ 2: ขอขอบเขตเพิ่มเติมขณะลงชื่อเข้าใช้

  • ดู GitHub scopes สำหรับ OAuth apps ทั้งหมด และเพิ่มเฉพาะขอบเขตที่แอปของคุณต้องการ
  • กรอกขอบเขตทั้งหมดที่ต้องการในช่อง Scopes โดยคั่นด้วยช่องว่าง
  • ขอบเขตที่คุณระบุที่นี่จะเขียนทับค่าตั้งต้น ดังนั้นควรใส่ขอบเขตการยืนยันตัวตนเสมอ: read:user
  • ขอบเขตเพิ่มเติมที่พบบ่อย เช่น:
    • repo: ควบคุม repository ส่วนตัวทั้งหมด
    • public_repo: เข้าถึง repository สาธารณะ
    • user:email: เข้าถึงอีเมลของผู้ใช้
    • notifications: เข้าถึงการแจ้งเตือน
  • ตรวจสอบให้แน่ใจว่าขอบเขตทั้งหมดสะกดถูกต้องและใช้งานได้ ขอบเขตที่ผิดหรือไม่รองรับจะทำให้เกิดข้อผิดพลาด "Invalid scope" จาก GitHub

ตัวเลือกที่ 3: ขอขอบเขตเพิ่มเติมภายหลัง

  • หลังจากผู้ใช้ลงชื่อเข้าใช้แล้ว คุณสามารถร้องขอขอบเขตเพิ่มเติมตามต้องการโดยเริ่ม federated social authorization flow ใหม่และอัปเดต token set ของผู้ใช้
  • ขอบเขตเพิ่มเติมเหล่านี้ไม่จำเป็นต้องกรอกในช่อง Scopes ของตัวเชื่อมต่อ GitHub ใน Logto และสามารถทำได้ผ่าน Social Verification API ของ Logto

เมื่อทำตามขั้นตอนเหล่านี้ ตัวเชื่อมต่อ GitHub ของคุณใน Logto จะร้องขอสิทธิ์ที่แอปของคุณต้องการอย่างพอดี — ไม่มากหรือน้อยเกินไป

เคล็ดลับ:

หากแอปของคุณร้องขอขอบเขตเหล่านี้เพื่อเข้าถึง GitHub API และดำเนินการต่าง ๆ อย่าลืมเปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ GitHub ของ Logto ดูรายละเอียดในหัวข้อถัดไป

ขั้นตอนที่ 4: การตั้งค่าทั่วไป

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

ซิงค์ข้อมูลโปรไฟล์

ในตัวเชื่อมต่อ GitHub คุณสามารถตั้งค่านโยบายการซิงค์ข้อมูลโปรไฟล์ เช่น ชื่อผู้ใช้และรูปโปรไฟล์ ได้ดังนี้:

  • ซิงค์เฉพาะตอนสมัครสมาชิก: ดึงข้อมูลโปรไฟล์ครั้งเดียวเมื่อผู้ใช้ลงชื่อเข้าใช้ครั้งแรก
  • ซิงค์ทุกครั้งที่ลงชื่อเข้าใช้: อัปเดตข้อมูลโปรไฟล์ทุกครั้งที่ผู้ใช้ลงชื่อเข้าใช้

เก็บโทเค็นเพื่อเข้าถึง GitHub APIs (ไม่บังคับ)

หากคุณต้องการเข้าถึง GitHub APIs และดำเนินการต่าง ๆ ด้วยการอนุญาตของผู้ใช้ (ไม่ว่าจะผ่าน social sign-in หรือ account linking) Logto จำเป็นต้องขอขอบเขต API ที่เกี่ยวข้องและเก็บโทเค็นไว้

  1. เพิ่มขอบเขตที่ต้องการตามคำแนะนำข้างต้น
  2. เปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ GitHub ของ Logto Logto จะเก็บ GitHub access token ไว้อย่างปลอดภัยใน Secret Vault
บันทึก:

เมื่อใช้ OAuth App ของ GitHub ตามที่อธิบายไว้ในคู่มือนี้ คุณจะไม่ได้รับ refresh token จาก GitHub เพราะ access token จะไม่มีวันหมดอายุ เว้นแต่ผู้ใช้จะเพิกถอนด้วยตนเอง ดังนั้นคุณไม่จำเป็นต้องเพิ่ม offline_access ในช่อง Scopes — การเพิ่มอาจทำให้เกิดข้อผิดพลาด

หากคุณต้องการให้ access token หมดอายุหรือใช้ refresh token ให้พิจารณาเชื่อมต่อกับ GitHub App แทน ศึกษา ความแตกต่างระหว่าง GitHub Apps และ OAuth Apps

ขั้นตอนที่ 5: ทดสอบการเชื่อมต่อของคุณ (ไม่บังคับ)

ก่อนเปิดใช้งานจริง ให้ทดสอบการเชื่อมต่อ GitHub ของคุณ:

  1. ใช้ตัวเชื่อมต่อใน Logto development tenant
  2. ตรวจสอบว่าผู้ใช้สามารถลงชื่อเข้าใช้ด้วย GitHub ได้
  3. ตรวจสอบว่าขอบเขตที่ร้องขอถูกต้อง
  4. ทดสอบเรียก API หากคุณเก็บโทเค็นไว้

GitHub OAuth Apps สามารถใช้งานได้กับบัญชีผู้ใช้ GitHub ทันที — ไม่จำเป็นต้องมีผู้ใช้ทดสอบหรือขออนุมัติแอปเหมือนบางแพลตฟอร์มอื่น

บันทึกการตั้งค่าของคุณ

โปรดตรวจสอบให้แน่ใจว่าคุณได้กรอกค่าที่จำเป็นในพื้นที่การตั้งค่าตัวเชื่อมต่อ Logto เรียบร้อยแล้ว คลิก "บันทึกและเสร็จสิ้น" (หรือ "บันทึกการเปลี่ยนแปลง") และตัวเชื่อมต่อ GitHub ควรพร้อมใช้งานแล้ว

เปิดใช้งานตัวเชื่อมต่อ GitHub ในประสบการณ์การลงชื่อเข้าใช้

เมื่อคุณสร้างตัวเชื่อมต่อโซเชียลสำเร็จแล้ว คุณสามารถเปิดใช้งานเป็นปุ่ม "ดำเนินการต่อด้วย GitHub" ในประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience) ได้

  1. ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > สมัครและลงชื่อเข้าใช้
  2. (ไม่บังคับ) เลือก "ไม่เกี่ยวข้อง" สำหรับตัวระบุการสมัคร หากคุณต้องการเฉพาะการเข้าสู่ระบบโซเชียล
  3. เพิ่มตัวเชื่อมต่อ GitHub ที่ตั้งค่าไว้แล้วในส่วน "เข้าสู่ระบบโซเชียล" (Social sign-in)
แท็บประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience tab)

การทดสอบและการตรวจสอบความถูกต้อง

กลับไปที่แอป Flutter ของคุณ ตอนนี้คุณควรจะสามารถลงชื่อเข้าใช้ด้วย GitHub ได้แล้ว ขอให้สนุก!

อ่านเพิ่มเติม

กระบวนการสำหรับผู้ใช้ปลายทาง: Logto มีโฟลว์การยืนยันตัวตนสำเร็จรูปพร้อมใช้งาน รวมถึง MFA และ Enterprise SSO พร้อม API อันทรงพลังสำหรับการปรับแต่งการตั้งค่าบัญชี การตรวจสอบความปลอดภัย และประสบการณ์แบบหลายผู้เช่า (multi-tenant) ได้อย่างยืดหยุ่น

การอนุญาต (Authorization): การอนุญาต (Authorization) กำหนดว่าผู้ใช้สามารถทำอะไรหรือเข้าถึงทรัพยากรใดได้บ้างหลังจากได้รับการยืนยันตัวตนแล้ว สำรวจวิธีปกป้อง API ของคุณสำหรับแอปเนทีฟและแอปหน้าเดียว (SPA) และการใช้งานการควบคุมการเข้าถึงตามบทบาท (RBAC)

องค์กร (Organizations): ฟีเจอร์องค์กรมีประสิทธิภาพอย่างยิ่งใน SaaS แบบหลายผู้เช่าและแอป B2B โดยช่วยให้สร้างผู้เช่า จัดการสมาชิก RBAC ระดับองค์กร และ Just-in-Time Provisioning ได้

ชุดบทความ Customer IAM: บทความต่อเนื่องเกี่ยวกับการจัดการข้อมูลระบุตัวตนและการเข้าถึงของลูกค้า (Customer IAM) ตั้งแต่ระดับพื้นฐาน 101 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ