หน้านี้ได้รับการแปลโดย Cloud Translation API

เพิ่มขั้นตอนการตรวจสอบสิทธิ์ผู้ใช้ลงในแอป Flutter โดยใช้ FirebaseUI

1. ก่อนเริ่มต้น

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีเพิ่มการตรวจสอบสิทธิ์ Firebase ลงในแอป Flutter โดยใช้แพ็กเกจ FlutterFire UI แพ็กเกจนี้จะช่วยให้คุณเพิ่มทั้งการตรวจสอบสิทธิ์ด้วยอีเมล/รหัสผ่านและการตรวจสอบสิทธิ์ด้วย Google Sign In ลงในแอป Flutter ได้ นอกจากนี้ คุณยังจะได้เรียนรู้วิธีตั้งค่าโปรเจ็กต์ Firebase และใช้ FlutterFire CLI เพื่อเริ่มต้นใช้งาน Firebase ในแอป Flutter ด้วย

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

โค้ดแล็บนี้ถือว่าคุณมีประสบการณ์การใช้งาน Flutter บ้างแล้ว หากไม่ คุณอาจต้องเรียนรู้พื้นฐานก่อน ลิงก์ต่อไปนี้มีประโยชน์

ทัวร์ชมเฟรมเวิร์กวิดเจ็ต Flutter
ลองใช้ Codelab เขียนแอป Flutter แรกของคุณ ส่วนที่ 1

คุณควรมีประสบการณ์การใช้งาน Firebase บ้าง แต่ก็ไม่มีปัญหาหากคุณไม่เคยเพิ่ม Firebase ลงในโปรเจ็กต์ Flutter หากคุณไม่คุ้นเคยกับคอนโซล Firebase หรือเพิ่งเริ่มใช้ Firebase เป็นครั้งแรก โปรดดูลิงก์ต่อไปนี้ก่อน

สิ่งที่คุณจะสร้าง

Codelab นี้จะแนะนำการสร้างขั้นตอนการตรวจสอบสิทธิ์สําหรับแอป Flutter โดยใช้ Firebase สําหรับการตรวจสอบสิทธิ์ แอปพลิเคชันจะมีหน้าจอเข้าสู่ระบบ หน้าจอ "ลงทะเบียน" หน้าจอการกู้คืนรหัสผ่าน และหน้าจอโปรไฟล์ผู้ใช้

สิ่งที่คุณจะได้เรียนรู้

Codelab นี้ครอบคลุมหัวข้อต่อไปนี้

การเพิ่ม Firebase ไปยังแอป Flutter
การตั้งค่าคอนโซล Firebase
การใช้ Firebase CLI เพื่อเพิ่ม Firebase ลงในแอปพลิเคชัน
การใช้ FlutterFire CLI เพื่อสร้างการกำหนดค่า Firebase ใน Dart
การเพิ่มการตรวจสอบสิทธิ์ Firebase ลงในแอป Flutter
การตั้งค่าการตรวจสอบสิทธิ์ Firebase ในคอนโซล
การเพิ่มการลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่านด้วยแพ็กเกจ firebase_ui_auth
การเพิ่มการลงทะเบียนผู้ใช้ด้วยแพ็กเกจ firebase_ui_auth
การเพิ่มหน้า "ลืมรหัสผ่านใช่ไหม"
การเพิ่มฟีเจอร์ลงชื่อเข้าใช้ด้วย Google ด้วย firebase_ui_auth
การกำหนดค่าแอปให้ทำงานร่วมกับผู้ให้บริการการลงชื่อเข้าใช้หลายราย
การเพิ่มหน้าจอโปรไฟล์ผู้ใช้ลงในแอปพลิเคชันด้วยแพ็กเกจ firebase_ui_auth

โค้ดแล็บนี้เกี่ยวข้องกับการเพิ่มระบบการตรวจสอบสิทธิ์ที่มีประสิทธิภาพโดยใช้แพ็กเกจ firebase_ui_auth โดยเฉพาะ ดังที่คุณจะเห็น แอปทั้งหมดนี้พร้อมฟีเจอร์ข้างต้นทั้งหมดสามารถติดตั้งใช้งานได้ด้วยโค้ดประมาณ 100 บรรทัด

สิ่งที่ต้องมี

ความรู้เกี่ยวกับ Flutter และ SDK ที่ติดตั้ง
เครื่องมือแก้ไขข้อความ (Flutter รองรับ JetBrains IDE, Android Studio และ VS Code)
เบราว์เซอร์ Google Chrome หรือเป้าหมายการพัฒนาอื่นๆ ที่ต้องการสำหรับ Flutter (คำสั่งในเทอร์มินัลบางรายการในโค้ดแล็บนี้จะถือว่าคุณเรียกใช้แอปใน Chrome)

2. สร้างและตั้งค่าโปรเจ็กต์ Firebase

งานแรกที่คุณต้องทำคือสร้างโปรเจ็กต์ Firebase ในเว็บคอนโซลของ Firebase

สร้างโปรเจ็กต์ Firebase

ลงชื่อเข้าใช้ Firebase
ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ (หรือสร้างโปรเจ็กต์) แล้วป้อนชื่อโปรเจ็กต์ Firebase (เช่น "FlutterFire-UI-Codelab")

คลิกตัวเลือกการสร้างโปรเจ็กต์ ยอมรับข้อกำหนดของ Firebase หากได้รับข้อความแจ้ง ข้ามการตั้งค่า Google Analytics เนื่องจากคุณจะไม่ได้ใช้ Analytics สําหรับแอปนี้

ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรเจ็กต์ Firebase ได้ที่ทําความเข้าใจโปรเจ็กต์ Firebase

แอปที่คุณกําลังสร้างใช้ Firebase Authentication เพื่ออนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอป นอกจากนี้ยังอนุญาตให้ผู้ใช้ใหม่ลงทะเบียนจากแอปพลิเคชัน Flutter ได้ด้วย

คุณต้องเปิดใช้ Firebase Authentication โดยใช้คอนโซล Firebase และต้องมีการกําหนดค่าพิเศษเมื่อเปิดใช้

