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

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

قبل البدء

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

• رقم تعريف العميل: سلسلة فريدة لمقدّم الخدمة وتحدّد هوية تطبيقك. ويمكن أن يعيّن لك مزوّد الخدمة معرّف عميل مختلف لكل نظام أساسي توفّره. هذه إحدى قيم المطالبة 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 باستخدام النظام الأساسي للهوية، لا تتوفر مصادقة OpenID Connect إلا في المشاريع التي تمت ترقيتها.

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

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

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

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

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

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

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

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

للتعامل مع عملية تسجيل الدخول باستخدام حزمة SDK لـ Firebase JavaScript، اتّبِع الخطوات التالية:

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

   واجهة برمجة التطبيقات Web modular API

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('oidc.example-provider');
   

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

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

2. اختياري: حدِّد مَعلمات OAuth المخصّصة الإضافية التي تريد إرسالها مع طلب OAuth.

   واجهة برمجة التطبيقات Web modular API

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: 'user@example.com'
   });
   

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

   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 modular API

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

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

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

   يُرجى التواصل مع مقدّم الخدمة لمعرفة النطاقات التي يتوافق معها.

4. عليك المصادقة مع Firebase باستخدام كائن موفّر بروتوكول OAuth.

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

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

   إعادة التوجيه إلى صفحة تسجيل الدخول إلى مقدّم الخدمة من خلال الاتصال على الرقم signInWithRedirect():

   واجهة برمجة التطبيقات Web modular API

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

   firebase.auth().signInWithRedirect(provider);
   

   بعد أن يكمل المستخدم عملية تسجيل الدخول ثم يعود إلى تطبيقك، يمكنك الحصول على نتيجة تسجيل الدخول من خلال الاتصال على getRedirectResult().

   واجهة برمجة التطبيقات Web modular API

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

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

   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 modular API

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

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

   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:

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

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