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

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

قبل البدء

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

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

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

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

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

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

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

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

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:

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

     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 الذي يمكن استخدامه ل retrieving fresh credentials for sensitive operations that require recent login.

   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