หากต้องการให้ผู้ใช้ลงชื่อเข้าใช้เว็บแอป คุณจะต้องลงชื่อเข้าใช้ด้วยวิธีการอีเมล/รหัสผ่านก่อน หลังจากนั้นคุณจะเพิ่มวิธีการ Google Sign-In

ในคอนโซล Firebase ให้ขยายเมนูสร้างในแผงด้านซ้าย
คลิกการตรวจสอบสิทธิ์ แล้วคลิกปุ่มเริ่มต้นใช้งาน จากนั้นคลิกแท็บวิธีการลงชื่อเข้าใช้ (หรือคลิกที่นี่เพื่อไปที่แท็บวิธีการลงชื่อเข้าใช้โดยตรง)
คลิกอีเมล/รหัสผ่านในรายการผู้ให้บริการลงชื่อเข้าใช้ ตั้งสวิตช์เปิดใช้เป็นเปิด แล้วคลิกบันทึก

3. ตั้งค่าแอป Flutter

คุณจะต้องดาวน์โหลดโค้ดเริ่มต้นและติดตั้ง Firebase CLI ก่อนที่เราจะเริ่ม

รับรหัสเริ่มต้น

โคลนที่เก็บ GitHub จากบรรทัดคำสั่ง

git clone https://github.com/flutter/codelabs.git flutter-codelabs

หรือหากคุณติดตั้งเครื่องมือ CLI ของ GitHub ไว้แล้ว ให้ทำดังนี้

gh repo clone flutter/codelabs flutter-codelabs

คุณควรโคลนโค้ดตัวอย่างลงในไดเรกทอรี flutter-codelabs ในเครื่อง ซึ่งจะมีโค้ดของคอลเล็กชันโค้ดแล็บ โค้ดสําหรับโค้ดแล็บนี้อยู่ในไดเรกทอรีย่อย flutter-codelabs/firebase-auth-flutterfire-ui

ไดเรกทอรี flutter-codelabs/firebase-auth-flutterfire-ui มีโปรเจ็กต์ Flutter 2 โปรเจ็กต์ รายการหนึ่งชื่อว่า complete และอีกรายการหนึ่งชื่อว่า start ไดเรกทอรี start มีโปรเจ็กต์ที่ไม่สมบูรณ์ และเป็นไดเรกทอรีที่คุณจะใช้มากที่สุด

cd flutter-codelabs/firebase-auth-flutterfire-ui/start

หากต้องการข้ามไปข้างหน้าหรือดูว่าสิ่งต่างๆ ควรมีลักษณะอย่างไรเมื่อเสร็จสมบูรณ์ ให้ดูในไดเรกทอรีชื่อ "เสร็จสมบูรณ์" เพื่อตรวจสอบ

หากต้องการทําตาม Codelab และเพิ่มโค้ดด้วยตนเอง คุณควรเริ่มต้นด้วยแอป Flutter ที่ flutter-codelabs/firebase-auth-flutterfire-ui/start และเพิ่มโค้ดลงในโปรเจ็กต์นั้นตลอดทั้ง Codelab เปิดหรือนําเข้าไดเรกทอรีนั้นไปยัง IDE ที่ต้องการ

ติดตั้ง Firebase CLI

Firebase CLI มีเครื่องมือสำหรับจัดการโปรเจ็กต์ Firebase คุณต้องใช้ CLI สำหรับ FlutterFire CLI ซึ่งจะติดตั้งในอีกสักครู่

การติดตั้ง CLI ทำได้หลายวิธี วิธีที่ง่ายที่สุดหากคุณใช้ MacOS หรือ Linux คือให้เรียกใช้คําสั่งนี้จากเทอร์มินัล

curl -sL https://firebase.tools | bash

หลังจากติดตั้ง CLI แล้ว คุณต้องตรวจสอบสิทธิ์กับ Firebase

เข้าสู่ระบบ Firebase โดยใช้บัญชี Google โดยเรียกใช้คําสั่งต่อไปนี้

firebase login

คำสั่งนี้จะเชื่อมต่อเครื่องของคุณกับ Firebase และให้สิทธิ์เข้าถึงโปรเจ็กต์ Firebase

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

firebase projects:list

รายการที่แสดงควรเหมือนกับโปรเจ็กต์ Firebase ที่แสดงในคอนโซล Firebase คุณควรเห็นอย่างน้อย flutterfire-ui-codelab.

ติดตั้ง FlutterFire CLI

FlutterFire CLI เป็นเครื่องมือที่ช่วยลดความซับซ้อนในกระบวนการติดตั้ง Firebase ในทุกแพลตฟอร์มที่รองรับในแอป Flutter โดยสร้างขึ้นจาก Firebase CLI

ก่อนอื่น ให้ติดตั้ง CLI โดยทำดังนี้

dart pub global activate flutterfire_cli

ตรวจสอบว่าได้ติดตั้ง CLI แล้ว เรียกใช้คําสั่งต่อไปนี้และตรวจสอบว่า CLI แสดงเมนูความช่วยเหลือ

flutterfire -—help

เพิ่มโปรเจ็กต์ Firebase ลงในแอป Flutter

กำหนดค่า FlutterFire

คุณสามารถใช้ FlutterFire เพื่อสร้างโค้ด Dart ที่จําเป็นสําหรับใช้ Firebase ในแอป Flutter

flutterfire configure

เมื่อเรียกใช้คําสั่งนี้ ระบบจะแจ้งให้คุณเลือกโปรเจ็กต์ Firebase ที่ต้องการใช้และแพลตฟอร์มที่ต้องการตั้งค่า

ภาพหน้าจอต่อไปนี้แสดงพรอมต์ที่คุณต้องตอบ

