Tambahkan alur autentikasi pengguna ke aplikasi Flutter menggunakan FirebaseUI

1. Sebelum Anda mulai

Dalam codelab ini, Anda akan mempelajari cara menambahkan Firebase Authentication ke aplikasi Flutter menggunakan paket UI FlutterFire. Dengan paket ini, Anda akan menambahkan autentikasi email/kata sandi dan autentikasi Masuk Google ke aplikasi Flutter. Anda juga akan mempelajari cara menyiapkan proyek Firebase, dan menggunakan FlutterFire CLI untuk menginisialisasi Firebase di aplikasi Flutter Anda.

Prasyarat

Codelab ini mengasumsikan bahwa Anda memiliki pengalaman Flutter. Jika belum, Anda mungkin ingin mempelajari dasar-dasarnya terlebih dahulu. Tautan berikut bermanfaat:

Anda juga harus memiliki pengalaman Firebase, namun tidak masalah jika Anda belum pernah menambahkan Firebase ke proyek Flutter. Jika Anda belum terbiasa dengan Firebase console, atau Anda benar-benar baru mengenal Firebase, lihat link berikut terlebih dahulu:

Apa yang akan Anda buat

Codelab ini memandu Anda dalam membuat alur autentikasi untuk aplikasi Flutter, menggunakan Firebase untuk Authentication. Aplikasi akan memiliki layar login, layar 'Daftar', layar pemulihan kata sandi, dan layar profil pengguna.

6604fc9157f2c6ae.pngeab9509a41074930.pngda49189a5838e0bb.pngb2ccfb3632b77878.png

Apa yang akan Anda pelajari

Codelab ini mencakup:

  • Menambahkan Firebase ke aplikasi Flutter
  • Penyiapan Konsol Firebase
  • Menggunakan Firebase CLI untuk menambahkan Firebase ke aplikasi Anda
  • Menggunakan FlutterFire CLI untuk menghasilkan konfigurasi Firebase di Dart
  • Menambahkan Firebase Authentication ke aplikasi Flutter Anda
  • Penyiapan Firebase Authentication di konsol
  • Menambahkan login Email dan Kata Sandi dengan paket firebase_ui_auth
  • Menambahkan registrasi pengguna dengan paket firebase_ui_auth
  • Menambahkan 'Lupa kata sandi?' halaman
  • Menambahkan Masuk Google dengan firebase_ui_auth
  • Mengonfigurasi aplikasi Anda agar berfungsi dengan beberapa penyedia masuk.
  • Menambahkan layar profil pengguna ke aplikasi Anda dengan paket firebase_ui_auth

Codelab ini secara khusus berkaitan dengan penambahan sistem Autentikasi yang kuat menggunakan paket firebase_ui_auth . Seperti yang akan Anda lihat, keseluruhan aplikasi ini, dengan semua fitur di atas, dapat diimplementasikan dengan sekitar 100 baris kode.

Apa yang Anda perlukan

  • Pengetahuan tentang Flutter , dan SDK yang diinstal
  • Editor teks (JetBrains IDE, Android Studio, dan VS Code didukung oleh Flutter)
  • Browser Google Chrome, atau target pengembangan pilihan Anda lainnya untuk Flutter. (Beberapa perintah terminal dalam codelab ini akan menganggap Anda menjalankan aplikasi di Chrome)

2. Membuat dan menyiapkan proyek Firebase

Tugas pertama yang harus Anda selesaikan adalah membuat proyek Firebase di konsol web Firebase.

Buat proyek Firebase

  1. Masuk ke Firebase .
  2. Di Firebase console, klik Tambahkan Proyek (atau Buat proyek ), lalu masukkan nama untuk proyek Firebase Anda (misalnya, " FlutterFire-UI-Codelab ").

df42a5e3d9584b48.png

  1. Klik opsi pembuatan proyek. Terima persyaratan Firebase jika diminta. Lewati penyiapan Google Analytics, karena Anda tidak akan menggunakan Analytics untuk aplikasi ini.

d1fcec48bf251eaa.png

Untuk mempelajari lebih lanjut proyek Firebase, lihat Memahami proyek Firebase .

Aplikasi yang Anda buat menggunakan Firebase Authentication untuk memungkinkan pengguna login ke aplikasi Anda. Ini juga memungkinkan pengguna baru untuk mendaftar dari aplikasi Flutter.

