احراز هویت با استفاده از 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 خود فعال کنید:

  1. Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .

  2. اگر Firebase Authentication with Identity Platform ارتقا نداده‌اید، این کار را انجام دهید. احراز هویت OpenID Connect فقط در پروژه های ارتقا یافته در دسترس است.

  3. در صفحه ارائه دهندگان ورود به سیستم کنسول Firebase ، روی افزودن ارائه دهنده جدید کلیک کنید و سپس روی OpenID Connect کلیک کنید.

  4. انتخاب کنید که آیا از جریان کد مجوز استفاده می کنید یا جریان اعطای ضمنی .

    اگر ارائه دهنده شما از آن پشتیبانی می کند، باید همیشه از جریان کد استفاده کنید . جریان ضمنی امنیت کمتری دارد و استفاده از آن به شدت ممنوع است.

  5. یک نام به این ارائه دهنده بدهید. به شناسه ارائه‌دهنده تولید شده توجه کنید: چیزی مانند oidc.example-provider . وقتی کد ورود به برنامه را اضافه می‌کنید، به این شناسه نیاز دارید.

  6. شناسه مشتری و راز مشتری و رشته صادرکننده ارائه دهنده خود را مشخص کنید. این مقادیر باید دقیقاً با مقادیری مطابقت داشته باشند که ارائه دهنده شما به شما اختصاص داده است.

  7. تغییرات خود را ذخیره کنید

جریان ورود به سیستم را با Firebase SDK مدیریت کنید

ساده‌ترین راه برای احراز هویت کاربران با Firebase با استفاده از ارائه‌دهنده OIDC، مدیریت کل جریان ورود به سیستم با Firebase SDK است.

برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:

  1. با استفاده از شناسه ارائه دهنده ای که در کنسول Firebase دریافت کرده اید، نمونه ای از یک OAuthProvider ایجاد کنید.

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. اختیاری : پارامترهای سفارشی 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 .

  3. اختیاری : محدوده های OAuth 2.0 اضافی را فراتر از نمایه اصلی که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید.

    Web

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Web

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    با ارائه دهنده خود برای دامنه هایی که پشتیبانی می کند تماس بگیرید.

  4. با استفاده از شی ارائه دهنده OAuth با Firebase احراز هویت کنید.

    شما می توانید کاربر را به صفحه ورود به سیستم ارائه دهنده هدایت کنید یا صفحه ورود به سیستم را در یک پنجره بازشو مرورگر باز کنید.

    تغییر مسیر جریان

    با فراخوانی signInWithRedirect() به صفحه ورود به سیستم ارائه دهنده هدایت شوید:

    Web

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web

    firebase.auth().signInWithRedirect(provider);

    پس از اینکه کاربر ورود به سیستم را کامل کرد و به برنامه شما بازگشت، می‌توانید با فراخوانی 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.
  });

    جریان پاپ آپ

    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.
  });

  5. در حالی که مثال‌های بالا بر جریان‌های ورود تمرکز دارند، می‌توانید از همان الگو برای پیوند دادن یک ارائه‌دهنده OIDC به یک کاربر موجود با استفاده از linkWithRedirect() و linkWithPopup() استفاده کنید، و یک کاربر را با reauthenticateWithRedirect() و reauthenticateWithPopup() احراز هویت مجدد کنید. که می تواند برای بازیابی اعتبارنامه های جدید برای عملیات حساسی که نیاز به ورود اخیر دارند استفاده شود.

جریان ورود به سیستم را به صورت دستی مدیریت کنید

اگر قبلاً جریان ورود OpenID Connect را در برنامه خود پیاده‌سازی کرده‌اید، می‌توانید مستقیماً از کد ID برای احراز هویت با 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.
    });