เลือกโปรเจ็กต์ที่ต้องการใช้ ในกรณีนี้ ให้ใช้ flutterfire-ui-codelab
เลือกแพลตฟอร์มที่ต้องการใช้ ในโค้ดแล็บนี้ มีขั้นตอนในการกําหนดค่าการตรวจสอบสิทธิ์ Firebase สําหรับ Flutter สําหรับเว็บ, iOS และ Android แต่คุณตั้งค่าโปรเจ็กต์ Firebase ให้ใช้ตัวเลือกทั้งหมดได้
ภาพหน้าจอนี้แสดงเอาต์พุตเมื่อสิ้นสุดกระบวนการ หากคุ้นเคยกับ Firebase คุณจะเห็นว่าคุณไม่จําเป็นต้องสร้างแอปพลิเคชันแพลตฟอร์ม (เช่น แอปพลิเคชัน Android) ในคอนโซล และ FlutterFire CLI จะทำสิ่งเหล่านั้นให้คุณ

เมื่อดำเนินการเสร็จแล้ว ให้ดูแอป Flutter ในเครื่องมือแก้ไขข้อความ FlutterFire CLI ได้สร้างไฟล์ใหม่ชื่อ firebase_options.dart ไฟล์นี้มีคลาสชื่อ FirebaseOptions ซึ่งมีตัวแปรแบบคงที่ที่จัดเก็บการกําหนดค่า Firebase ที่จําเป็นสําหรับแต่ละแพลตฟอร์ม หากเลือกทุกแพลตฟอร์มเมื่อเรียกใช้ flutterfire configure คุณจะเห็นค่าคงที่ชื่อ web, android, ios และ macos

firebase_options.dart

import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
import 'package:flutter/foundation.dart'
   show defaultTargetPlatform, kIsWeb, TargetPlatform;

/// Default [FirebaseOptions] for use with your Firebase apps.
///
/// Example:
/// ```dart
/// import 'firebase_options.dart';
/// // ...
/// await Firebase.initializeApp(
///   options: DefaultFirebaseOptions.currentPlatform,
/// );
/// ```
class DefaultFirebaseOptions {
 static FirebaseOptions get currentPlatform {
   if (kIsWeb) {
     return web;
   }
   // ignore: missing_enum_constant_in_switch
   switch (defaultTargetPlatform) {
     case TargetPlatform.android:
       return android;
     case TargetPlatform.iOS:
       return ios;
     case TargetPlatform.macOS:
       return macos;
   }

   throw UnsupportedError(
     'DefaultFirebaseOptions are not supported for this platform.',
   );
 }

 static const FirebaseOptions web = FirebaseOptions(
   apiKey: 'AIzaSyCqFjCV_9CZmYeIvcK9FVy4drmKUlSaIWY',
   appId: '1:963656261848:web:7219f7fca5fc70afb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   authDomain: 'flutterfire-ui-codelab.firebaseapp.com',
   storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
   measurementId: 'G-DGF0CP099H',
 );

 static const FirebaseOptions android = FirebaseOptions(
   apiKey: 'AIzaSyDconZaCQpkxIJ5KQBF-3tEU0rxYsLkIe8',
   appId: '1:963656261848:android:c939ccc86ab2dcdbb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
 );

 static const FirebaseOptions ios = FirebaseOptions(
   apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
   appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
   iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
   iosBundleId: 'com.example.complete',
 );

 static const FirebaseOptions macos = FirebaseOptions(
   apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
   appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
   iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
   iosBundleId: 'com.example.complete',
 );
}

Firebase ใช้คำว่าแอปพลิเคชันเพื่ออ้างอิงถึงบิลด์ที่เฉพาะเจาะจงสำหรับแพลตฟอร์มที่เฉพาะเจาะจงในโปรเจ็กต์ Firebase ตัวอย่างเช่น โปรเจ็กต์ Firebase ชื่อ FlutterFire-ui-codelab มีแอปพลิเคชันหลายรายการ ได้แก่ 1 รายการสําหรับ Android, 1 รายการสําหรับ iOS, 1 รายการสําหรับ MacOS และ 1 รายการสําหรับเว็บ

เมธอด DefaultFirebaseOptions.currentPlatform ใช้ TargetPlatform enum ที่ Flutter แสดงเพื่อตรวจหาแพลตฟอร์มที่แอปของคุณทํางานอยู่ จากนั้นแสดงผลค่าการกําหนดค่า Firebase ที่จําเป็นสําหรับแอปพลิเคชัน Firebase ที่ถูกต้อง

เพิ่มแพ็กเกจ Firebase ลงในแอป Flutter

ขั้นตอนสุดท้ายในการตั้งค่าคือการเพิ่มแพ็กเกจ Firebase ที่เกี่ยวข้องลงในโปรเจ็กต์ Flutter ไฟล์ firebase_options.dart ควรมีข้อผิดพลาด เนื่องจากใช้แพ็กเกจ Firebase ที่ยังไม่ได้เพิ่ม ในเทอร์มินัล ให้ตรวจสอบว่าคุณอยู่ที่รูทของโปรเจ็กต์ Flutter ที่ flutter-codelabs/firebase-emulator-suite/start จากนั้นเรียกใช้คําสั่ง 3 รายการต่อไปนี้

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

แพ็กเกจเหล่านี้เป็นแพ็กเกจเดียวที่คุณต้องใช้ในตอนนี้

เริ่มต้น Firebase

หากต้องการใช้แพ็กเกจที่เพิ่มและ DefaultFirebaseOptions.currentPlatform, ให้อัปเดตโค้ดในฟังก์ชัน main ในไฟล์ main.dart

main.dart

void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );


 runApp(const MyApp());
}

รหัสนี้มี 2 หน้าที่

WidgetsFlutterBinding.ensureInitialized() บอก Flutter ว่าอย่าเพิ่งเริ่มเรียกใช้โค้ดวิดเจ็ตแอปพลิเคชันจนกว่าเฟรมเวิร์ก Flutter จะบูตเสร็จสมบูรณ์ Firebase ใช้ช่องทางแพลตฟอร์มแบบเนทีฟ ซึ่งกำหนดให้เฟรมเวิร์กต้องทำงานอยู่
Firebase.initializeApp จะสร้างการเชื่อมต่อระหว่างแอป Flutter กับโปรเจ็กต์ Firebase ระบบจะนําเข้า DefaultFirebaseOptions.currentPlatform จากไฟล์ firebase_options.dart ที่เราสร้างขึ้น ค่าคงที่นี้จะตรวจหาแพลตฟอร์มที่คุณใช้อยู่ และส่งคีย์ Firebase ที่เกี่ยวข้อง

4. เพิ่มหน้า Firebase UI Auth เริ่มต้น

UI ของ Firebase สำหรับการตรวจสอบสิทธิ์มีวิดเจ็ตที่แสดงทั้งหน้าจอในแอปพลิเคชัน หน้าจอเหล่านี้จัดการขั้นตอนการตรวจสอบสิทธิ์ต่างๆ ทั่วทั้งแอปพลิเคชัน เช่น การลงชื่อเข้าใช้ การลงทะเบียน ลืมรหัสผ่าน โปรไฟล์ผู้ใช้ และอื่นๆ หากต้องการเริ่มต้นใช้งาน ให้เพิ่มหน้า Landing Page ลงในแอปที่ทำหน้าที่เป็นผู้ดูแลการตรวจสอบสิทธิ์ให้กับแอปพลิเคชันหลัก

แอป Material หรือ Cupertino

UI ของ FlutterFire กําหนดให้แอปพลิเคชันของคุณต้องรวมอยู่ใน MaterialApp หรือ CupertinoApp UI จะแสดงความแตกต่างของวิดเจ็ต Material หรือ Cupertino โดยอัตโนมัติตามตัวเลือกของคุณ สําหรับโค้ดแล็บนี้ ให้ใช้ MaterialApp ซึ่งเพิ่มลงในแอปใน app.dart แล้ว

app.dart

import 'package:flutter/material.dart';
import 'auth_gate.dart';

class MyApp extends StatelessWidget {
 const MyApp({super.key});
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const AuthGate(),
   );
 }
}

ตรวจสอบสถานะการตรวจสอบสิทธิ์

คุณต้องตรวจสอบว่าผู้ใช้ได้รับการตรวจสอบสิทธิ์อยู่ในขณะนี้หรือไม่ก่อนจึงจะแสดงหน้าจอลงชื่อเข้าใช้ได้ วิธีตรวจสอบที่พบบ่อยที่สุดคือการตรวจสอบ authStateChanges ของ FirebaseAuth โดยใช้ปลั๊กอิน Firebase Auth

ในตัวอย่างโค้ดด้านบน MaterialApp กำลังสร้างวิดเจ็ต AuthGate ในเมธอด build (นี่คือวิดเจ็ตที่กําหนดเอง ซึ่ง FlutterFire UI ไม่ได้ให้ไว้)

วิดเจ็ตดังกล่าวต้องได้รับการอัปเดตให้รวมสตรีม authStateChanges

authStateChanges API จะแสดงผล Stream ที่มีผู้ใช้ปัจจุบัน (หากลงชื่อเข้าใช้อยู่) หรือค่าว่างหากไม่ได้ลงชื่อเข้าใช้ หากต้องการสมัครรับข้อมูลสถานะนี้ในแอปพลิเคชันของเรา คุณสามารถใช้วิดเจ็ต StreamBuilder ของ Flutter และส่งสตรีมไปยังวิดเจ็ตดังกล่าว

StreamBuilder คือวิดเจ็ตที่สร้างตัวเองโดยอิงตามข้อมูลสแนปชอตล่าสุดจากสตรีมที่คุณส่งให้ ระบบจะสร้างใหม่โดยอัตโนมัติเมื่อสตรีมส่งสแนปชอตใหม่

อัปเดตรหัสใน auth_gate.dart

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return SignInScreen(
            providers: [],
          );
        }

        return const HomeScreen();
      },
    );
  }
}

StreamBuilder.stream กำลังส่งผ่าน FirebaseAuth.instance.authStateChanged ซึ่งเป็นสตรีมข้างต้น ซึ่งจะแสดงผลออบเจ็กต์ User ของ Firebase หากผู้ใช้ตรวจสอบสิทธิ์แล้ว (ไม่เช่นนั้น ระบบจะแสดงผล null)
ถัดไป โค้ดใช้ snapshot.hasData เพื่อตรวจสอบว่าค่าจากสตรีมมีออบเจ็กต์ User หรือไม่
หากไม่มี ฟีเจอร์นี้จะแสดงวิดเจ็ต SignInScreen ขณะนี้หน้าจอดังกล่าวจะไม่ทำอะไรเลย ซึ่งจะอัปเดตในขั้นตอนถัดไป
มิเช่นนั้น ระบบจะแสดงผล HomeScreen ซึ่งเป็นส่วนหลักของแอปพลิเคชันที่ผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์เท่านั้นที่เข้าถึงได้

SignInScreen คือวิดเจ็ตที่มาจากแพ็กเกจ UI ของ FlutterFire ซึ่งจะเป็นหัวข้อหลักของขั้นตอนถัดไปในโค้ดแล็บนี้ เมื่อเรียกใช้แอป ณ จุดนี้ คุณควรเห็นหน้าจอลงชื่อเข้าใช้ที่ว่างเปล่า

5. หน้าจอลงชื่อเข้าใช้

วิดเจ็ต SignInScreen ที่ FlutterFire UI มีให้จะเพิ่มฟังก์ชันต่อไปนี้

อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้
หากผู้ใช้ลืมรหัสผ่าน ให้แตะ "ลืมรหัสผ่าน" แล้วระบบจะนำผู้ใช้ไปยังแบบฟอร์มสำหรับรีเซ็ตรหัสผ่าน
หากยังไม่ได้ลงทะเบียน ผู้ใช้สามารถแตะ "ลงทะเบียน" แล้วระบบจะนำไปยังแบบฟอร์มอื่นที่อนุญาตให้ลงชื่อสมัครใช้ได้

อีกครั้ง ขั้นตอนนี้ต้องใช้โค้ดเพียง 2-3 บรรทัด จดจำรหัสในวิดเจ็ต AuthGate ไว้

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return SignInScreen(
            providers: [
              EmailAuthProvider(), // new
            ],
          );
        }

        return const HomeScreen();
      },
    );
  }
}

วิดเจ็ต SignInScreen และอาร์กิวเมนต์ providers ของวิดเจ็ตเป็นโค้ดเพียงรายการเดียวที่จําเป็นต่อฟังก์ชันการทํางานทั้งหมดที่กล่าวถึงข้างต้น ตอนนี้คุณควรเห็นหน้าจอลงชื่อเข้าใช้ที่มีช่องป้อนข้อความ "อีเมล" และ "รหัสผ่าน" รวมถึงปุ่ม "ลงชื่อเข้าใช้"

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

headerBuilder

การใช้อาร์กิวเมนต์ SignInScreen.headerBuilder ช่วยให้คุณเพิ่มวิดเจ็ตที่ต้องการเหนือแบบฟอร์มลงชื่อเข้าใช้ได้ วิดเจ็ตนี้จะแสดงบนหน้าจอแคบเท่านั้น เช่น อุปกรณ์เคลื่อนที่ ในหน้าจอกว้าง คุณสามารถใช้ SignInScreen.sideBuilder ซึ่งจะอธิบายในภายหลังในโค้ดแล็บนี้

อัปเดตไฟล์ auth_gate.dart ด้วยโค้ดนี้

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('assets/flutterfire_300x.png'),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

อาร์กิวเมนต์ headerBuilder ต้องใช้ฟังก์ชันประเภท HeaderBuilder ซึ่งกำหนดไว้ในแพ็กเกจ FlutterFire UI

typedef HeaderBuilder = Widget Function(
 BuildContext context,
 BoxConstraints constraints,
 double shrinkOffset,
);

เนื่องจากเป็นคอลแบ็ก จึงแสดงค่าที่คุณใช้ได้ เช่น BuildContext และ BoxConstraints และต้องให้คุณแสดงวิดเจ็ต วิดเจ็ตที่คุณแสดงกลับจะปรากฏที่ด้านบนของหน้าจอ ในตัวอย่างนี้ โค้ดใหม่จะเพิ่มรูปภาพไว้ที่ด้านบนของหน้าจอ ตอนนี้ใบสมัครของคุณควรมีลักษณะดังนี้

เครื่องมือสร้างคำบรรยาย

หน้าจอลงชื่อเข้าใช้จะแสดงพารามิเตอร์เพิ่มเติม 3 รายการที่ให้คุณปรับแต่งหน้าจอได้ ได้แก่ subtitleBuilder, footerBuilder และ sideBuilder

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

อัปเดตโค้ดใน auth_gate.dart เพื่อใช้ subtitleBuilder

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
              EmailAuthProvider()
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

โหลดแอปพลิเคชันอีกครั้ง ซึ่งควรมีลักษณะดังนี้

อาร์กิวเมนต์ footerBuilder เหมือนกับ subtitleBuilder โดยไม่แสดง BoxConstraints หรือ shrinkOffset เนื่องจากมีไว้สำหรับข้อความ ไม่ใช่รูปภาพ (แต่คุณจะเพิ่มวิดเจ็ตใดก็ได้)

เพิ่มส่วนท้ายลงในหน้าจอลงชื่อเข้าใช้ด้วยรหัสนี้

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider()
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }}

Side Builder

อาร์กิวเมนต์ SignInScreen.sidebuilder ยอมรับการเรียกกลับ และในครั้งนี้อาร์กิวเมนต์สําหรับการเรียกกลับคือ BuildContext และ double shrinkOffset วิดเจ็ตที่ sideBuilder แสดงจะปรากฏทางด้านซ้ายของแบบฟอร์มลงชื่อเข้าใช้และในหน้าจอแบบกว้างเท่านั้น ซึ่งหมายความว่าวิดเจ็ตจะแสดงบนเดสก์ท็อปและเว็บแอปเท่านั้น

ทางฝั่งใน FlutterFire UI จะใช้จุดหยุดพักเพื่อพิจารณาว่าควรแสดงเนื้อหาส่วนหัว (บนหน้าจอแนวตั้ง เช่น อุปกรณ์เคลื่อนที่) หรือควรแสดงเนื้อหาด้านข้าง (บนหน้าจอแนวนอน เดสก์ท็อป หรือเว็บ) กล่าวโดยละเอียดคือ หากหน้าจอกว้างกว่า 800 พิกเซล ระบบจะแสดงเนื้อหาเครื่องมือสร้างโฆษณาด้านข้าง และไม่แสดงเนื้อหาส่วนหัว หากหน้าจอกว้างน้อยกว่า 800 พิกเซล ผลลัพธ์จะตรงกันข้าม

อัปเดตโค้ดใน auth_gate.dart เพื่อเพิ่มวิดเจ็ต sideBuilder

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
           sideBuilder: (context, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
         );
       }
       return const HomeScreen();
     },
   );
 }
}

ตอนนี้แอปของคุณควรมีลักษณะเช่นนี้เมื่อคุณขยายความกว้างของหน้าต่าง (หากคุณใช้ Flutter Web หรือ MacOS)

สร้างผู้ใช้

ตอนนี้โค้ดทั้งหมดสําหรับหน้าจอนี้เสร็จแล้ว แต่คุณต้องสร้างผู้ใช้ก่อนจึงจะลงชื่อเข้าใช้ได้ ซึ่งทำได้ผ่านหน้าจอ "ลงทะเบียน" หรือจะสร้างผู้ใช้ในคอนโซล Firebase ก็ได้

วิธีใช้คอนโซล

ไปที่ตาราง "ผู้ใช้" ในคอนโซล Firebase
คลิกที่นี่
เลือก "flutterfire-ui-codelab" (หรือโปรเจ็กต์อื่นหากคุณใช้ชื่ออื่น) คุณจะเห็นตารางนี้

คลิกปุ่ม "เพิ่มผู้ใช้"

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

คลิก "เพิ่มผู้ใช้"

ตอนนี้คุณกลับไปที่แอปพลิเคชัน Flutter และลงชื่อเข้าใช้ผู้ใช้ผ่านหน้าลงชื่อเข้าใช้ได้ แอปของคุณควรมีลักษณะดังนี้

6. หน้าจอโปรไฟล์

UI ของ FlutterFire ยังมีวิดเจ็ต ProfileScreen ด้วย ซึ่งจะช่วยให้คุณมีฟังก์ชันการทำงานมากมายในโค้ดเพียงไม่กี่บรรทัด

ไปที่ไฟล์ home.dart ในเครื่องมือแก้ไขข้อความ อัปเดตด้วยรหัสนี้

home.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => const ProfileScreen(),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

โค้ดใหม่ของโน้ตคือคอลแบ็กที่ส่งไปยัง IconButton.isPressed method. เมื่อกด IconButton นั้น แอปพลิเคชันจะสร้างเส้นทางใหม่ที่ไม่ระบุตัวตนและไปยังเส้นทางนั้น เส้นทางนั้นจะแสดงวิดเจ็ต ProfileScreen ซึ่งแสดงผลจาก Callback ของ MaterialPageRoute.builder

โหลดแอปอีกครั้ง แล้วกดไอคอนที่ด้านขวาบน (ในแถบแอป) จากนั้นระบบจะแสดงหน้าเว็บดังต่อไปนี้

นี่คือ UI มาตรฐานที่หน้า UI ของ FlutterFire มีให้ ปุ่มและช่องข้อความทั้งหมดจะเชื่อมต่อกับ Firebase Auth และใช้งานได้ทันที เช่น คุณสามารถป้อนชื่อในช่องข้อความ "ชื่อ" แล้ว FlutterFire UI จะเรียกใช้เมธอด FirebaseAuth.instance.currentUser?.updateDisplayName ซึ่งจะบันทึกชื่อนั้นใน Firebase

ออกจากระบบ

ปัจจุบัน หากคุณกดปุ่ม "ออกจากระบบ" แอปจะไม่เปลี่ยนแปลง ระบบจะนำคุณออกจากระบบ แต่จะไม่มีการนําคุณกลับไปที่วิดเจ็ต AuthGate หากต้องการใช้ ให้ใช้พารามิเตอร์ ProfileScreen.actions

ก่อนอื่น ให้อัปเดตโค้ดใน home.dart

home.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => ProfileScreen(
                    actions: [
                      SignedOutAction((context) {
                        Navigator.of(context).pop();
                      })
                    ],
                  ),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

ตอนนี้เมื่อคุณสร้างอินสแตนซ์ของ ProfileScreen คุณจะส่งรายการการดำเนินการไปยังอาร์กิวเมนต์ ProfileScreen.actions ด้วย การดำเนินการเหล่านี้เป็นประเภท FlutterFireUiAction มีคลาสต่างๆ มากมายที่เป็นประเภทย่อยของ FlutterFireUiAction และโดยทั่วไปแล้วคุณใช้คลาสเหล่านี้เพื่อบอกให้แอปตอบสนองต่อการเปลี่ยนแปลงสถานะการรับรองที่แตกต่างกัน SignedOutAction จะเรียกฟังก์ชัน Callback ที่คุณระบุไว้เมื่อสถานะการตรวจสอบสิทธิ์ Firebase เปลี่ยนเป็น currentUser เป็นค่าว่าง

การเพิ่มการเรียกกลับที่เรียก Navigator.of(context).pop() เมื่อ SignedOutAction ทริกเกอร์ แอปจะไปยังหน้าก่อนหน้า ในแอปตัวอย่างนี้ มีเส้นทางถาวรเพียงเส้นทางเดียว ซึ่งจะแสดงหน้าลงชื่อเข้าใช้หากไม่มีผู้ใช้ลงชื่อเข้าใช้ และหน้าแรกหากมีผู้ใช้ เนื่องจากเหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ออกจากระบบ แอปจึงจะแสดงหน้าลงชื่อเข้าใช้

ปรับแต่งหน้าโปรไฟล์

หน้าโปรไฟล์ปรับแต่งได้เช่นเดียวกับหน้าลงชื่อเข้าใช้ ประการแรก หน้าปัจจุบันของเราไม่มีวิธีกลับไปที่หน้าแรกเมื่อผู้ใช้อยู่ในหน้าโปรไฟล์ แก้ไขปัญหานี้โดยให้ AppBar กับวิดเจ็ต ProfileScreen

home.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
 const HomeScreen({super.key});

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       actions: [
         IconButton(
           icon: const Icon(Icons.person),
           onPressed: () {
             Navigator.push(
               context,
               MaterialPageRoute<ProfileScreen>(
                 builder: (context) => ProfileScreen(
                   appBar: AppBar(
                     title: const Text('User Profile'),
                   ),
                   actions: [
                     SignedOutAction((context) {
                       Navigator.of(context).pop();
                     })
                   ],
                 ),
               ),
             );
           },
         )
       ],
       automaticallyImplyLeading: false,
     ),
     body: Center(
       child: Column(
         children: [
           Image.asset('dash.png'),
           Text(
             'Welcome!',
             style: Theme.of(context).textTheme.displaySmall,
           ),
           const SignOutButton(),
         ],
       ),
     ),
   );
 }
}

อาร์กิวเมนต์ ProfileScreen.appBar จะยอมรับวิดเจ็ต AppBar จากแพ็กเกจ Flutter Material เพื่อให้ระบบจัดการเหมือนกับ AppBar อื่นๆ ที่คุณสร้างและส่งไปยัง Scaffold ในตัวอย่างนี้ ระบบจะยังคงฟังก์ชันการทำงานเริ่มต้นของการเพิ่มปุ่ม "กลับ" โดยอัตโนมัติ และตอนนี้หน้าจอก็มีชื่อแล้ว

เพิ่มบุตรหลานในหน้าจอโปรไฟล์

วิดเจ็ต ProfileScreen ยังมีอาร์กิวเมนต์ที่ไม่บังคับชื่อ children ด้วย อาร์กิวเมนต์นี้ยอมรับรายการวิดเจ็ต และวิดเจ็ตเหล่านั้นจะวางในแนวตั้งภายในวิดเจ็ตคอลัมน์ที่ใช้ภายในอยู่แล้วเพื่อสร้าง ProfileScreen วิดเจ็ตคอลัมน์นี้ในเมธอดการสร้าง ProfileScreen จะวางรายการย่อยที่คุณส่งไว้เหนือปุ่ม "ออกจากระบบ"

