المصادقة باستخدام 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.

    Web version 9

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web version 8

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

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

    Web version 9

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

    Web version 8

    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 version 9

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

    Web version 8

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

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

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

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

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

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

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web version 8

    firebase.auth().signInWithRedirect(provider);

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

    Web version 9

    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 version 8

    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 version 9

    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 version 8

    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 version 9

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 version 8

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