احراز هویت با استفاده از OpenID Connect در برنامه های وب

اگر به Firebase Authentication with Identity Platform ارتقا داده‌اید، می‌توانید کاربران خود را با Firebase و با استفاده از ارائه‌دهنده‌ی سازگار با OpenID Connect (OIDC) مورد نظر خود، احراز هویت کنید. این امر امکان استفاده از ارائه‌دهندگان هویتی را که به طور بومی توسط Firebase پشتیبانی نمی‌شوند، فراهم می‌کند.

قبل از اینکه شروع کنی

برای ورود کاربران با استفاده از ارائه‌دهنده OIDC، ابتدا باید اطلاعاتی را از ارائه‌دهنده جمع‌آوری کنید:

  • شناسه مشتری : رشته‌ای منحصر به فرد برای ارائه‌دهنده که برنامه شما را شناسایی می‌کند. ارائه‌دهنده شما ممکن است برای هر پلتفرمی که پشتیبانی می‌کنید، شناسه مشتری متفاوتی به شما اختصاص دهد. این یکی از مقادیر ادعای aud در توکن‌های شناسه صادر شده توسط ارائه‌دهنده شما است.

  • رمز کلاینت : یک رشته مخفی که ارائه دهنده برای تأیید مالکیت شناسه کلاینت از آن استفاده می‌کند. برای هر شناسه کلاینت، به یک رمز کلاینت منطبق نیاز خواهید داشت. (این مقدار فقط در صورتی لازم است که از جریان کد احراز هویت استفاده می‌کنید، که اکیداً توصیه می‌شود.)

  • صادرکننده : رشته‌ای که ارائه‌دهنده شما را شناسایی می‌کند. این مقدار باید یک URL باشد که وقتی با /.well-known/openid-configuration اضافه می‌شود، محل سند کشف OIDC ارائه‌دهنده باشد. برای مثال، اگر صادرکننده https://auth.example.com باشد، سند کشف باید در https://auth.example.com/.well-known/openid-configuration در دسترس باشد.

پس از اینکه اطلاعات فوق را در اختیار داشتید، OpenID Connect را به عنوان ارائه دهنده ورود به سیستم برای پروژه Firebase خود فعال کنید:

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

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