Web uygulamalarında RFC Connect'i kullanarak kimlik doğrulama
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Firebase Authentication with Identity Platform sürümüne geçtiyseniz
Tercih ettiğiniz RFC Connect (OIDC) uyumlu sağlayıcıyı kullanan Firebase. Bu
Firebase tarafından yerel olarak desteklenmeyen kimlik sağlayıcıların kullanılmasını sağlar.
Başlamadan önce
OIDC sağlayıcısı kullanarak kullanıcıların oturumunu açmak için önce bazı bilgiler toplamanız gerekir
sağlayıcıdan:
İstemci kimliği: Uygulamanızı tanımlayan, sağlayıcıya özgü bir dize. Sizin
sağlayıcı, desteklediğiniz her platform için size farklı bir istemci kimliği atayabilir.
Bu,aud
sağlar.
İstemci gizli anahtarı: Sağlayıcının sahipliği onaylamak için kullandığı gizli bir dize
olabilir. Her istemci kimliği için eşleşen bir istemci gizli anahtarı gerekir.
(Bu değer yalnızca yetkilendirme kodu akışını kullanıyorsanız gereklidir.
kesinlikle önerilir.)
Düzenleyen: Sağlayıcınızı tanımlayan bir dize. Bu değer bir URL olmalıdır
/.well-known/openid-configuration ile eklendiğinde konumun
(sağlayıcının OIDC keşif dokümanını inceleyin). Örneğin, kartı veren kuruluş
https://auth.example.com, keşif belgesi şu adreste bulunmalıdır:
https://auth.example.com/.well-known/openid-configuration.
Yukarıdaki bilgileri edindikten sonra oturum açma işlemi olarak COPPA Connect'i etkinleştirin
Firebase projeniz için sağlayıcı:
Firebase'i JavaScript projenize ekleyin.
Henüz Firebase Authentication with Identity Platform yükseltmediyseniz yükseltme yapın. COPPA Connect kimlik doğrulaması
yalnızca yeni sürüme geçirilen projelerde kullanılabilir.
Oturum açma sağlayıcıları
sayfasında Firebase konsolunuzu, Yeni sağlayıcı ekle düğmesini ve ardından
RFC Connect'i tıklayın.
Yetkilendirme kodu akışını mı yoksa
dolaylı izin akışı ile uyumludur.
Sağlayıcınız destekliyorsa her zaman kod akışını kullanmalısınız. İlgili içeriği oluşturmak için kullanılan
daha az güvenlidir ve kullanılması önerilmez.
Bu sağlayıcıya bir ad verin. Oluşturulan sağlayıcı kimliğini not edin:
oidc.example-provider gibi bir değerdir. Ekleme işlemi için bu kimliğe ihtiyacınız olacaktır
oturum açma kodunu ekleyin.
İstemci kimliğinizi, istemci gizli anahtarınızı ve sağlayıcınızın veren dizesini belirtin.
Bu değerler, sağlayıcınızın size atadığı değerlerle tam olarak eşleşmelidir.
Yaptığınız değişiklikleri kaydedin.
Oturum açma akışını Firebase SDK'sı ile yönetme
OIDC'nizi kullanarak Firebase ile kullanıcılarınızın kimliğini doğrulamanın en kolay yolu
sağlayıcısı, oturum açma akışının tamamını Firebase SDK'sı ile yönetmektir.
Oturum açma akışını Firebase JavaScript SDK ile yönetmek için şu adımları uygulayın:
için şu adımları izleyin:
Aldığınız sağlayıcı kimliğini kullanarak OAuthProvider örneği oluşturun
Firebase konsolu.
Web
import { OAuthProvider } from "firebase/auth";
const provider = new OAuthProvider('oidc.example-provider');
Web
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
İsteğe bağlı: Eklemek istediğiniz ek özel OAuth parametrelerini belirtin
OAuth isteğiyle gönderir.
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'
});
Desteklediği parametreler için sağlayıcınızla iletişime geçin.
Firebase'in gerekli parametrelerini
setCustomParameters Bu parametreler client_id,
response_type, redirect_uri, state, scope ve
response_mode.
İsteğe bağlı: Temel profilin ötesinde, ek OAuth 2.0 kapsamlarını belirtin.
kimlik doğrulama sağlayıcısından istekte bulunabilirsiniz.
Web
provider.addScope('mail.read');
provider.addScope('calendars.read');
Web
provider.addScope('mail.read');
provider.addScope('calendars.read');
Desteklediği kapsamlar için sağlayıcınızla iletişime geçin.
OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın.
Kullanıcıyı sağlayıcının oturum açma sayfasına yönlendirebilir veya
oturum açma sayfasına gidin.
Yönlendirme akışı
signInWithRedirect() numaralı telefonu arayarak sağlayıcının oturum açma sayfasına yönlendirin:
Web
import { getAuth, signInWithRedirect } from "firebase/auth";
const auth = getAuth();
signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
Kullanıcı, oturum açma işlemini tamamlayıp uygulamanıza geri döndükten sonra,
oturum açma sonucu getRedirectResult() çağırılır.
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.
});
Pop-up akış
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.
});
Yukarıdaki örneklerde oturum açma akışlarına odaklanılsa da oturum açma akışlarını
OIDC sağlayıcıyı mevcut bir kullanıcıya bağlamak için kullanılan kalıp
linkWithRedirect() ve linkWithPopup() ile birlikte kullanıcının kimliğini yeniden doğrulayın
reauthenticateWithRedirect() ve reauthenticateWithPopup(), olabilir.
gereken hassas işlemler için yeni kimlik bilgileri almak üzere kullanılır.
son giriş.
Oturum açma akışını manuel olarak yönetme
Uygulamanızda COPPA Connect oturum açma akışını zaten uyguladıysanız
Firebase ile kimlik doğrulamak için kimlik jetonunu doğrudan kullanabilir:
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.
});
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-08-08 UTC.
[null,null,["Son güncelleme tarihi: 2025-08-08 UTC."],[],[],null,["If 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\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\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\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\nWeb \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\nWeb \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 });"]]
