Melakukan Autentikasi Menggunakan OpenID Connect di aplikasi web
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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:
Tambahkan Firebase ke project JavaScript.
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.
Pada halaman Sign-in providers
di Firebase console, klik Add new provider, lalu klik
OpenID Connect.
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.
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.
Tentukan client ID dan rahasia klien, serta string penerbit penyedia Anda.
Nilai ini harus sama persis dengan nilai yang ditetapkan penyedia untuk Anda.
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:
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');
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.
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.
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.
});
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.
});
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-08 UTC.
[null,null,["Terakhir diperbarui pada 2025-08-08 UTC."],[],[],null,["# Authenticate Using OpenID Connect in web apps\n\nIf you've upgraded to Firebase Authentication with Identity Platform, you can authenticate your users with\nFirebase using the OpenID Connect (OIDC) compliant provider of your choice. This\nmakes it possible to use identity providers not natively supported by Firebase.\n\nBefore you begin\n----------------\n\nTo sign in users using an OIDC provider, you must first collect some information\nfrom the provider:\n\n- **Client ID** : A string unique to the provider that identifies your app. Your\n provider might assign you a different client ID for each platform you support.\n This is one of the values of the `aud` claim in ID tokens issued by your\n provider.\n\n- **Client secret** : A secret string that the provider uses to confirm ownership\n of a client ID. For every client ID, you will need a matching client secret.\n (This value is required only if you're using the *auth code flow*, which is\n strongly recommended.)\n\n- **Issuer** : A string that identifies your provider. This value must be a URL\n that, when appended with `/.well-known/openid-configuration`, is the location\n of the provider's OIDC discovery document. For example, if the issuer is\n `https://auth.example.com`, the discovery document must be available at\n `https://auth.example.com/.well-known/openid-configuration`.\n\nAfter you have the above information, enable OpenID Connect as a sign-in\nprovider for your Firebase project:\n\n1. [Add Firebase to your JavaScript project](/docs/web/setup).\n\n2. If you haven't upgraded to Firebase Authentication with Identity Platform, do so. OpenID Connect authentication\n is only available in upgraded projects.\n\n3. On the [**Sign-in providers**](//console.firebase.google.com/project/_/authentication/providers)\n page of the Firebase console, click **Add new provider** , and then click\n **OpenID Connect**.\n\n4. Select whether you will be using the *authorization code flow* or the\n *implicit grant flow*.\n\n **You should use always the code flow if your provider supports it**. The\n implicit flow is less secure and using it is strongly discouraged.\n5. Give a name to this provider. Note the provider ID that's generated:\n something like `oidc.example-provider`. You'll need this ID when you add\n sign-in code to your app.\n\n6. Specify your client ID and client secret, and your provider's issuer string.\n These values must exactly match the values your provider assigned to you.\n\n7. Save your changes.\n\nHandle the sign-in flow with the Firebase SDK\n---------------------------------------------\n\nThe easiest way to authenticate your users with Firebase using your OIDC\nprovider is to handle the entire sign-in flow with the Firebase SDK.\n\nTo handle the sign-in flow with the Firebase JavaScript SDK, follow these\nsteps:\n\n1. Create an instance of an `OAuthProvider` using the provider ID you got in\n the Firebase console.\n\n ### Web\n\n import { OAuthProvider } from \"firebase/auth\";\n\n const provider = new OAuthProvider('oidc.example-provider');\n\n ### Web\n\n var provider = new firebase.auth.OAuthProvider('oidc.example-provider');\n\n2. **Optional**: Specify additional custom OAuth parameters that you want to\n send with the OAuth request.\n\n ### Web\n\n provider.setCustomParameters({\n // Target specific email with login hint.\n login_hint: 'user@example.com'\n });\n\n ### Web\n\n provider.setCustomParameters({\n // Target specific email with login hint.\n login_hint: 'user@example.com'\n });\n\n Check with your provider for the parameters it supports.\n Note that you can't pass Firebase-required parameters with\n `setCustomParameters`. These parameters are `client_id`,\n `response_type`, `redirect_uri`, `state`, `scope` and\n `response_mode`.\n3. **Optional**: Specify additional OAuth 2.0 scopes beyond basic profile that\n you want to request from the authentication provider.\n\n ### Web\n\n provider.addScope('mail.read');\n provider.addScope('calendars.read');\n\n ### Web\n\n provider.addScope('mail.read');\n provider.addScope('calendars.read');\n\n Check with your provider for the scopes it supports.\n4. Authenticate with Firebase using the OAuth provider object.\n\n You can either redirect the user to the provider's sign-in page or open the\n sign-in page in a pop-up browser window.\n\n **Redirect flow**\n\n Redirect to the provider sign-in page by calling `signInWithRedirect()`: \n\n ### Web\n\n import { getAuth, signInWithRedirect } from \"firebase/auth\";\n\n const auth = getAuth();\n signInWithRedirect(auth, provider);\n\n ### Web\n\n firebase.auth().signInWithRedirect(provider);\n\n After the user completes sign-in and returns to your app, you can obtain the\n sign-in result by calling `getRedirectResult()`. \n\n ### Web\n\n import { getAuth, getRedirectResult, OAuthProvider } from \"firebase/auth\";\n\n const auth = getAuth();\n getRedirectResult(auth)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n ### Web\n\n firebase.auth().getRedirectResult()\n .then((result) =\u003e {\n // IdP data available in result.additionalUserInfo.profile.\n // ...\n\n /** @type {firebase.auth.OAuthCredential} */\n var credential = result.credential;\n\n // OAuth access and id tokens can also be retrieved:\n var accessToken = credential.accessToken;\n var idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n **Pop-up flow** \n\n ### Web\n\n import { getAuth, signInWithPopup, OAuthProvider } from \"firebase/auth\";\n\n const auth = getAuth();\n signInWithPopup(auth, provider)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available using getAdditionalUserInfo(result)\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n ### Web\n\n firebase.auth().signInWithPopup(provider)\n .then((result) =\u003e {\n // IdP data available in result.additionalUserInfo.profile.\n // ...\n\n /** @type {firebase.auth.OAuthCredential} */\n var credential = result.credential;\n\n // OAuth access and id tokens can also be retrieved:\n var accessToken = credential.accessToken;\n var idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n5. While the above examples focus on sign-in flows, you can use the same\n pattern to link an OIDC provider to an existing user using\n `linkWithRedirect()` and `linkWithPopup()`, and re-authenticate a user with\n `reauthenticateWithRedirect()` and `reauthenticateWithPopup()`, which can be\n used to retrieve fresh credentials for sensitive operations that require\n recent login.\n\nHandle the sign-in flow manually\n--------------------------------\n\nIf you've already implemented the OpenID Connect sign-in flow in your app, you\ncan use the ID token directly to authenticate with Firebase: \n\n### Web\n\n import { getAuth, signInWithCredential, OAuthProvider } from \"firebase/auth\";\n\n const provider = new OAuthProvider(\"oidc.example-provider\");\n const credential = provider.credential({\n idToken: idToken,\n });\n signInWithCredential(getAuth(), credential)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n### Web\n\n const provider = new OAuthProvider(\"oidc.example-provider\");\n const credential = provider.credential({\n idToken: idToken,\n });\n firebase.auth().signInWithCredential(credential)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });"]]
