Lihat yang baru dari Firebase di Google I/O 2022. Pelajari lebih lanjut

Otentikasi dengan Firebase Menggunakan Tautan Email

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Anda dapat menggunakan Firebase Authentication untuk membuat pengguna masuk dengan mengirimkan email berisi tautan, yang dapat mereka klik untuk masuk. Dalam prosesnya, alamat email pengguna juga diverifikasi.

Ada banyak manfaat untuk masuk melalui email:

  • Pendaftaran dan masuk dengan gesekan rendah.
  • Risiko penggunaan kembali kata sandi yang lebih rendah di seluruh aplikasi, yang dapat merusak keamanan kata sandi yang dipilih dengan baik sekalipun.
  • Kemampuan untuk mengautentikasi pengguna sekaligus memverifikasi bahwa pengguna adalah pemilik sah dari alamat email.
  • Pengguna hanya memerlukan akun email yang dapat diakses untuk masuk. Tidak diperlukan kepemilikan nomor telepon atau akun media sosial.
  • Seorang pengguna dapat masuk dengan aman tanpa perlu memberikan (atau mengingat) kata sandi, yang dapat merepotkan pada perangkat seluler.
  • Pengguna yang sudah ada yang sebelumnya masuk dengan pengenal email (kata sandi atau federasi) dapat ditingkatkan untuk masuk hanya dengan email. Misalnya, pengguna yang lupa sandi tetap dapat masuk tanpa perlu menyetel ulang sandi.

Sebelum kamu memulai

  1. Jika Anda belum melakukannya, ikuti langkah-langkah di panduan Memulai .

  2. Aktifkan login Link Email untuk project Firebase Anda.

    Untuk membuat pengguna masuk melalui tautan email, Anda harus terlebih dahulu mengaktifkan penyedia Email dan metode masuk tautan Email untuk proyek Firebase Anda:

    1. Di Firebase console , buka bagian Auth .
    2. Pada tab Metode masuk , aktifkan penyedia Email/Kata Sandi . Perhatikan bahwa masuk email/sandi harus diaktifkan untuk menggunakan masuk tautan email.
    3. Di bagian yang sama, aktifkan metode masuk tautan Email (masuk tanpa kata sandi) .
    4. Klik Simpan .

Untuk memulai alur autentikasi, tampilkan antarmuka yang meminta pengguna memberikan alamat email mereka, lalu panggil sendSignInLinkToEmail() untuk meminta Firebase mengirimkan tautan autentikasi ke email pengguna.

  1. Buat objek ActionCodeSettings, yang memberikan petunjuk kepada Firebase tentang cara membuat tautan email. Setel bidang berikut:

    • url : Tautan dalam untuk disematkan dan status tambahan apa pun yang akan diteruskan. Domain tautan harus masuk daftar putih dalam daftar domain resmi Firebase Console, yang dapat ditemukan dengan membuka tab Metode masuk (Otentikasi -> Metode masuk). Tautan akan mengarahkan pengguna ke URL ini jika aplikasi tidak diinstal di perangkat mereka dan aplikasi tidak dapat diinstal.

    • androidPackageName dan IOSBundleId : Aplikasi yang digunakan saat tautan masuk dibuka di perangkat Android atau iOS. Pelajari lebih lanjut tentang cara mengonfigurasi Firebase Dynamic Links untuk membuka tautan tindakan email melalui aplikasi seluler.

    • handleCodeInApp : Setel ke true . Operasi masuk harus selalu diselesaikan di aplikasi tidak seperti tindakan email luar lainnya (reset kata sandi dan verifikasi email). Ini karena, di akhir alur, pengguna diharapkan masuk dan status Auth mereka tetap ada di dalam aplikasi.

    • dynamicLinkDomain : Ketika beberapa domain tautan dinamis khusus ditentukan untuk suatu proyek, tentukan yang mana yang akan digunakan ketika tautan akan dibuka melalui aplikasi seluler tertentu (misalnya, example.page.link ). Jika tidak, domain pertama akan dipilih secara otomatis.

    var acs = ActionCodeSettings(
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be whitelisted in the Firebase Console.
        url: 'https://www.example.com/finishSignUp?cartId=1234',
        // This must be true
        handleCodeInApp: true,
        iOSBundleId: 'com.example.ios',
        androidPackageName: 'com.example.android',
        // installIfNotAvailable
        androidInstallApp: true,
        // minimumVersion
        androidMinimumVersion: '12');
    
  2. Mintalah email kepada pengguna.

  3. Kirim tautan autentikasi ke email pengguna, dan simpan email pengguna jika pengguna menyelesaikan proses masuk email di perangkat yang sama.

    var emailAuth = 'someemail@domain.com';
    FirebaseAuth.instance.sendSignInLinkToEmail(
            email: emailAuth, actionCodeSettings: acs)
        .catchError((onError) => print('Error sending email verification $onError'))
        .then((value) => print('Successfully sent email verification'));
    });
    

Perhatian pada keamanan

Untuk mencegah tautan masuk digunakan untuk masuk sebagai pengguna yang tidak diinginkan atau pada perangkat yang tidak diinginkan, Firebase Auth mengharuskan alamat email pengguna diberikan saat menyelesaikan alur masuk. Agar proses masuk berhasil, alamat email ini harus cocok dengan alamat tujuan awal pengiriman tautan masuk.