Firebase Authentication harus diaktifkan menggunakan Firebase Console, dan memerlukan konfigurasi khusus setelah diaktifkan.

Aktifkan login email untuk Firebase Authentication

Untuk mengizinkan pengguna masuk ke aplikasi web, pertama-tama Anda akan menggunakan metode masuk Email/Kata Sandi . Nanti, Anda akan menambahkan metode Masuk dengan Google .

  1. Di Firebase console, perluas menu Build di panel kiri.
  2. Klik Autentikasi , lalu klik tombol Memulai , lalu tab Metode masuk (atau klik di sini untuk langsung membuka tab Metode masuk ).
  3. Klik Email/Kata Sandi di daftar Penyedia masuk , atur tombol Aktifkan ke posisi aktif, lalu klik Simpan . 58e3e3e23c2f16a4.png

3. Siapkan aplikasi Flutter

Anda harus mendownload kode awal, dan menginstal Firebase CLI sebelum kita mulai.

Dapatkan kode awal

Kloning repositori GitHub dari baris perintah:

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

Alternatifnya, jika Anda sudah menginstal alat CLI GitHub :

gh repo clone flutter/codelabs flutter-codelabs

Kode contoh harus digandakan ke direktori flutter-codelabs di mesin Anda, yang berisi kode untuk kumpulan codelab. Kode untuk codelab ini ada di subdirektori flutter-codelabs/firebase-auth-flutterfire-ui .

Direktori flutter-codelabs/firebase-auth-flutterfire-ui berisi dua proyek Flutter. Yang satu disebut complete dan yang lainnya disebut start . Direktori start berisi proyek yang belum selesai, dan di situlah Anda akan menghabiskan sebagian besar waktu Anda.

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

Jika Anda ingin melompat ke depan, atau melihat seperti apa tampilannya setelah selesai, lihat di direktori bernama selesai untuk referensi silang.

Jika Anda ingin mengikuti codelab dan menambahkan kode sendiri, Anda harus memulai dengan aplikasi Flutter di flutter-codelabs/firebase-auth-flutterfire-ui/start , dan menambahkan kode ke proyek tersebut di seluruh codelab. Buka atau impor direktori itu ke IDE pilihan Anda.

Instal Firebase CLI

Firebase CLI menyediakan alat untuk mengelola proyek Firebase Anda. CLI diperlukan untuk FlutterFire CLI, yang akan Anda instal sebentar lagi.

Ada berbagai cara untuk menginstal CLI. Cara termudah, jika Anda menggunakan MacOS atau Linux, adalah dengan menjalankan perintah ini dari terminal Anda:

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

Setelah menginstal CLI, Anda harus mengautentikasi dengan Firebase.

  1. Masuk ke Firebase menggunakan akun Google Anda dengan menjalankan perintah berikut:
firebase login
  1. Perintah ini menghubungkan mesin lokal Anda ke Firebase dan memberi Anda akses ke proyek Firebase Anda.
  1. Uji apakah CLI terpasang dengan benar dan memiliki akses ke akun Anda dengan mencantumkan proyek Firebase Anda. Jalankan perintah berikut:
firebase projects:list
  1. Daftar yang ditampilkan harus sama dengan proyek Firebase yang tercantum di Firebase console . Anda setidaknya akan melihat flutterfire-ui-codelab.

Instal FlutterFire CLI

FlutterFire CLI adalah alat yang membantu memudahkan proses instalasi Firebase di semua platform yang didukung di aplikasi Flutter Anda. Itu dibangun di atas Firebase CLI.

Pertama, instal CLI:

dart pub global activate flutterfire_cli

Pastikan CLI telah diinstal. Jalankan perintah berikut dan pastikan CLI mengeluarkan menu bantuan.

flutterfire -—help

Tambahkan proyek Firebase Anda ke aplikasi Flutter Anda

Konfigurasikan FlutterFire

Anda dapat menggunakan FlutterFire untuk menghasilkan kode Dart yang diperlukan untuk menggunakan Firebase di aplikasi Flutter Anda.

flutterfire configure

Saat perintah ini dijalankan, Anda akan diminta untuk memilih proyek Firebase mana yang ingin Anda gunakan, dan platform mana yang ingin Anda siapkan.

