Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Otentikasi Menggunakan OpenID Connect di aplikasi web

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

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

Sebelum kamu memulai

Untuk memasukkan pengguna menggunakan penyedia OIDC, Anda harus terlebih dahulu mengumpulkan beberapa informasi dari penyedia:

  • ID Klien : String unik untuk penyedia yang mengidentifikasi aplikasi Anda. Penyedia Anda mungkin memberi Anda ID klien yang berbeda untuk setiap platform yang Anda dukung. Ini adalah salah satu nilai dari klaim aud dalam token ID yang dikeluarkan oleh penyedia Anda.

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

  • Penerbit : String yang mengidentifikasi penyedia Anda. Nilai ini harus berupa URL yang, jika ditambahkan dengan /.well-known/openid-configuration , adalah 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 Anda memiliki informasi di atas, aktifkan OpenID Connect sebagai penyedia masuk untuk proyek Firebase Anda:

  1. Tambahkan Firebase ke proyek JavaScript Anda .

  2. Jika Anda belum mengupgrade ke Firebase Authentication dengan Identity Platform, lakukanlah. Otentikasi OpenID Connect hanya tersedia di proyek yang ditingkatkan.

  3. Di laman Penyedia masuk di Firebase console, klik Tambahkan penyedia baru , lalu klik OpenID Connect .

  4. Pilih apakah Anda akan menggunakan aliran kode otorisasi atau aliran hibah implisit .

    Anda harus selalu menggunakan aliran kode jika penyedia Anda mendukungnya . Aliran implisit kurang aman dan penggunaannya sangat tidak disarankan.

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

  6. Tentukan ID klien dan rahasia klien Anda, dan string penerbit penyedia Anda. Nilai-nilai ini harus sama persis dengan nilai yang diberikan penyedia Anda kepada Anda.

  7. Simpan perubahan Anda.

Tangani alur masuk dengan Firebase SDK

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

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

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

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('oidc.example-provider');
    

    Web version 8

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
    
  2. Opsional : Tentukan parameter OAuth khusus tambahan yang ingin Anda kirim dengan permintaan OAuth.

    Web version 9

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

    Web version 8

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

    Hubungi penyedia Anda untuk parameter yang didukungnya. Perhatikan bahwa Anda tidak dapat meneruskan parameter yang diperlukan Firebase dengan setCustomParameters . Parameter tersebut 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 Anda minta dari penyedia autentikasi.

    Web version 9

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

    Web version 8

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

    Hubungi penyedia Anda untuk cakupan yang didukungnya.

  4. Mengautentikasi dengan Firebase menggunakan objek penyedia OAuth.

    Anda dapat mengarahkan pengguna ke halaman masuk penyedia atau membuka halaman masuk di jendela browser pop-up.

    Arahkan ulang aliran

    Arahkan ulang ke halaman masuk penyedia dengan memanggil signInWithRedirect() :

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    

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

    Web version 9

    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 version 8

    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.
      });
    

    Aliran pop-up

    Web version 9

    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 version 8

    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. Sementara contoh di atas berfokus pada alur masuk, Anda dapat menggunakan pola yang sama untuk menautkan penyedia OIDC ke pengguna yang ada menggunakan linkWithRedirect() dan linkWithPopup() , dan mengautentikasi ulang pengguna dengan reauthenticateWithRedirect( reauthenticateWithRedirect() dan reauthenticateWithPopup( reauthenticateWithPopup() , yang dapat digunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan login terbaru.

Tangani alur masuk secara manual

Jika Anda telah menerapkan alur masuk OpenID Connect di aplikasi, Anda dapat menggunakan token ID secara langsung untuk mengautentikasi dengan Firebase:

Web version 9

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 version 8

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.
    });