อัปเดตโค้ดใน home.dart เพื่อแสดงโลโก้บริษัทที่นี่ ซึ่งคล้ายกับหน้าจอลงชื่อเข้าใช้

home.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => ProfileScreen(
                    appBar: AppBar(
                      title: const Text('User Profile'),
                    ),
                    actions: [
                      SignedOutAction((context) {
                        Navigator.of(context).pop();
                      })
                    ],
                    children: [
                      const Divider(),
                      Padding(
                        padding: const EdgeInsets.all(2),
                        child: AspectRatio(
                          aspectRatio: 1,
                          child: Image.asset('flutterfire_300x.png'),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

โหลดแอปซ้ำ แล้วคุณจะเห็นข้อความนี้บนหน้าจอ

7. การลงชื่อเข้าใช้ด้วยการตรวจสอบสิทธิ์ของ Google แบบหลายแพลตฟอร์ม

นอกจากนี้ UI ของ FlutterFire ยังมีวิดเจ็ตและฟังก์ชันสําหรับการตรวจสอบสิทธิ์กับผู้ให้บริการบุคคลที่สาม เช่น Google, Twitter, Facebook, Apple และ Github

หากต้องการผสานรวมกับการตรวจสอบสิทธิ์ของ Google ให้ติดตั้งปลั๊กอิน firebase_ui_oauth_google อย่างเป็นทางการและทรัพยากร Dependency ของปลั๊กอิน ซึ่งจะจัดการขั้นตอนการตรวจสอบสิทธิ์แบบดั้งเดิม ในเทอร์มินัล ให้ไปที่รูทของโปรเจ็กต์ Flutter แล้วป้อนคำสั่งต่อไปนี้

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

จากนั้นเปิดใช้ผู้ให้บริการ Google ในคอนโซล Firebase โดยทำดังนี้

ไปที่หน้าจอผู้ให้บริการการลงชื่อเข้าใช้เพื่อตรวจสอบสิทธิ์ในคอนโซล
คลิก "เพิ่มผู้ให้บริการใหม่"
เลือก "Google"
สลับสวิตช์ที่ระบุว่า "เปิดใช้" แล้วกด "บันทึก"
หากโมดัลปรากฏขึ้นพร้อมข้อมูลเกี่ยวกับการดาวน์โหลดไฟล์การกําหนดค่า ให้คลิก "เสร็จสิ้น"
ยืนยันว่าเพิ่มผู้ให้บริการลงชื่อเข้าใช้ด้วย Google แล้ว

เมื่อเปิดใช้ฟีเจอร์ลงชื่อเข้าใช้ด้วย Google แล้ว ให้เพิ่มวิดเจ็ตที่จําเป็นในการแสดงปุ่มลงชื่อเข้าใช้ Google ที่มีสไตล์ลงในหน้าลงชื่อเข้าใช้ ไปที่ไฟล์ auth_gate.dart และอัปเดตโค้ดเป็นดังนี้

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart'; // new
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
             GoogleProvider(clientId: "YOUR_WEBCLIENT_ID"),  // new
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
           sideBuilder: (context, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

โค้ดใหม่เพียงอย่างเดียวคือการเพิ่ม GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") ลงในการกำหนดค่าวิดเจ็ต SignInScreen

เมื่อเพิ่มแล้ว ให้โหลดแอปซ้ำ แล้วคุณจะเห็นปุ่มลงชื่อเข้าใช้ด้วย Google

ปุ่มจะไม่ทำงานหากไม่มีการกําหนดค่าเพิ่มเติม หากคุณกำลังพัฒนาด้วย Flutter Web ขั้นตอนนี้จะเป็นขั้นตอนเดียวที่คุณต้องทำเพื่อให้การดำเนินการนี้ใช้งานได้ แพลตฟอร์มอื่นๆ ต้องใช้ขั้นตอนเพิ่มเติม ซึ่งเราจะพูดถึงในอีกสักครู่

ไปที่หน้าผู้ให้บริการตรวจสอบสิทธิ์ในคอนโซล Firebase
คลิกผู้ให้บริการ Google
คลิกแผงขยาย "การกำหนดค่า SDK ของเว็บ"
คัดลอกค่าจาก "รหัสไคลเอ็นต์เว็บ"
กลับไปที่เครื่องมือแก้ไขข้อความ แล้วอัปเดตอินสแตนซ์ของ GoogleProvider ในไฟล์ auth_gate.dart ด้วยการส่งรหัสนี้ไปยังพารามิเตอร์ที่มีชื่อ clientId

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

เมื่อป้อนรหัสไคลเอ็นต์เว็บแล้ว ให้โหลดแอปอีกครั้ง เมื่อกดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" หน้าต่างใหม่จะปรากฏขึ้น (หากคุณใช้เว็บ) ซึ่งจะแนะนำขั้นตอนการลงชื่อเข้าใช้ด้วย Google ในระยะแรก หน้านี้จะมีลักษณะดังนี้

กำหนดค่า iOS

กระบวนการกําหนดค่าเพิ่มเติมเป็นสิ่งจําเป็นเพื่อให้การทดสอบนี้ทํางานใน iOS

ไปที่หน้าจอการตั้งค่าโปรเจ็กต์ในคอนโซล Firebase การ์ดจะแสดงแอป Firebase ของคุณซึ่งมีลักษณะดังนี้
คลิก iOS โปรดทราบว่าชื่อแอปพลิเคชันของคุณจะแตกต่างจากชื่อแอปพลิเคชันของฉัน ส่วนที่ฉันบอกว่า "เสร็จสมบูรณ์" ของคุณจะบอกว่า "เริ่ม" หากคุณใช้โปรเจ็กต์ flutter-codelabs/firebase-auth-flutterfire-ui/start เพื่อทําตามในโค้ดแล็บนี้
คลิกปุ่ม "GoogleServices-Info.plist" เพื่อดาวน์โหลดไฟล์การกําหนดค่าที่จําเป็น
ลากและวางไฟล์ที่ดาวน์โหลดไปยังไดเรกทอรีชื่อ/ios/Runner ในโปรเจ็กต์ Flutter
เปิด Xcode โดยเรียกใช้คำสั่งเทอร์มินัลต่อไปนี้จากรูทของโปรเจ็กต์ open ios/Runner.xcworkspace
คลิกขวาที่ไดเรกทอรี Runner แล้วเลือก "เพิ่มไฟล์ไปยัง Runner"
เลือก GoogleService-Info.plist จากเครื่องมือจัดการไฟล์
กลับไปที่เครื่องมือแก้ไขข้อความ (ที่ไม่ใช่ Xcode) แล้วเพิ่มแอตทริบิวต์ CFBundleURLTypes ด้านล่างลงในไฟล์ [my_project]/ios/Runner/Info.plist

<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
        <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLSchemes</key>
                <array>
                        <!-- TODO Replace this value: -->
                        <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
                        <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
                </array>
        </dict>
</array>
<!-- End of the Google Sign-in Section -->

คุณต้องแทนที่ GoogleProvider.clientId ที่คุณเพิ่มในการตั้งค่าเว็บด้วยรหัสไคลเอ็นต์ที่เชื่อมโยงกับรหัสไคลเอ็นต์ Firebase iOS ขั้นแรก คุณจะเห็นรหัสนี้ในไฟล์ firebase_options.dart ซึ่งเป็นส่วนหนึ่งของค่าคงที่ iOS คัดลอกค่าที่ส่งไปยัง iOSClientId

static const FirebaseOptions ios = FirebaseOptions(
  apiKey: 'YOUR API KEY',
  appId: 'YOUR APP ID',
  messagingSenderId: '',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  iosClientId: 'IOS CLIENT ID', // Find your iOS client Id here.
  iosBundleId: 'com.example.BUNDLE',
);

วางค่านั้นลงในอาร์กิวเมนต์ GoogleProvider.clientId ในวิดเจ็ต AuthGate

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart';
import 'package:flutter/material.dart';

import 'home.dart';


class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
             GoogleProvider(clientId: "YOUR IOS CLIENT ID"),  // replace String
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
           sideBuilder: (context, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

หากแอป Flutter ทำงานอยู่ใน iOS อยู่แล้ว คุณต้องปิดแอปนั้นโดยสมบูรณ์ แล้วเรียกใช้แอปพลิเคชันอีกครั้ง หรือเรียกใช้แอปใน iOS

8. ยินดีด้วย

คุณทำ Codelab UI ของ Firebase Auth สำหรับ Flutter เสร็จแล้ว คุณดูโค้ดที่เสร็จสมบูรณ์ของ Codelab นี้ได้ในไดเรกทอรี "complete" ใน GitHub: Flutter Codelab

สิ่งที่เราได้พูดถึง

การตั้งค่าแอป Flutter ให้ใช้ Firebase
การตั้งค่าโปรเจ็กต์ Firebase ในคอนโซล Firebase
FlutterFire CLI
Firebase CLI
การใช้การตรวจสอบสิทธิ์ Firebase
ใช้ FlutterFire UI เพื่อจัดการการตรวจสอบสิทธิ์ Firebase ในแอป Flutter ได้อย่างง่ายดาย

ขั้นตอนถัดไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Firestore และการตรวจสอบสิทธิ์ใน Flutter: ทำความรู้จัก Firebase สำหรับ Flutter Codelab
สำรวจเครื่องมืออื่นๆ ของ Firebase สำหรับการสร้างแอปพลิเคชัน Flutter
พื้นที่เก็บข้อมูลระบบคลาวด์
Cloud Functions
Realtime Database

ดูข้อมูลเพิ่มเติม

เว็บไซต์ Firebase: firebase.google.com
เว็บไซต์ Flutter: flutter.dev
วิดเจ็ต Flutter ของ Firebase ใน FlutterFire: firebase.flutter.dev
ช่อง YouTube ของ Firebase
ช่อง YouTube ของ Flutter

Sparky พร้อมร่วมฉลองกับคุณ

เพิ่มขั้นตอนการตรวจสอบสิทธิ์ผู้ใช้ลงในแอป Flutter โดยใช้ FirebaseUI

1. ก่อนเริ่มต้น

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

สิ่งที่คุณจะสร้าง

สิ่งที่คุณจะได้เรียนรู้

สิ่งที่ต้องมี

2. สร้างและตั้งค่าโปรเจ็กต์ Firebase

สร้างโปรเจ็กต์ Firebase

เปิดใช้การลงชื่อเข้าใช้ด้วยอีเมลสําหรับการตรวจสอบสิทธิ์ Firebase

3. ตั้งค่าแอป Flutter

รับรหัสเริ่มต้น

ติดตั้ง Firebase CLI

ติดตั้ง FlutterFire CLI

เพิ่มโปรเจ็กต์ Firebase ลงในแอป Flutter

กำหนดค่า FlutterFire

เพิ่มแพ็กเกจ Firebase ลงในแอป Flutter

เริ่มต้น Firebase

4. เพิ่มหน้า Firebase UI Auth เริ่มต้น

แอป Material หรือ Cupertino

ตรวจสอบสถานะการตรวจสอบสิทธิ์

5. หน้าจอลงชื่อเข้าใช้

ปรับแต่งหน้าจอลงชื่อเข้าใช้

headerBuilder

เครื่องมือสร้างคำบรรยาย

เครื่องมือสร้างส่วนท้าย

Side Builder

สร้างผู้ใช้

6. หน้าจอโปรไฟล์

เพิ่มวิดเจ็ต ProfileScreen

ออกจากระบบ

ปรับแต่งหน้าโปรไฟล์

เพิ่มบุตรหลานในหน้าจอโปรไฟล์

7. การลงชื่อเข้าใช้ด้วยการตรวจสอบสิทธิ์ของ Google แบบหลายแพลตฟอร์ม

เปิดใช้ผู้ให้บริการ Google Sign-In

เพิ่มปุ่มลงชื่อเข้าใช้ด้วย Google

กำหนดค่าปุ่มลงชื่อเข้าใช้

กำหนดค่า iOS

8. ยินดีด้วย

สิ่งที่เราได้พูดถึง

ขั้นตอนถัดไป

ดูข้อมูลเพิ่มเติม