Memproses login pengguna dengan OIDC

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

Sebelum memulai

1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

2. Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.

   Catatan: Jika tidak berencana untuk menyimpan resource yang Anda buat dalam prosedur ini, buatlah project, bukan memilih project yang ada. Setelah menyelesaikan langkah ini, Anda dapat menghapus project, yang menghapus semua resource yang terkait dengan project ini.

   Buka pemilih project

3. Make sure that billing is enabled for your Google Cloud project.

4. Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.

   Catatan: Jika tidak berencana untuk menyimpan resource yang Anda buat dalam prosedur ini, buatlah project, bukan memilih project yang ada. Setelah menyelesaikan langkah ini, Anda dapat menghapus project, yang menghapus semua resource yang terkait dengan project ini.

   Buka pemilih project

5. Make sure that billing is enabled for your Google Cloud project.

6. Aktifkan Identity Platform, dan tambahkan SDK Klien ke aplikasi Anda. Lihat Panduan Memulai untuk mempelajari caranya.

Mengonfigurasi penyedia

1. Buka halaman Identity Provider di Konsol Google Cloud.
   Buka halaman Penyedia Identitas
   

2. Klik Add a Provider, 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 Grants type.

   2. Nama penyedia. Nama ini dapat sama dengan ID penyedia, atau nama kustom. Jika Anda memasukkan nama kustom, klik Edit di samping ID Penyedia untuk menentukan ID (yang harus diawali 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.

      Catatan: Jika penyedia OIDC Anda tidak mematuhi spesifikasi OIDC untuk penemuan, penyedia tersebut tidak akan berfungsi dengan Identity Platform.

   5. Rahasia Klien penyedia.

2. Tambahkan aplikasi Anda ke daftar Authorized Domains. Misalnya, jika URL login aplikasi Anda adalah https://example.com/login, tambahkan example.com.

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

4. Klik Save.

Alur Implisit

1. Masukkan detail berikut untuk mengaktifkan Alur Implisit:

   1. Pilih Alur Implisit di bagian Pilih jenis pemberian.

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

   3. Client-ID penyedia.

   4. Penerbit penyedia. Tampilannya akan terlihat seperti ini 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.

      Catatan: Jika penyedia OIDC Anda tidak mematuhi spesifikasi OIDC untuk penemuan, penyedia tersebut tidak akan berfungsi dengan Identity Platform.

2. Tambahkan aplikasi Anda ke daftar Authorized Domains. Misalnya, jika URL login aplikasi Anda adalah https://example.com/login, tambahkan example.com.

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

4. Klik Save.

Pengguna sedang login

Ada dua cara untuk memproses login pengguna dengan OIDC:

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

• Menggunakan token ID penyedia OIDC. Dengan cara ini, Anda dianggap sudah memiliki token OIDC.

Membuat pengguna login dengan OAuth

Untuk login menggunakan OAuth:

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

   Web versi 9

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider("oidc.myProvider");
   auth_oidc_provider_create.js

   Web versi 8

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

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

   Pop-up

   Web versi 9

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

   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 = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_popup.js

   Web versi 8

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle error.
     });
   oidc.js

   Pengalihan

   Untuk mengalihkan ke halaman login, panggil signInWithRedirect():

   Web versi 9

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

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

   Web versi 8

   firebase.auth().signInWithRedirect(provider).catch((error) => {
     // Handle error.
   });
   oidc.js

   Lalu, panggil getRedirectResult() untuk mendapatkan hasil saat pengguna kembali ke aplikasi Anda:

   Web versi 9

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .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 = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_redirect_result.js

   Web versi 8

   // On return.
   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

Di akhir dari kedua alur tersebut, Anda bisa mendapatkan token ID OIDC menggunakan kolom result.credential.idToken.

Membuat pengguna login secara langsung

Untuk memproses login pengguna dengan token ID OIDC secara langsung, lakukan hal berikut:

1. Lakukan inisialisasi instance OAuthProvider dengan ID penyedia yang Anda konfigurasi di bagian sebelumnya. ID penyedia harus diawali dengan oidc.. Kemudian, buat OAuthCredential dan panggil signInWithCredential() untuk memproses login pengguna.

   Web versi 9

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

   import { getAuth, OAuthProvider, signInWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   const credential = provider.credential({
     idToken: oidcIdToken,
   });
   signInWithCredential(auth, credential)
     .then((result) => {
       // User is signed in.
       const newCredential = OAuthProvider.credentialFromResult(result);
       // This gives you a new 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 = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_direct_sign_in.js

   Web versi 8

   const credential = provider.credential(oidcIdToken, null);
   
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // User is signed in.
       // User now has a odic.myProvider UserInfo in providerData.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

Menautkan akun pengguna

Jika pengguna telah login ke aplikasi Anda menggunakan metode lain (seperti email/sandi), Anda dapat menautkan akun mereka yang sudah ada ke penyedia OIDC menggunakan linkWithPopup() atau linkWithRedirect(): Misalnya, kita dapat menautkan dengan Akun Google:

Web versi 9

Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

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

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
auth_link_with_popup.js

Web versi 8

auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
link-multiple-accounts.js

Langkah selanjutnya

• Membuat pengguna login dengan SAML
• Menampilkan domain kustom selama login
• Mengelola penyedia OIDC dan SAML secara terprogram