Anda dapat menyederhanakan alur ini untuk pengguna yang membuka tautan masuk di perangkat yang sama dengan yang mereka minta tautannya, dengan menyimpan alamat email mereka secara lokal - misalnya menggunakan SharedPreferences - saat Anda mengirim email masuk. Kemudian, gunakan alamat ini untuk menyelesaikan alur. Jangan meneruskan email pengguna di parameter URL pengalihan dan gunakan kembali karena ini dapat mengaktifkan injeksi sesi.

Setelah proses masuk selesai, semua mekanisme masuk yang belum diverifikasi sebelumnya akan dihapus dari pengguna dan sesi apa pun yang ada akan menjadi tidak valid. Misalnya, jika seseorang sebelumnya membuat akun yang belum diverifikasi dengan email dan sandi yang sama, sandi pengguna akan dihapus untuk mencegah peniru yang mengklaim kepemilikan dan membuat akun yang belum diverifikasi itu masuk lagi dengan email dan sandi yang belum diverifikasi.

Pastikan juga Anda menggunakan URL HTTPS dalam produksi untuk menghindari tautan Anda berpotensi dicegat oleh server perantara.

Firebase Authentication menggunakan Firebase Dynamic Links untuk mengirim link email ke perangkat seluler. Untuk penyelesaian masuk melalui aplikasi seluler, aplikasi harus dikonfigurasi untuk mendeteksi tautan aplikasi yang masuk, menguraikan tautan dalam yang mendasarinya, lalu menyelesaikan proses masuk.

  1. Siapkan aplikasi Anda untuk menerima Dynamic Links di Flutter di panduan .

  2. Di pengendali tautan Anda, periksa apakah tautan dimaksudkan untuk autentikasi tautan email dan, jika demikian, selesaikan proses masuk.

    // Confirm the link is a sign-in with email link.
    if (FirebaseAuth.instance.isSignInWithEmailLink(emailLink)) {
      try {
        // The client SDK will parse the code from the link for you.
        final userCredential = await FirebaseAuth.instance
            .signInWithEmailLink(email: emailAuth, emailLink: emailLink);
    
        // You can access the new user via userCredential.user.
        final emailAddress = userCredential.user?.email;
    
        print('Successfully signed in with email link!');
      } catch (error) {
        print('Error signing in with email link.');
      }
    }
    

Anda juga dapat menautkan metode autentikasi ini ke pengguna yang sudah ada. Misalnya pengguna yang sebelumnya diautentikasi dengan penyedia lain, seperti nomor telepon, dapat menambahkan metode masuk ini ke akun mereka yang sudah ada.

Perbedaannya adalah pada paruh kedua operasi:

final authCredential = EmailAuthProvider
    .credentialWithLink(email: emailAuth, emailLink: emailLink.toString());
try {
    await FirebaseAuth.instance.currentUser
        ?.linkWithCredential(authCredential);
} catch (error) {
    print("Error linking emailLink credential.");
}

Ini juga dapat digunakan untuk mengautentikasi ulang pengguna tautan email sebelum menjalankan operasi sensitif.

final authCredential = EmailAuthProvider
    .credentialWithLink(email: emailAuth, emailLink: emailLink.toString());
try {
    await FirebaseAuth.instance.currentUser
        ?.reauthenticateWithCredential(authCredential);
} catch (error) {
    print("Error reauthenticating credential.");
}

Namun, karena alur dapat berakhir di perangkat lain tempat pengguna asli tidak masuk, alur ini mungkin tidak selesai. Dalam hal ini, kesalahan dapat ditunjukkan kepada pengguna untuk memaksa mereka membuka tautan di perangkat yang sama. Beberapa status dapat diteruskan di tautan untuk memberikan informasi tentang jenis operasi dan uid pengguna.

Jika Anda mendukung baik sandi maupun masuk berbasis tautan dengan email, untuk membedakan metode masuk bagi pengguna sandi/tautan, gunakan fetchSignInMethodsForEmail . Ini berguna untuk alur pengidentifikasi-pertama di mana pengguna pertama kali diminta untuk memberikan email mereka dan kemudian disajikan dengan metode masuk:

try {
    final signInMethods =
        await FirebaseAuth.instance.fetchSignInMethodsForEmail(emailAuth);
    final userExists = signInMethods.isNotEmpty;
    final canSignInWithLink = signInMethods
        .contains(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD);
    final canSignInWithPassword = signInMethods
        .contains(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD);
} on FirebaseAuthException catch (exception) {
    switch (exception.code) {
        case "invalid-email":
            print("Not a valid email address.");
            break;
        default:
            print("Unknown error.");
    }
}

Seperti yang dijelaskan di atas, email/sandi dan email/tautan dianggap sebagai EmailAuthProvider yang sama ( PROVIDER_ID yang sama) dengan metode masuk yang berbeda.

Langkah selanjutnya

Setelah pengguna membuat akun baru, akun ini disimpan sebagai bagian dari proyek Firebase Anda, dan dapat digunakan untuk mengidentifikasi pengguna di setiap aplikasi dalam proyek Anda, apa pun metode masuk yang digunakan pengguna.

Di aplikasi Anda, Anda bisa mendapatkan informasi profil dasar pengguna dari objek User . Lihat Kelola Pengguna .

Di Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda bisa mendapatkan ID pengguna unik pengguna yang masuk dari variabel auth , dan menggunakannya untuk mengontrol data apa yang dapat diakses pengguna.

Anda dapat mengizinkan pengguna masuk ke aplikasi Anda menggunakan beberapa penyedia autentikasi dengan menautkan kredensial penyedia autentikasi ) ke akun pengguna yang ada.

Untuk mengeluarkan pengguna, panggil signOut() :

await FirebaseAuth.instance.signOut();