اصالت‌سنجی بااستفاده از OpenID Connect در برنامه‌های وب

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

قبل از شروع

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

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

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

  • صادرکننده: رشته‌ای که ارائه‌دهنده شما را شناسایی می‌کند. این مقدار باید نشانی وبی باشد که وقتی به /.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، به امنیت > اصالت‌سنجی بروید.

  4. در برگه روش ورود به سیستم، روی افزودن ارائه‌دهنده جدید کلیک کنید، و سپس روی OpenID Connect کلیک کنید.

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

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

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

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

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

مدیریت جریان ورود به سیستم با «کیت توسعه نرم‌افزار Firebase»

آسان‌ترین راه برای اصالت‌سنجی کاربران با Firebase بااستفاده از ارائه‌دهنده OIDC این است که کل جریان ورود به سیستم را با «کیت توسعه نرم‌افزار Firebase» مدیریت کنید.

برای مدیریت جریان ورود به سیستم با «کیت توسعه نرم‌افزار جاوا اسکریپت Firebase»، این مراحل را دنبال کنید:

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