Melakukan Autentikasi Menggunakan OpenID Connect di aplikasi web

Jika telah mengupgrade ke Firebase Authentication with Identity Platform, Anda dapat mengautentikasi pengguna dengan Firebase menggunakan penyedia yang mendukung OpenID Connect (OIDC) pilihan Anda. Hal ini memungkinkan Anda menggunakan penyedia identitas yang tidak didukung secara native oleh Firebase.

Sebelum memulai

Untuk memproses login pengguna menggunakan penyedia OIDC, Anda harus terlebih dahulu mengumpulkan sejumlah informasi dari penyedia:

  • Client ID: String yang unik untuk penyedia yang mengidentifikasi aplikasi Anda. Penyedia dapat menetapkan client ID yang berbeda untuk setiap platform yang Anda dukung. Ini adalah salah satu nilai dari klaim aud dalam token ID yang dikeluarkan oleh penyedia.

  • Rahasia klien: String rahasia yang digunakan penyedia untuk mengonfirmasi kepemilikan client ID. Untuk setiap client ID, Anda memerlukan rahasia klien yang cocok. (Nilai ini hanya diperlukan jika Anda menggunakan alur kode otorisasi, yang sangat direkomendasikan.)

  • Penerbit: String yang mengidentifikasi penyedia Anda. Nilai ini harus berupa URL yang, jika ditambahkan dengan /.well-known/openid-configuration, merupakan lokasi dokumen penemuan OIDC penyedia. Misalnya, jika penerbitnya adalah https://auth.example.com, dokumen penemuan harus tersedia di https://auth.example.com/.well-known/openid-configuration.

Setelah memiliki informasi di atas, aktifkan OpenID Connect sebagai penyedia login untuk project Firebase Anda:

  1. Tambahkan Firebase ke project JavaScript.

  2. Jika Anda belum mengupgrade ke Firebase Authentication with Identity Platform, lakukan hal tersebut terlebih dahulu. Autentikasi OpenID Connect hanya tersedia di project yang telah diupgrade.

  3. Pada halaman Sign-in providers di Firebase console, klik Add new provider, lalu klik OpenID Connect.

  4. Pilih apakah Anda akan menggunakan alur kode otorisasi atau alur pemberian implisit.

    Anda harus selalu menggunakan alur kode jika penyedia mendukungnya. Alur implisit kurang aman dan sangat tidak dianjurkan.

  5. Beri nama untuk penyedia ini. Catat ID penyedia yang dibuat: seperti oidc.example-provider. Anda akan memerlukan ID ini saat menambahkan kode login ke aplikasi.

  6. Tentukan client ID dan rahasia klien, serta string penerbit penyedia Anda. Nilai ini harus sama persis dengan nilai yang ditetapkan penyedia untuk Anda.

  7. Simpan perubahan Anda.

Menangani alur login dengan Firebase SDK

Cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan penyedia OIDC Anda adalah dengan menangani seluruh alur login dengan Firebase SDK.

Untuk menangani alur login dengan Firebase JavaScript SDK, ikuti langkah-langkah berikut:

  1. Buat instance OAuthProvider menggunakan ID penyedia yang Anda dapatkan di Firebase console.

    Web 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web 

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. Opsional: Tentukan parameter OAuth kustom tambahan yang ingin dikirim dengan permintaan OAuth.

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Tanyakan kepada penyedia Anda untuk mengetahui parameter yang didukungnya. Perlu diperhatikan bahwa Anda tidak dapat meneruskan parameter yang diperlukan Firebase dengan setCustomParameters. Beberapa parameter tersebut antara lain adalah client_id, response_type, redirect_uri, state, scope, dan response_mode.

  3. Opsional: Tentukan cakupan OAuth 2.0 tambahan di luar profil dasar yang ingin diminta dari penyedia autentikasi.

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Tanyakan kepada penyedia Anda untuk mengetahui cakupan yang didukungnya.

  4. Lakukan autentikasi dengan Firebase menggunakan objek penyedia OAuth.

    Anda dapat mengalihkan pengguna ke halaman login penyedia atau membuka halaman login di jendela browser pop-up.

    Alur pengalihan

    Alihkan ke halaman login penyedia dengan memanggil signInWithRedirect():

    Web 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

    Setelah pengguna menyelesaikan proses login dan kembali ke aplikasi Anda, Anda bisa mendapatkan hasil login dengan memanggil getRedirectResult().

    Web 

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Alur pop-up

    Web 

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

  5. Meskipun contoh di atas berfokus pada alur login, Anda dapat menggunakan pola yang sama untuk menautkan penyedia OIDC kepada pengguna yang ada menggunakan linkWithRedirect() dan linkWithPopup(), lalu mengautentikasi ulang pengguna dengan reauthenticateWithRedirect() dan reauthenticateWithPopup(), yang dapat digunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan login terbaru.

Menangani alur login secara manual

Jika sudah menerapkan alur login OpenID Connect di aplikasi, Anda dapat langsung menggunakan token ID untuk melakukan autentikasi dengan Firebase:

Web 

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Web 

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });