احراز هویت با استفاده از OpenID Connect در برنامه های وب
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
اگر به Firebase Authentication with Identity Platform ارتقا داده اید، می توانید با استفاده از ارائه دهنده سازگار با OpenID Connect (OIDC) انتخابی خود، کاربران خود را با Firebase احراز هویت کنید. این امکان استفاده از ارائه دهندگان هویت را فراهم می کند که به طور بومی توسط Firebase پشتیبانی نمی شوند.
قبل از شروع
برای ورود کاربران با استفاده از ارائه‌دهنده OIDC، ابتدا باید اطلاعاتی را از ارائه‌دهنده جمع‌آوری کنید:
Client ID : رشته ای منحصر به فرد برای ارائه دهنده که برنامه شما را شناسایی می کند. ممکن است ارائه‌دهنده شما برای هر پلتفرمی که پشتیبانی می‌کنید یک شناسه مشتری متفاوت به شما اختصاص دهد. این یکی از مقادیر ادعای aud در نشانه های شناسه صادر شده توسط ارائه دهنده شما است.
Client Secret : یک رشته مخفی که ارائه دهنده برای تأیید مالکیت شناسه مشتری استفاده می کند. برای هر شناسه مشتری، به یک رمز مشتری منطبق نیاز دارید. (این مقدار فقط در صورتی لازم است که از جریان کد احراز هویت استفاده می کنید که اکیداً توصیه می شود.)
صادرکننده : رشته ای که ارائه دهنده شما را مشخص می کند. این مقدار باید یک URL باشد که وقتی با /.well-known/openid-configuration ضمیمه شود، محل سند کشف OIDC ارائه دهنده باشد. برای مثال، اگر صادرکننده https://auth.example.com باشد، سند کشف باید در https://auth.example.com/.well-known/openid-configuration موجود باشد.
پس از دریافت اطلاعات بالا، OpenID Connect را به عنوان ارائه‌دهنده ورود به سیستم برای پروژه Firebase خود فعال کنید:
اگر Firebase Authentication with Identity Platform ارتقا نداده‌اید، این کار را انجام دهید. احراز هویت OpenID Connect فقط در پروژه های ارتقا یافته در دسترس است.
در صفحه ارائه دهندگان ورود به سیستم کنسول Firebase ، روی افزودن ارائه دهنده جدید کلیک کنید و سپس روی OpenID Connect کلیک کنید.
انتخاب کنید که آیا از جریان کد مجوز استفاده می کنید یا جریان اعطای ضمنی .
اگر ارائه دهنده شما از آن پشتیبانی می کند، باید همیشه از جریان کد استفاده کنید . جریان ضمنی امنیت کمتری دارد و استفاده از آن به شدت ممنوع است.
یک نام به این ارائه دهنده بدهید. به شناسه ارائه‌دهنده تولید شده توجه کنید: چیزی مانند oidc.example-provider . وقتی کد ورود به برنامه را اضافه می‌کنید، به این شناسه نیاز دارید.
شناسه مشتری و راز مشتری و رشته صادرکننده ارائه دهنده خود را مشخص کنید. این مقادیر باید دقیقاً با مقادیری مطابقت داشته باشند که ارائه دهنده شما به شما اختصاص داده است.
تغییرات خود را ذخیره کنید
جریان ورود به سیستم را با Firebase SDK مدیریت کنید
ساده‌ترین راه برای احراز هویت کاربران با Firebase با استفاده از ارائه‌دهنده OIDC، مدیریت کل جریان ورود به سیستم با Firebase SDK است.
برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:
با استفاده از شناسه ارائه دهنده ای که در کنسول Firebase دریافت کرده اید، نمونه ای از یک OAuthProvider ایجاد کنید.
اختیاری : پارامترهای سفارشی OAuth اضافی را که می خواهید با درخواست 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'});
با ارائه دهنده خود برای پارامترهایی که پشتیبانی می کند بررسی کنید. توجه داشته باشید که نمی‌توانید پارامترهای مورد نیاز Firebase را با setCustomParameters ارسال کنید. این پارامترها عبارتند از client_id , response_type , redirect_uri , state , scope و response_mode .
اختیاری : محدوده های OAuth 2.0 اضافی را فراتر از نمایه اصلی که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید.
پس از اینکه کاربر ورود به سیستم را کامل کرد و به برنامه شما بازگشت، می‌توانید با فراخوانی getRedirectResult() نتیجه ورود به سیستم را دریافت کنید.
Web
import{getAuth,getRedirectResult,OAuthProvider}from"firebase/auth";constauth=getAuth();getRedirectResult(auth).then((result)=>{// User is signed in.// IdP data available in result.additionalUserInfo.profile.// Get the OAuth access token and ID Tokenconstcredential=OAuthProvider.credentialFromResult(result);constaccessToken=credential.accessToken;constidToken=credential.idToken;}).catch((error)=>{// Handle error.});
Web
firebase.auth().getRedirectResult().then((result)=>{// IdP data available in result.additionalUserInfo.profile.// .../** @type {firebase.auth.OAuthCredential} */varcredential=result.credential;// OAuth access and id tokens can also be retrieved:varaccessToken=credential.accessToken;varidToken=credential.idToken;}).catch((error)=>{// Handle error.});
جریان پاپ آپ
Web
import{getAuth,signInWithPopup,OAuthProvider}from"firebase/auth";constauth=getAuth();signInWithPopup(auth,provider).then((result)=>{// User is signed in.// IdP data available using getAdditionalUserInfo(result)// Get the OAuth access token and ID Tokenconstcredential=OAuthProvider.credentialFromResult(result);constaccessToken=credential.accessToken;constidToken=credential.idToken;}).catch((error)=>{// Handle error.});
Web
firebase.auth().signInWithPopup(provider).then((result)=>{// IdP data available in result.additionalUserInfo.profile.// .../** @type {firebase.auth.OAuthCredential} */varcredential=result.credential;// OAuth access and id tokens can also be retrieved:varaccessToken=credential.accessToken;varidToken=credential.idToken;}).catch((error)=>{// Handle error.});
در حالی که مثال‌های بالا بر جریان‌های ورود تمرکز دارند، می‌توانید از همان الگو برای پیوند دادن یک ارائه‌دهنده OIDC به یک کاربر موجود با استفاده از linkWithRedirect() و linkWithPopup() استفاده کنید، و یک کاربر را با reauthenticateWithRedirect() و reauthenticateWithPopup() احراز هویت مجدد کنید. که می تواند برای بازیابی اعتبارنامه های جدید برای عملیات حساسی که نیاز به ورود اخیر دارند استفاده شود.
جریان ورود به سیستم را به صورت دستی مدیریت کنید
اگر قبلاً جریان ورود OpenID Connect را در برنامه خود پیاده‌سازی کرده‌اید، می‌توانید مستقیماً از کد ID برای احراز هویت با Firebase استفاده کنید:
Web
import{getAuth,signInWithCredential,OAuthProvider}from"firebase/auth";constprovider=newOAuthProvider("oidc.example-provider");constcredential=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 Tokenconstcredential=OAuthProvider.credentialFromResult(result);constaccessToken=credential.accessToken;constidToken=credential.idToken;}).catch((error)=>{// Handle error.});
Web
constprovider=newOAuthProvider("oidc.example-provider");constcredential=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 Tokenconstcredential=OAuthProvider.credentialFromResult(result);constaccessToken=credential.accessToken;constidToken=credential.idToken;}).catch((error)=>{// Handle error.});
تاریخ آخرین بهروزرسانی 2025-08-30 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-08-30 بهوقت ساعت هماهنگ جهانی."],[],[],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 });"]]
