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

إذا قمت بالترقية إلى Firebase Authentication باستخدام 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. أضف Firebase إلى مشروع JavaScript الخاص بك .

2. إذا لم تكن قد قمت بالترقية إلى Firebase Authentication باستخدام 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. قم بإنشاء مثيل لـ OAuthProvider باستخدام معرف الموفر الذي حصلت عليه في وحدة تحكم Firebase.

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

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

   واجهة برمجة تطبيقات Web namespaced

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

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

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

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

   واجهة برمجة تطبيقات Web namespaced

   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 إضافية تتجاوز ملف التعريف الأساسي الذي تريد طلبه من موفر المصادقة.

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

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

   واجهة برمجة تطبيقات Web namespaced

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

   تحقق مع مزودك للنطاقات التي يدعمها.

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

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

   إعادة توجيه التدفق

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

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

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

   واجهة برمجة تطبيقات Web namespaced

   firebase.auth().signInWithRedirect(provider);
   

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

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

   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 namespaced

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

   تدفق النوافذ المنبثقة

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

   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 namespaced

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