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

2. إذا لم تقم بالترقية إلى مصادقة Firebase باستخدام 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');
   

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

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

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

   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');
   

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

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

   تحقق مع مزود الخدمة الخاص بك لمعرفة النطاقات التي يدعمها.

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

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

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

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

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

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

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

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

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

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

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

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