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

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

قبل البدء

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

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

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

      احرص على اختيار أذونات واجهة برمجة تطبيقات OpenID Connect التالية: profile وemail.

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

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

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

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

1. أنشئ مثيلاً من OAuthProvider باستخدام معرّف الموفّر yahoo.com.

   Web

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('yahoo.com');
   auth_yahoo_provider_create.js

   Web

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

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

   Web

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

   Web

   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

   // 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

   Web

   // 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

     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

     Web

     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:

     firebase.auth().signInWithRedirect(provider);
     

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

   Web

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

   Web

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

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

   باستخدام رمز الدخول عبر OAuth، يمكنك استدعاء Yahoo API.

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

   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

   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

   Web

   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

   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

   Web

   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

التعامل مع أخطاء account-exists-with-different-credential

إذا فعّلت الإعداد حساب واحد لكل عنوان بريد إلكتروني في وحدة تحكّم Firebase، عندما يحاول مستخدم تسجيل الدخول إلى مقدّم خدمة (مثل Yahoo) باستخدام عنوان بريد إلكتروني مستخدَم من قبل لمقدّم خدمة آخر تابع لمستخدم Firebase آخر (مثل Google)، سيتم عرض الخطأ auth/account-exists-with-different-credential مع كائن AuthCredential (بيانات اعتماد Yahoo). لإكمال عملية تسجيل الدخول إلى مقدّم الخدمة المطلوب، على المستخدم تسجيل الدخول أولاً إلى مقدّم الخدمة الحالي (Google) ثم الربط بمقدّم الخدمة السابق AuthCredential (بيانات اعتماد Yahoo).

وضع النافذة المنبثقة

إذا كنت تستخدم signInWithPopup، يمكنك التعامل مع أخطاء auth/account-exists-with-different-credential باستخدام رمز مثل المثال التالي:

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

try {
  // Step 1: User tries to sign in using Yahoo.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Yahoo credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Yahoo credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

وضع إعادة التوجيه

يتم التعامل مع هذا الخطأ بطريقة مشابهة في وضع إعادة التوجيه، مع الاختلاف في أنّه يجب تخزين بيانات الاعتماد المعلقة مؤقتًا بين عمليات إعادة توجيه الصفحات (على سبيل المثال، باستخدام مساحة التخزين المؤقت للجلسة).

إجراء متقدّم: التعامل مع مسار تسجيل الدخول يدويًا

على عكس موفّري OAuth الآخرين الذين يتيحهم Firebase، مثل Google وFacebook وTwitter، حيث يمكن تسجيل الدخول مباشرةً باستخدام بيانات الاعتماد المستندة إلى رمز الدخول المميز لبروتوكول OAuth، لا تتيح خدمة Firebase Auth الإمكانية نفسها لموفّري خدمات مثل Yahoo بسبب عدم قدرة خادم Firebase Auth على التحقّق من جمهور رموز الدخول المميزة لبروتوكول OAuth من Yahoo. هذا شرط أمان أساسي، وقد يعرّض التطبيقات والمواقع الإلكترونية لهجمات إعادة الإرسال حيث يمكن استخدام رمز مميّز للوصول إلى OAuth من Yahoo تم الحصول عليه لمشروع واحد (المهاجم) لتسجيل الدخول إلى مشروع آخر (الضحية). بدلاً من ذلك، تتيح خدمة Firebase Auth إمكانية التعامل مع عملية OAuth بأكملها وتبادل رمز التفويض باستخدام معرّف عميل OAuth وسرّه اللذين تم ضبطهما في وحدة تحكّم Firebase. بما أنّه لا يمكن استخدام رمز التفويض إلا مع معرّف عميل/سرّ معيّن، لا يمكن استخدام رمز تفويض تم الحصول عليه لمشروع ما مع مشروع آخر.

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

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

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

تخصيص نطاق إعادة التوجيه لتسجيل الدخول باستخدام Yahoo

عند إنشاء مشروع، ستوفّر Firebase نطاقًا فرعيًا فريدًا لمشروعك: https://my-app-12345.firebaseapp.com.

سيتم استخدام هذا الإعداد أيضًا كآلية إعادة توجيه لتسجيل الدخول باستخدام OAuth. يجب السماح بهذا النطاق لجميع موفّري خدمات OAuth المتوافقين. ومع ذلك، يعني هذا أنّ المستخدمين قد يرون النطاق أثناء تسجيل الدخول إلى Yahoo قبل إعادة التوجيه إلى التطبيق: Continue to: https://my-app-12345.firebaseapp.com.

لتجنُّب عرض نطاقك الفرعي، يمكنك إعداد نطاق خاص باستخدام Firebase Hosting باتّباع الخطوات التالية:

1. اتّبِع الخطوات من 1 إلى 3 في مقالة إعداد نطاقك لاستخدام Hosting. عند إثبات ملكية نطاقك، توفّر Hosting شهادة SSL لنطاقك المخصّص.
2. أضِف نطاقك المخصّص إلى قائمة النطاقات المسموح بها في وحدة تحكّم Firebase: auth.custom.domain.com.
3. في صفحة إعدادات OAuth أو وحدة تحكّم المطوّرين في Yahoo، أضِف عنوان URL الخاص بصفحة إعادة التوجيه إلى القائمة البيضاء، والذي يمكن الوصول إليه على نطاقك المخصّص: https://auth.custom.domain.com/__/auth/handler.
4. عند إعداد مكتبة JavaScript، حدِّد نطاقك المخصّص باستخدام الحقل authDomain:

   var config = {
     apiKey: '...',
     // Changed from 'PROJECT_ID.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://PROJECT_ID.firebaseio.com',
     projectId: 'PROJECT_ID',
     storageBucket: 'PROJECT_ID.firebasestorage.app',
     messagingSenderId: 'SENDER_ID'
   };
   firebase.initializeApp(config);

الخطوات التالية

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

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

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

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

لتسجيل خروج مستخدم، اتّبِع الخطوات التالية: signOut:

Web

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

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

Web

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