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

   عند اكتمال عملية الربط بنجاح، يمكن استرداد رمز التعريف المميز ورمز الدخول المرتبطين بمقدّم الخدمة من عنصر 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

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) {
  // ...
}

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

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

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

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

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

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

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

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

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