Memproses login pengguna dengan OIDC

Dokumen ini menunjukkan cara menggunakan Identity Platform untuk membuat pengguna login dengan penyedia OpenID Connect (OIDC).

Sebelum memulai

  1. Login ke akun Google Cloud Anda. Jika Anda baru menggunakan Google Cloud, buat akun untuk mengevaluasi performa produk kami dalam skenario dunia nyata. Pelanggan baru juga mendapatkan kredit gratis senilai $300 untuk menjalankan, menguji, dan men-deploy workload.

  2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Roles required to select or create a project

    • Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
    • Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

    Go to project selector

  3. Verify that billing is enabled for your Google Cloud project.

  4. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Roles required to select or create a project

    • Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
    • Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

    Go to project selector

  5. Verify that billing is enabled for your Google Cloud project.

  6. Aktifkan Identity Platform, dan tambahkan SDK klien ke aplikasi Anda. Lihat Mulai Cepat untuk mempelajari caranya.

Mengonfigurasi penyedia

  1. Buka halaman Penyedia Identitas di konsol Google Cloud .
    Buka halaman Penyedia Identitas

  2. Klik Tambahkan Penyedia, lalu pilih OpenID Connect dari daftar.

Alur Kode Otorisasi

  1. Masukkan detail berikut untuk mengaktifkan Alur Kode Otorisasi:

    1. Pilih Code Flow di bagian Choose grant type.

    2. Nama penyedia. ID ini bisa sama dengan ID penyedia, atau nama kustom. Jika Anda memasukkan nama kustom, klik Edit di samping ID Penyedia untuk menentukan ID (yang harus dimulai dengan oidc.).

    3. Client ID penyedia.

    4. Penerbit penyedia. Tampilannya akan terlihat seperti https://example.com. Identity Platform menggunakan URL ini untuk menemukan dokumen penemuan OIDC (biasanya ditemukan di /.well-known/openid-configuration), yang menentukan endpoint OAuth dan kunci publik penyedia.

    5. Rahasia Klien penyedia.

  2. Tambahkan aplikasi Anda ke daftar Domain yang Diizinkan. Misalnya, jika URL login aplikasi Anda adalah https://example.com/login, tambahkan example.com.

  3. Konfigurasi URL callback Identity Platform sebagai URL pengalihan dengan penyedia OIDC Anda. URL akan terlihat seperti https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

  4. Klik Simpan.

Alur Implisit

  1. Masukkan detail berikut untuk mengaktifkan Alur Implisit:

    1. Pilih Implicit Flow di bagian Choose grant type.

    2. Nama penyedia. ID ini bisa sama dengan ID penyedia, atau nama kustom. Jika Anda memasukkan nama kustom, klik Edit di samping ID Penyedia untuk menentukan ID (yang harus dimulai dengan oidc.).

    3. Client ID penyedia.

    4. Penerbit penyedia. URL ini akan terlihat seperti https://example.com. Identity Platform menggunakan URL ini untuk menemukan dokumen penemuan OIDC (biasanya ditemukan di /.well-known/openid-configuration), yang menentukan endpoint OAuth dan kunci publik penyedia.

  2. Tambahkan aplikasi Anda ke daftar Domain yang Diizinkan. Misalnya, jika URL login aplikasi Anda adalah https://example.com/login, tambahkan example.com.

  3. Konfigurasi URL callback Identity Platform sebagai URL pengalihan dengan penyedia OIDC Anda. URL akan terlihat seperti https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

  4. Klik Simpan.

Pengguna sedang login

Ada dua cara untuk login pengguna dengan OIDC:

  • Menggunakan alur OAuth. Dengan cara ini, handshake OAuth akan selesai untuk Anda. Berdasarkan pemilihan Alur Kode Otorisasi/Alur Implisit pada langkah mengonfigurasi penyedia, server GCIP memilih alur yang diinginkan untuk berkomunikasi dengan Penyedia Identitas.

  • Menggunakan token ID penyedia OIDC. Cara ini mengasumsikan bahwa Anda sudah memiliki token OIDC.

Memproses login pengguna dengan OAuth

Untuk login menggunakan OAuth:

  1. Buat instance OAuthProvider dengan ID penyedia yang Anda konfigurasi di bagian sebelumnya. ID penyedia harus dimulai dengan oidc..

    Web versi 9

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.myProvider");

    Web versi 8

    const provider = new firebase.auth.OAuthProvider('oidc.myProvider');

  2. Mulai alur login. Anda dapat memilih untuk menggunakan pop-up atau pengalihan.

    Web versi 9

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

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    const credential = OAuthProvider.credentialFromResult(result);
    // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential