المصادقة باستخدام Yahoo باستخدام JavaScript

ويمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام موفّري بروتوكول OAuth مثل Yahoo، وذلك من خلال دمج تسجيل الدخول العام عبر OAuth في تطبيقك باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase لتنفيذ عملية تسجيل الدخول من البداية إلى النهاية.

قبل البدء

لتسجيل دخول المستخدمين باستخدام حسابات Yahoo، يجب أولاً تفعيل Yahoo كموفِّر تسجيل دخول لمشروعك على Firebase:

  1. أضِف Firebase إلى مشروع JavaScript.
  2. في وحدة تحكُّم Firebase، افتح قسم المصادقة.
  3. في علامة التبويب طريقة تسجيل الدخول، فعِّل موفّر الخدمة Yahoo.
  4. أضِف Client ID وClient Secret من وحدة تحكّم المطوّرين الخاصة بالموفّر إلى إعدادات الموفّر:

    1. لتسجيل عميل Yahoo OAuth، اتّبِع مستندات مطوِّر برامج Yahoo حول تسجيل تطبيق ويب عن طريق Yahoo.

      احرص على اختيار إذنَي OpenID Connect API: profile وemail.

    2. عند تسجيل التطبيقات لدى مقدّمي الخدمة هؤلاء، احرص على تسجيل نطاق *.firebaseapp.com لمشروعك باعتباره نطاق إعادة التوجيه لتطبيقك.
  5. انقر على حفظ.

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

إذا كنت تنشئ تطبيق ويب، فإن أسهل طريقة لمصادقة المستخدمين من خلال Firebase باستخدام حساباتهم على Yahoo هي التعامل مع تدفق تسجيل الدخول بالكامل باستخدام حزمة تطوير البرامج (SDK) لـ Firebase JavaScript.

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

  1. إنشاء نسخة افتراضية من OAuthProvider باستخدام رقم تعريف الموفِّر yahoo.com

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

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
    auth_yahoo_provider_create.js

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

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    yahoo-oauth.js

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

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

    provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  
    auth_yahoo_provider_params.js

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

    provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  
    yahoo-oauth.js

    بالنسبة إلى المعلَمات المتوافقة مع Yahoo، يمكنك الاطّلاع على مستندات Yahoo OAuth. تجدر الإشارة إلى أنّه لا يمكنك ضبط المعلَمات المطلوبة في Firebase مع setCustomParameters(). وهذه المَعلمات هي client_id وredirect_uri وresponse_type وscope وstate.

  3. اختياري: حدِّد نطاقات OAuth 2.0 الإضافية التي تتجاوز profile وemail التي تريد طلبها من موفِّر المصادقة. إذا كان تطبيقك يتطلب الوصول إلى بيانات المستخدم الخاصة من واجهات برمجة تطبيقات Yahoo، عليك طلب أذونات الوصول إلى واجهات برمجة تطبيقات Yahoo ضمن أذونات واجهة برمجة التطبيقات في وحدة تحكم مطوّري البرامج في Yahoo. يجب أن تكون نطاقات OAuth المطلوبة مطابقة تمامًا للنطاقات التي تم ضبطها مسبقًا ضمن أذونات واجهة برمجة التطبيقات للتطبيق. على سبيل المثال، إذا كان الإذن بالقراءة/الكتابة مطلوبًا لجهات اتصال المستخدم وتم ضبطه مسبقًا في أذونات واجهة برمجة التطبيقات للتطبيق، يجب تمرير sdct-w بدلاً من نطاق OAuth للقراءة فقط sdct-r. وإلا، سيفشل التدفق وسيظهر خطأ للمستخدم النهائي.

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

    // Request access to Yahoo Mail API.
provider.addScope('mail-r');
// Request read/write access to user contacts.
// This must be preconfigured in the app's API permissions.
provider.addScope('sdct-w');
    auth_yahoo_provider_scopes.js

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

    // Request access to Yahoo Mail API.
