المصادقة باستخدام OpenID Connect في تطبيقات الويب

في حال الترقية إلى Firebase Authentication with Identity Platform، يمكنك مصادقة المستخدمين من خلال Firebase باستخدام الموفّر المتوافق مع OpenID Connect (OIDC) الذي تختاره. هذا النمط تُتيح استخدام موفّري هوية غير معتمدين في Firebase في الأصل.

قبل البدء

لتسجيل دخول المستخدمين باستخدام موفِّر OIDC، عليك أولاً جمع بعض المعلومات. من المزود:

  • Client-ID (رقم تعريف العميل): سلسلة فريدة للمقدّم الذي يعرّف تطبيقك. يمكن أن يعيّن لك مزوّد الخدمة معرّف عميل مختلف لكل نظام أساسي تدعمه. هذه إحدى قيم المطالبة "aud" في الرموز المميّزة للمعرّف الصادر عن المستخدم.

  • سر العميل: سلسلة سرية يستخدمها موفّر الخدمة لتأكيد الملكية لمعرف العميل. يجب توفير سر عميل مطابق لكل معرِّف عميل. (هذه القيمة مطلوبة فقط إذا كنت تستخدم مسار رمز المصادقة، وهو ننصح باستخدامها بشدة).

  • جهة الإصدار: سلسلة تحدِّد هوية مقدّم الخدمة. يجب أن تكون هذه القيمة عنوان URL يشير إلى الموقع الجغرافي عند إلحاقه بـ /.well-known/openid-configuration مستند اكتشاف OIDC الخاص بمزود الخدمة. على سبيل المثال، إذا كانت جهة الإصدار https://auth.example.com، يجب أن يكون مستند Discovery متاحًا على https://auth.example.com/.well-known/openid-configuration

بعد حصولك على المعلومات المذكورة أعلاه، فعّل OpenID Connect كتسجيل دخول. مقدم الخدمة لمشروعك على Firebase:

  1. أضِف Firebase إلى مشروع JavaScript.

  2. في حال عدم الترقية إلى Firebase Authentication with Identity Platform، يُرجى إجراء ذلك. مصادقة OpenID Connect لا تتوفّر إلا في المشاريع التي تمت ترقيتها.

  3. على مقدّمي الخدمات الذين يسجّلون الدخول في وحدة تحكم Firebase، وانقر على إضافة موفِّر جديد، ثم انقر على ربط OpenID.

  4. اختَر ما إذا كنت ستستخدم مسار رمز التفويض أو تدفق المنح الضمني

    يجب استخدام مسار الرمز دائمًا إذا كان مقدّم الخدمة يتيح ذلك. تشير رسالة الأشكال البيانية التدفق الضمني أقل أمانًا ولا ننصح باستخدامه بشدة.

  5. يُرجى تسمية مقدّم الخدمة هذا. دوِّن رقم تعريف موفّر الخدمة الذي يتم إنشاؤه: شيء مثل oidc.example-provider. ستحتاج إلى رقم التعريف هذا عند إضافة رمز تسجيل الدخول إلى تطبيقك.

  6. حدِّد معرّف العميل وسر العميل وسلسلة جهة الإصدار الخاصة بموفِّر الخدمة. يجب أن تتطابق هذه القيم تمامًا مع القيم التي عيّنها لك مزوّد الخدمة.

  7. احفظ التغييرات.

معالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase

أسهل طريقة لمصادقة المستخدمين مع Firebase باستخدام OIDC هو معالجة عملية تسجيل الدخول بالكامل باستخدام حزمة تطوير البرامج لمنصّة Firebase.

لمعالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لJavaScript لمنصّة Firebase، اتّبِع الخطوات التالية: الخطوات:

  1. إنشاء نسخة افتراضية من OAuthProvider باستخدام رقم تعريف الموفّر الذي حصلت عليه وحدة تحكم Firebase.

    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. عليك المصادقة مع Firebase باستخدام كائن موفّر بروتوكول OAuth.

    يمكنك إعادة توجيه المستخدم إلى صفحة تسجيل الدخول الخاصة بمقدّم الخدمة أو فتح صفحة تسجيل الدخول في نافذة متصفح منبثقة.

    مسار إعادة التوجيه

    إعادة التوجيه إلى صفحة تسجيل الدخول إلى مقدّم الخدمة من خلال الاتصال على الرقم 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 في تطبيقك، استخدام الرمز المميز للمعرّف مباشرةً للمصادقة مع 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.
    });