Tangkapan layar berikut menunjukkan petunjuk yang harus Anda jawab.

  1. Pilih proyek yang ingin Anda gunakan. Dalam hal ini, gunakan flutterfire-ui-codelab 1359cdeb83204baa.png
  2. Pilih platform mana yang ingin Anda gunakan. Dalam codelab ini, terdapat langkah-langkah untuk mengonfigurasi Firebase Authentication untuk Flutter untuk web, iOS, dan Android, namun Anda dapat menyiapkan proyek Firebase untuk menggunakan semua opsi. 301c9534f594f472.png
  3. Tangkapan layar ini menunjukkan keluaran di akhir proses. Jika Anda sudah familiar dengan Firebase, Anda akan menyadari bahwa Anda tidak perlu membuat aplikasi platform (misalnya, aplikasi Android) di konsol, dan FlutterFire CLI melakukannya untuk Anda. 12199a85ade30459.png

Setelah selesai, lihat aplikasi Flutter di editor teks Anda. FlutterFire CLI telah membuat file baru bernama firebase_options.dart . File ini berisi kelas bernama FirebaseOptions, yang memiliki variabel statis yang menyimpan konfigurasi Firebase yang diperlukan untuk setiap platform. Jika Anda memilih semua platform saat menjalankan flutterfire configure , Anda akan melihat nilai statis bernama web , android , ios , dan 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.appspot.com',
   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.appspot.com',
 );

 static const FirebaseOptions ios = FirebaseOptions(
   apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
   appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.appspot.com',
   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.appspot.com',
   iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
   iosBundleId: 'com.example.complete',
 );
}

Firebase menggunakan kata application untuk merujuk pada build spesifik untuk platform tertentu dalam proyek Firebase. Misalnya, proyek Firebase yang disebut FlutterFire-ui-codelab memiliki beberapa aplikasi: satu untuk Android, satu untuk iOS, satu untuk MacOS, dan satu lagi untuk Web.

Metode DefaultFirebaseOptions.currentPlatform menggunakan enum TargetPlatform yang diekspos oleh Flutter untuk mendeteksi platform tempat aplikasi Anda berjalan, lalu mengembalikan nilai konfigurasi Firebase yang diperlukan untuk aplikasi Firebase yang benar.

Tambahkan paket Firebase ke aplikasi Flutter

Langkah penyiapan terakhir adalah menambahkan paket Firebase yang relevan ke proyek Flutter Anda. File firebase_options.dart seharusnya mengalami error, karena bergantung pada paket Firebase yang belum ditambahkan. Di terminal, pastikan Anda berada di root proyek Flutter di flutter-codelabs/firebase-emulator-suite/start . Kemudian, jalankan tiga perintah berikut:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

Ini adalah satu-satunya paket yang Anda perlukan saat ini.

Inisialisasi Firebase

Untuk menggunakan paket yang ditambahkan, dan DefaultFirebaseOptions.currentPlatform, perbarui kode dalam fungsi main di file main.dart .

main.dart

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


 runApp(const MyApp());
}

Kode ini melakukan dua hal.

  1. WidgetsFlutterBinding.ensureInitialized() memberi tahu Flutter untuk tidak mulai menjalankan kode widget aplikasi hingga kerangka Flutter di-boot sepenuhnya. Firebase menggunakan saluran platform asli, yang memerlukan kerangka kerja agar dapat berjalan.
  2. Firebase.initializeApp menyiapkan koneksi antara aplikasi Flutter dan proyek Firebase Anda. DefaultFirebaseOptions.currentPlatform diimpor dari file firebase_options.dart yang kami buat. Nilai statis ini mendeteksi platform mana yang Anda jalankan, dan meneruskan kunci Firebase yang sesuai.

4. Tambahkan halaman Auth UI Firebase awal

Firebase UI untuk Auth menyediakan widget yang mewakili seluruh layar di aplikasi Anda. Layar ini menangani alur autentikasi yang berbeda di seluruh aplikasi Anda, seperti Masuk, Registrasi, Lupa Kata Sandi, Profil Pengguna, dan banyak lagi. Untuk memulai, tambahkan laman landas ke aplikasi Anda yang bertindak sebagai penjaga autentikasi ke aplikasi utama.

Bahan atau Aplikasi Cupertino