provider.addScope('mail-r');
// Request read/write access to user contacts.
// This must be preconfigured in the app's API permissions.
provider.addScope('sdct-w');
    yahoo-oauth.js

    لمزيد من المعلومات، راجِع مستندات نطاقات Yahoo.

  4. عليك المصادقة مع Firebase باستخدام كائن موفّر بروتوكول OAuth. يمكنك مطالبة المستخدمين بتسجيل الدخول باستخدام حساباتهم على Yahoo إما من خلال فتح نافذة منبثقة أو إعادة التوجيه إلى صفحة تسجيل الدخول. ومفضلة طريقة إعادة التوجيه على الأجهزة المحمولة.

    • لتسجيل الدخول عبر نافذة منبثقة، اتصل بالرقم signInWithPopup:

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

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile
    // ...

    // Yahoo OAuth access token and ID token can be retrieved by calling:
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
      auth_yahoo_signin_popup.js

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

      firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    const credential = result.credential;

    // Yahoo OAuth access token and ID token can be retrieved by calling:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
      yahoo-oauth.js

    • لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، اتصل بالرقم signInWithRedirect:

    اتّبِع أفضل الممارسات عند استخدام signInWithRedirect أو linkWithRedirect أو reauthenticateWithRedirect. 

      firebase.auth().signInWithRedirect(provider);

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

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

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_yahoo_signin_redirect.js

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

    firebase.auth().signInWithRedirect(provider);
    yahoo-oauth.js

    عند إتمام العملية بنجاح، يمكن استرداد الرمز المميّز لمعرّف OAuth ورمز الوصول المرتبط بالموفِّر من عنصر firebase.auth.UserCredential الذي تم عرضه.

    باستخدام رمز الدخول المميز عبر OAuth، يمكنك طلب واجهة برمجة تطبيقات Yahoo.

    على سبيل المثال، للحصول على معلومات الملف الشخصي الأساسية، يمكن استدعاء واجهة برمجة تطبيقات REST التالية:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json

    يشير YAHOO_USER_UID إلى رقم تعريف مستخدم Yahoo الذي يمكن استرداده من الحقل firebase.auth().currentUser.providerData[0].uid أو من result.additionalUserInfo.profile.

  5. مع أنّ الأمثلة أعلاه تركّز على مسارات تسجيل الدخول، يمكنك أيضًا ربط موفِّر خدمة Yahoo بمستخدم حالي باستخدام linkWithPopup/linkWithRedirect. على سبيل المثال، يمكنك ربط عدة مقدّمي خدمات بالمستخدم نفسه الذي يسمح لهم بتسجيل الدخول باستخدام أيّ منهما.

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

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
const auth = getAuth();
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Yahoo credential is linked to the current user.
      // 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.
    });
    auth_yahoo_link_popup.js

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

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Yahoo credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.
      // Yahoo OAuth access token can be retrieved by calling:
      // result.credential.accessToken
      // Yahoo OAuth ID token can be retrieved by calling:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });
    yahoo-oauth.js

  6. يمكن استخدام النمط نفسه مع reauthenticateWithPopup/reauthenticateWithRedirect الذي يمكن استخدامه لاسترداد بيانات الاعتماد الجديدة للعمليات الحسّاسة التي تتطلب تسجيل دخول حديث.

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

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
const auth = getAuth();
reauthenticateWithPopup(auth.currentUser, provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // 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.
    });
    auth_yahoo_reauth_popup.js

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

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
firebase.auth().currentUser.reauthenticateWithPopup(provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.
      // Yahoo OAuth access token can be retrieved by calling:
      // result.credential.accessToken
      // Yahoo OAuth ID token can be retrieved by calling:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });
    yahoo-oauth.js

المصادقة باستخدام Firebase في إحدى إضافات Chrome

إذا كنت تنشئ تطبيقًا لإضافة Chrome، يمكنك الاطّلاع على دليل المستندات خارج الشاشة.

الخطوات اللاحقة

بعد تسجيل دخول المستخدم للمرة الأولى، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد، أي اسم المستخدم وكلمة المرور، أو رقم الهاتف، أو معلومات مقدم خدمة المصادقة. يتم تخزين هذا الحساب الجديد كجزء من مشروعك في Firebase، ويمكن استخدامه لتحديد مستخدم على مستوى كل تطبيق في مشروعك، بغض النظر عن كيفية تسجيل المستخدم للدخول.

  • الطريقة التي ننصح بها في تطبيقاتك لمعرفة حالة المصادقة للمستخدم هي ضبط مراقب على كائن Auth. يمكنك بعد ذلك الحصول على معلومات الملف الشخصي الأساسية للمستخدم من كائن User. يُرجى الاطّلاع على إدارة المستخدمين.

  • في قاعدة بيانات Firebase في الوقت الفعلي وقواعد أمان Cloud Storage، يمكنك الحصول على رقم تعريف المستخدم الفريد للمستخدم الذي سجّل الدخول من المتغيّر auth واستخدامه للتحكّم في البيانات التي يمكن للمستخدم الوصول إليها.

يمكنك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام عدة موفِّري مصادقة من خلال ربط بيانات اعتماد موفِّر المصادقة بحساب مستخدم حالي.

لتسجيل خروج مستخدم، يمكنك الاتصال بالرقم signOut:

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

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

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

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js