สำหรับเพื่อนใหม่ของเรา:

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

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

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

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

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

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

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

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

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

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

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

เคล็ดลับ:

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

การติดตั้ง

pub.dev

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

flutter pub add logto_dart_sdk

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

dependencies:
  logto_dart_sdk: ^3.0.0

จากนั้นรัน:

flutter pub get

GitHub

หากคุณต้องการ fork SDK เวอร์ชันของคุณเอง คุณสามารถโคลน repository ได้โดยตรงจาก GitHub

git clone https://github.com/logto-io/dart

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

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

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

การตั้งค่า 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);

  @override
  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;

  @override
  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();
  }

  @override
  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)

• สำหรับ 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';

  @override
  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 เป็นแนวคิดของ OAuth 2.0 ซึ่งหมายถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังจากออกจากระบบ

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

lib/main.dart

class _MyHomePageState extends State<MyHomePage> {
  // ...

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

  @override
  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;
    });
  }

  @override
  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 (GitHub App)

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

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

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

บันทึก:

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

ตั้งค่า GitHub (GitHub App)

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

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

1. ไปที่ GitHub และลงชื่อเข้าใช้ด้วยบัญชีของคุณ หรือสร้างบัญชีใหม่หากจำเป็น
2. ไปที่ Settings > Developer settings > GitHub Apps
3. คลิก New GitHub App เพื่อจดทะเบียนแอปใหม่:
   • GitHub App name: กรอกชื่อแอปของคุณที่ไม่ซ้ำกัน ชื่อไม่เกิน 34 ตัวอักษรและต้องไม่ซ้ำกับแอปอื่นใน GitHub
   • Homepage URL: กรอก URL หน้าแรกของแอปพลิเคชันของคุณ
   • Callback URL: คัดลอก Callback URI จากตัวเชื่อมต่อ GitHub ของคุณใน Logto แล้ววางที่นี่ คุณสามารถเพิ่ม Callback URL ได้หลายรายการหากต้องการ หลังจากผู้ใช้ลงชื่อเข้าใช้ด้วย GitHub แล้ว จะถูกเปลี่ยนเส้นทางมาที่นี่พร้อมรหัสการอนุญาตที่ Logto ใช้เพื่อดำเนินการยืนยันตัวตนให้เสร็จสมบูรณ์
   • Expire user authorization tokens: ให้ติ๊ก ถูก (แนะนำ) เพื่อเปิดใช้งานการหมดอายุของโทเค็นและโทเค็นรีเฟรชเพื่อความปลอดภัยที่มากขึ้น
   • Request user authorization (OAuth) during installation: เลือกตัวเลือกนี้หากต้องการให้ผู้ใช้อนุญาตแอประหว่างการติดตั้ง
   • Webhook: ยกเลิกการเลือก Active หากคุณไม่ต้องการรับเหตุการณ์ webhook สำหรับกรณีใช้งานเฉพาะการยืนยันตัวตน มักไม่จำเป็นต้องใช้ webhook
4. ในส่วน Permissions กำหนดสิทธิ์ที่แอปของคุณต้องการ (ดูรายละเอียดในขั้นตอนที่ 2 ด้านล่าง)
5. ในส่วน Where can this GitHub App be installed? เลือก Any account หากคุณต้องการให้ผู้ใช้จากบัญชี GitHub ใดก็ได้ใช้แอปของคุณเพื่อการยืนยันตัวตน
6. คลิก Create GitHub App เพื่อสร้าง GitHub App

บันทึก:

แตกต่างจาก OAuth Apps, GitHub Apps ใช้สิทธิ์แบบละเอียด (fine-grained permissions) แทนขอบเขต (scopes) แบบกว้าง คุณกำหนดสิทธิ์ในแดชบอร์ด GitHub ระหว่างการสร้างแอป และผู้ใช้จะอนุญาตการเข้าถึง repository เฉพาะระหว่างการอนุญาต

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่า GitHub Apps ได้ที่ Registering a GitHub App

ขั้นตอนที่ 2: กำหนดสิทธิ์ใน GitHub

GitHub Apps ใช้สิทธิ์แบบละเอียด (fine-grained permissions) แทน OAuth scopes คุณต้องกำหนดสิทธิ์ ในแดชบอร์ด GitHub ขณะสร้างหรือแก้ไข GitHub App ของคุณ สิทธิ์เหล่านี้จะกำหนดว่าแอปของคุณสามารถเข้าถึงข้อมูลใดได้บ้าง

ทำความเข้าใจสิทธิ์ของ GitHub App

สิทธิ์แบ่งออกเป็น 3 ประเภท:

• Repository permissions: เข้าถึงทรัพยากรระดับ repository (โค้ด, issues, pull requests ฯลฯ)
• Organization permissions: เข้าถึงทรัพยากรระดับองค์กร (สมาชิก, ทีม, โปรเจกต์ ฯลฯ)
• Account permissions: เข้าถึงข้อมูลบัญชีผู้ใช้ (อีเมล, โปรไฟล์, ผู้ติดตาม ฯลฯ)

สำหรับแต่ละสิทธิ์ คุณสามารถเลือกได้ว่า:

• No access: แอปไม่สามารถเข้าถึงทรัพยากรนี้
• Read-only: แอปอ่านได้แต่ไม่สามารถแก้ไขทรัพยากรนี้
• Read & write: แอปอ่านและแก้ไขทรัพยากรนี้ได้

สิทธิ์ที่แนะนำสำหรับการยืนยันตัวตน

สำหรับฟังก์ชัน "Sign in with GitHub" พื้นฐาน ให้กำหนด Account permissions ขั้นต่ำดังนี้:

Permission	Access level	Purpose
Email addresses	Read-only	รับอีเมลของผู้ใช้เพื่อสร้างบัญชีผู้ใช้

เคล็ดลับ:

GitHub Apps สามารถอ่านข้อมูลโปรไฟล์สาธารณะของผู้ใช้ได้โดยอัตโนมัติเมื่อดำเนินการในนามของผู้ใช้ คุณไม่จำเป็นต้องขอสิทธิ์สำหรับข้อมูลโปรไฟล์พื้นฐาน เช่น ชื่อผู้ใช้, รูปโปรไฟล์, และ URL โปรไฟล์สาธารณะ

สิทธิ์เพิ่มเติมสำหรับการเข้าถึง API

หากแอปของคุณต้องการเข้าถึง GitHub API มากกว่าการยืนยันตัวตน ให้เพิ่มสิทธิ์ที่เกี่ยวข้องในแดชบอร์ด GitHub ตัวอย่างที่พบบ่อย:

Permission type	Permission	Access level	Use case
Repository	Contents	Read-only / Read & write	เข้าถึงไฟล์และโค้ดใน repository
Repository	Issues	Read & write	สร้างและจัดการ issues
Repository	Pull requests	Read & write	สร้างและจัดการ pull requests
Repository	Metadata	Read-only	เข้าถึง metadata ของ repository (จำเป็นสำหรับหลายกรณี)
Organization	Members	Read-only	แสดงรายชื่อสมาชิกองค์กร
Account	Followers	Read-only	เข้าถึงผู้ติดตามและการติดตามของผู้ใช้

นี่ไม่ใช่รายการทั้งหมด — GitHub Apps รองรับสิทธิ์แบบละเอียดอีกมากมาย ดู Permissions required for GitHub Apps สำหรับรายการทั้งหมด

ความแตกต่างสำคัญจาก OAuth Apps:

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

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

ขั้นตอนที่ 3: กำหนดค่าตัวเชื่อมต่อ Logto ของคุณ

หลังจากสร้าง GitHub App แล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าตั้งค่าซึ่งคุณสามารถรับข้อมูลประจำตัวได้

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

คำเตือน:

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

บันทึก:

Client ID สำหรับ GitHub App แตกต่างจาก App ID โปรดใช้ Client ID (แสดงเป็น "Client ID" ในหน้าตั้งค่า) ไม่ใช่ App ID

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

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

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

ในตัวเชื่อมต่อ GitHub คุณสามารถกำหนดวิธีซิงค์ข้อมูลโปรไฟล์จากข้อมูลผู้ใช้ GitHub ไปยังโปรไฟล์ผู้ใช้ใน Logto เช่น name, avatar, และ email โดยเลือกได้ดังนี้:

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

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

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

1. กำหนดสิทธิ์ที่ต้องการในหน้าตั้งค่า GitHub App ของคุณ (ขั้นตอนที่ 2)
2. เปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ GitHub ของ Logto Logto จะเก็บทั้งโทเค็นการเข้าถึง (access token) และโทเค็นรีเฟรช (refresh token) ไว้อย่างปลอดภัยใน Secret Vault

บันทึก:

เนื่องจาก GitHub Apps ออกโทเค็นรีเฟรชเสมอ Logto จะเก็บทั้งสองโทเค็นโดยอัตโนมัติ โทเค็นการเข้าถึงจะหมดอายุหลัง 8 ชั่วโมง แต่ Logto สามารถใช้โทเค็นรีเฟรชเพื่อขอโทเค็นใหม่ได้ ทำให้เข้าถึง API ได้ต่อเนื่องสูงสุด 6 เดือน

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

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

1. ใช้ตัวเชื่อมต่อใน Logto tenant สำหรับการพัฒนา
2. ตรวจสอบว่าผู้ใช้สามารถลงชื่อเข้าใช้ด้วย GitHub ได้
3. ตรวจสอบว่าผู้ใช้ได้รับแจ้งขอสิทธิ์ที่ถูกต้องระหว่างการอนุญาต
4. หากคุณเปิดใช้งานการเก็บโทเค็น ให้ตรวจสอบว่า access token (และ refresh token) ถูกเก็บไว้อย่างถูกต้อง
5. ทดสอบเรียก API โดยใช้โทเค็นที่เก็บไว้เพื่อให้แน่ใจว่าสิทธิ์ทำงานถูกต้อง

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

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

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

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

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

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

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

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

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

กระบวนการสำหรับผู้ใช้ปลายทาง: 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 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