FlutterFire UI mengharuskan aplikasi Anda dibungkus dalam MaterialApp atau CupertinoApp. Tergantung pada pilihan Anda, UI akan secara otomatis mencerminkan perbedaan widget Material atau Cupertino. Untuk codelab ini, gunakan MaterialApp , yang sudah ditambahkan ke aplikasi di 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(),
   );
 }
}

Periksa status autentikasi

Sebelum Anda dapat menampilkan layar masuk, Anda perlu menentukan apakah pengguna saat ini diautentikasi. Cara paling umum untuk memeriksanya adalah dengan mendengarkan authStateChanges FirebaseAuth menggunakan plugin Firebase Auth .

Dalam contoh kode di atas, MaterialApp sedang membuat widget AuthGate dalam metode build-nya. (Ini adalah widget khusus, tidak disediakan oleh FlutterFire UI.)

Widget itu perlu diperbarui untuk menyertakan aliran authStateChanges .

API authStateChanges mengembalikan Stream dengan pengguna saat ini (jika mereka masuk), atau null jika tidak. Untuk berlangganan status ini di aplikasi kami, Anda dapat menggunakan widget StreamBuilder Flutter dan meneruskan aliran ke widget tersebut.

StreamBuilder adalah widget yang dibuat sendiri berdasarkan snapshot data terbaru dari Stream yang Anda lewati. Secara otomatis dibangun kembali ketika Stream mengeluarkan snapshot baru.

Perbarui kode di 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 sedang meneruskan FirebaseAuth.instance.authStateChanged , aliran yang disebutkan di atas, yang akan mengembalikan objek User Firebase jika pengguna telah mengautentikasi. (Jika tidak maka akan mengembalikan null .)
  • Selanjutnya, kode menggunakan snapshot.hasData untuk memeriksa apakah nilai dari aliran berisi objek User .
  • Jika tidak ada, widget SignInScreen akan ditampilkan. Saat ini, layar itu tidak akan melakukan apa pun. Ini akan diperbarui pada langkah berikutnya.
  • Jika tidak, ia akan mengembalikan HomeScreen , yang merupakan bagian utama aplikasi yang hanya dapat diakses oleh pengguna terautentikasi.

SignInScreen adalah widget yang berasal dari paket FlutterFire UI. Hal ini akan menjadi fokus langkah berikutnya dalam codelab ini. Saat Anda menjalankan aplikasi pada tahap ini, Anda akan melihat layar masuk kosong.

5. Layar masuk

Widget SignInScreen , yang disediakan oleh FlutterFire UI, menambahkan fungsi berikut:

  • Memungkinkan pengguna untuk masuk
  • Jika pengguna lupa kata sandinya, mereka dapat mengetuk "Lupa kata sandi?" dan dibawa ke formulir untuk mengatur ulang kata sandi mereka
  • Jika pengguna belum terdaftar, mereka dapat mengetuk "Daftar", dan diarahkan ke formulir lain yang memungkinkan mereka mendaftar.

Sekali lagi, ini hanya memerlukan beberapa baris kode. Ingat kode di widget 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();
      },
    );
  }
}

Widget SignInScreen , dan argumen providers , adalah satu-satunya kode yang diperlukan untuk mendapatkan semua fungsi yang disebutkan di atas. Anda sekarang akan melihat layar masuk yang memiliki input teks 'email' dan 'kata sandi', serta tombol 'Masuk'.

Meskipun fungsional, gayanya kurang. Widget menampilkan parameter untuk menyesuaikan tampilan layar masuk. Misalnya, Anda mungkin ingin menambahkan logo perusahaan Anda.

Sesuaikan Layar masuk

headerBuilder

Dengan menggunakan argumen SignInScreen.headerBuilder , Anda dapat menambahkan widget apa pun yang Anda inginkan di atas formulir masuk. Perbarui file auth_gate.dart dengan kode ini:

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

Argumen headerBuilder memerlukan fungsi bertipe HeaderBuilder, yang didefinisikan dalam paket FlutterFire UI.

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

Karena ini adalah callback, ini memperlihatkan nilai yang dapat Anda gunakan, seperti BuildContext dan BoxConstraints , dan mengharuskan Anda mengembalikan widget. Widget mana pun yang Anda kembalikan akan ditampilkan di bagian atas layar. Dalam contoh ini, kode baru menambahkan gambar ke bagian atas layar. Aplikasi Anda sekarang akan terlihat seperti ini.

73d7548d91bbd2ab.png

Pembuat Subjudul

Layar masuk memperlihatkan tiga parameter tambahan yang memungkinkan Anda menyesuaikan layar: subtitleBuilder , footerBuilder , dan sideBuilder .

subtitleBuilder sedikit berbeda karena argumen callback menyertakan tindakan, yang bertipe AuthAction . AuthAction adalah enum yang dapat Anda gunakan untuk mendeteksi apakah layar yang digunakan pengguna adalah layar "masuk" atau layar "daftar".

Perbarui kode di auth_gate.dart untuk menggunakan 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();
     },
   );
 }
}

Muat ulang aplikasinya, dan tampilannya akan seperti ini

Argumen footerBuilder sama dengan subtitleBuilder. Itu tidak mengekspos BoxConstraints atau shrinkOffset , karena ini dimaksudkan untuk teks dan bukan gambar. (Meskipun Anda dapat menambahkan widget apa pun yang Anda inginkan.)

Tambahkan footer ke layar masuk Anda dengan kode ini.

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

Pembangun Samping

Argumen SignInScreen.sidebuilder menerima panggilan balik, dan kali ini argumen untuk panggilan balik tersebut adalah BuildContext dan double shrinkOffset . Widget yang dikembalikan sideBuilder akan ditampilkan di sebelah kiri formulir masuk, dan hanya di layar lebar. Artinya, widget hanya akan ditampilkan di desktop dan aplikasi web.

Secara internal, FlutterFire UI menggunakan breakpoint untuk menentukan apakah konten header harus ditampilkan (di layar tinggi, seperti seluler) atau konten sampingan harus ditampilkan (di layar lebar, desktop, atau web). Khususnya, jika lebar layar lebih dari 800 piksel, konten pembuat samping akan ditampilkan, dan konten header tidak. Jika lebar layarnya kurang dari 800 piksel, yang terjadi adalah sebaliknya.

Perbarui kode di auth_gate.dart untuk menambahkan widget 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();
     },
   );
 }
}

Aplikasi Anda sekarang akan terlihat seperti ini ketika Anda memperluas lebar jendela (jika Anda menggunakan web Flutter atau MacOS).

8dc60b4e5d7dd2d0.png

Buat pengguna

Pada titik ini, semua kode untuk layar ini sudah selesai. Namun, sebelum Anda dapat masuk, Anda perlu membuat Pengguna. Anda dapat melakukannya melalui layar "Daftar", atau Anda dapat membuat pengguna di Firebase console.

Untuk menggunakan konsol:

  1. Buka tabel "Pengguna" di Firebase console.
  2. klik disini
  3. Pilih 'flutterfire-ui-codelab' (atau proyek lain jika Anda menggunakan nama lain). Anda akan melihat tabel ini:

f038fd9a58ed60d9.png

  1. Klik tombol "Tambahkan pengguna".

2d78390d4c5dbbfa.png

  1. Masukkan alamat email dan kata sandi untuk pengguna baru. Ini bisa berupa email dan kata sandi palsu, seperti yang saya masukkan pada gambar di bawah. Itu akan berhasil, tetapi fungsi "Lupa kata sandi" tidak akan berfungsi jika Anda menggunakan alamat email palsu.

62ba0feb33d54add.png

  1. Klik "Tambahkan pengguna"

32b236b3ef94d4c7.png

Sekarang, Anda dapat kembali ke aplikasi Flutter Anda, dan memasukkan pengguna melalui halaman masuk. Aplikasi Anda akan terlihat seperti ini:

dd43d260537f3b1a.png

6. Layar Profil

FlutterFire UI juga menyediakan widget ProfileScreen , yang sekali lagi memberi Anda banyak fungsi dalam beberapa baris kode.

Tambahkan widget ProfileScreen

Arahkan ke file home.dart di editor teks Anda. Perbarui dengan kode ini:

rumah.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(),
          ],
        ),
      ),
    );
  }
}

Kode catatan baru adalah panggilan balik yang diteruskan ke IconButton.isPressed method. Saat IconButton ditekan, aplikasi Anda membuat rute anonim baru dan menavigasi ke sana. Rute tersebut akan menampilkan widget ProfileScreen , yang dikembalikan dari callback MaterialPageRoute.builder .

Muat ulang aplikasi Anda, dan tekan ikon di kanan atas (di bilah aplikasi), dan itu akan menampilkan halaman seperti ini:

36487fc4ab4f26a7.png

Ini adalah UI standar yang disediakan oleh halaman FlutterFire UI. Semua tombol dan kolom teks terhubung ke Firebase Auth, dan langsung berfungsi. Misalnya, Anda dapat memasukkan nama ke dalam kolom teks "Nama", dan UI FlutterFire akan memanggil metode FirebaseAuth.instance.currentUser?.updateDisplayName , yang akan menyimpan nama tersebut di Firebase.

Keluar

Saat ini, jika Anda menekan tombol "Keluar", aplikasi tidak akan berubah. Ini akan mengeluarkan Anda, tetapi Anda tidak akan diarahkan kembali ke widget AuthGate. Untuk menerapkan ini, gunakan parameter ProfileScreen.actions.

Pertama, perbarui kode di home.dart.

rumah.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(),
          ],
        ),
      ),
    );
  }
}

Sekarang, saat Anda membuat instance ProfileScreen , Anda juga meneruskan daftar tindakan ke argumen ProfileScreen.actions . Tindakan ini bertipe FlutterFireUiAction . Ada banyak kelas berbeda yang merupakan subtipe FlutterFireUiAction , dan secara umum Anda menggunakannya untuk memberi tahu aplikasi Anda agar bereaksi terhadap perubahan status autentikasi yang berbeda. SignedOutAction memanggil fungsi callback yang Anda berikan ketika status autentikasi Firebase berubah menjadi currentUser menjadi null.

Dengan menambahkan callback yang memanggil Navigator.of(context).pop() saat SignedOutAction terpicu, aplikasi akan menavigasi ke halaman sebelumnya. Dalam contoh aplikasi ini, hanya ada satu rute permanen, yang menampilkan halaman masuk jika tidak ada pengguna yang masuk, dan halaman beranda jika ada pengguna. Karena ini terjadi ketika pengguna keluar, aplikasi akan menampilkan halaman Masuk.

Sesuaikan Halaman Profil

Mirip dengan halaman Masuk, halaman profil dapat disesuaikan. Pertama, halaman kami saat ini tidak memiliki cara untuk menavigasi kembali ke halaman beranda setelah pengguna berada di halaman profil. Perbaiki ini dengan memberikan widget ProfileScreen sebuah AppBar.

rumah.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(),
         ],
       ),
     ),
   );
 }
}

Argumen ProfileScreen.appBar menerima widget AppBar dari paket Flutter Material, sehingga dapat diperlakukan seperti AppBar lain yang telah Anda buat dan diteruskan ke Scaffold . Dalam contoh ini, fungsi default untuk menambahkan tombol "kembali" secara otomatis tetap dipertahankan, dan layar kini memiliki judul.

Tambahkan Anak ke Layar Profil

Widget ProfileScreen juga memiliki argumen opsional bernama anak-anak. Argumen ini menerima daftar widget, dan widget tersebut akan ditempatkan secara vertikal di dalam widget Kolom yang telah digunakan secara internal untuk membuat ProfileScreen. Widget Kolom dalam metode pembuatan ProfileScreen ini akan menempatkan anak-anak yang Anda berikan di atas tombol "Keluar".

Perbarui kode di home.dart untuk menampilkan logo perusahaan di sini, mirip dengan layar masuk.

rumah.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(),
          ],
        ),
      ),
    );
  }
}

Muat ulang aplikasi Anda, dan Anda akan melihat ini di layar:

ebe5792b765dbf87.png

7. Masuk Google Auth Multiplatform

FlutterFire UI juga menyediakan widget dan fungsionalitas untuk autentikasi dengan penyedia pihak ketiga, seperti Google, Twitter, Facebook, Apple, dan Github.

Untuk berintegrasi dengan autentikasi Google, instal plugin firebase_ui_oauth_google resmi dan dependensinya, yang akan menangani alur autentikasi asli. Di terminal, navigasikan ke root proyek flutter Anda dan masukkan perintah berikut:

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

Aktifkan Penyedia Masuk Google

Selanjutnya, aktifkan penyedia Google di Firebase Console :

  1. Navigasikan ke layar Penyedia masuk autentikasi di konsol.
  2. Klik "Tambahkan penyedia baru". 8286fb28be94bf30.png
  3. Pilih "Google". c4e28e6f4974be7f.png
  4. Alihkan tombol berlabel "Aktifkan", dan tekan "Simpan". e74ff86990763826.png
  5. Jika modal muncul dengan informasi tentang mengunduh file konfigurasi, klik "Selesai".
  6. Konfirmasikan bahwa penyedia masuk Google telah ditambahkan. 5329ce0543c90d95.png

Tambahkan tombol masuk Google

Dengan login Google diaktifkan, tambahkan widget yang diperlukan untuk menampilkan tombol login Google bergaya ke halaman login. Arahkan ke file auth_gate.dart dan perbarui kode berikut:

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

Satu-satunya kode baru di sini adalah penambahan GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") ke konfigurasi widget SignInScreen.

Setelah itu, muat ulang aplikasi Anda, dan Anda akan melihat tombol masuk Google.

aca71a46a011bfb5.png

Konfigurasikan tombol masuk

Tombol ini tidak berfungsi tanpa konfigurasi tambahan. Jika Anda mengembangkan dengan Flutter Web, ini adalah satu-satunya langkah yang harus Anda tambahkan agar ini berfungsi. Platform lain memerlukan langkah tambahan, yang akan dibahas sedikit.

  1. Navigasikan ke halaman Penyedia autentikasi di Firebase Console .
  2. Klik pada penyedia Google. 9b3a325c5eca6e49.png
  3. Klik pada panel ekspansi "Konfigurasi Web SDK".
  4. Salin nilai dari 'ID klien Web" 711a79f0d931c60f.png
  5. Kembali ke editor teks Anda, dan perbarui instance GoogleProvider di file auth_gate.dart dengan meneruskan ID ini ke parameter bernama clientId .
GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

Setelah ID klien web dimasukkan, muat ulang aplikasi Anda. Saat Anda menekan tombol "Masuk dengan Google", jendela baru akan muncul (jika Anda menggunakan web) yang memandu Anda melalui alur masuk Google. Awalnya terlihat seperti ini:

14e73e3c9de704bb.png

Konfigurasikan iOS

Agar ini berfungsi di iOS, ada proses konfigurasi tambahan.

  1. Navigasikan ke layar Project Settings di Firebase console . Akan ada kartu yang mencantumkan aplikasi Firebase Anda yang terlihat seperti ini: fefa674acbf213cc.png
  2. Klik di iOS. Perhatikan bahwa nama aplikasi Anda akan berbeda dengan nama saya. Jika milik saya mengatakan "selesai", maka proyek Anda akan mengatakan "mulai", jika Anda menggunakan proyek flutter-codelabs/firebase-auth-flutterfire-ui/start untuk mengikuti codelab ini.
  3. Klik tombol bertuliskan "GoogleServices-Info.plist" untuk mengunduh file konfigurasi yang diperlukan. f89b3192871dfbe3.png
  4. Drag dan drop file yang diunduh ke direktori bernama . /ios/Runner di proyek Flutter Anda.
  5. Buka Xcode dengan menjalankan perintah terminal berikut dari root proyek Anda:

buka ios/Runner.xcworkspace

  1. Klik kanan pada direktori Runner dan pilih Tambahkan File ke "Runner". 858986063a4c5201.png
  2. Pilih GoogleService-Info.plist dari pengelola file.
  3. Kembali ke editor teks Anda (yang bukan Xcode), tambahkan atribut CFBundleURLTypes di bawah ini ke dalam file [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 -->

Jika aplikasi Flutter Anda sudah berjalan di iOS, Anda harus mematikannya sepenuhnya lalu menjalankan kembali aplikasi tersebut. Jika tidak, jalankan aplikasi di iOS.

8. Selamat!

Anda telah menyelesaikan codelab Firebase Auth untuk Flutter. Anda dapat menemukan kode lengkap untuk Codelab ini di direktori "lengkap" di github: Flutter Codelabs

Apa yang telah kami bahas

  • Menyiapkan aplikasi Flutter untuk menggunakan Firebase
  • Menyiapkan proyek Firebase di Firebase console
  • CLI FlutterFire
  • CLI Firebase
  • Menggunakan Otentikasi Firebase
  • Menggunakan FlutterFire UI untuk menangani autentikasi Firebase di aplikasi Flutter Anda dengan mudah

Langkah selanjutnya

Belajarlah lagi

Sparky hadir untuk merayakannya bersama Anda!

2a0ad195769368b1.gif