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

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

قبل البدء

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

أضِف Firebase إلى مشروع JavaScript.
في وحدة تحكّم FirebaseFirebase، افتح قسم المصادقة.
في علامة التبويب طريقة تسجيل الدخول ، فعِّل موفّر Yahoo.
أضِف معرّف العميل وسر العميل من وحدة تحكّم المطوّرين التابعة لموفّر الخدمة إلى إعدادات الموفّر:
1. لتسجيل عميل OAuth على Yahoo، اتّبِع مستندات المطوّرين على Yahoo بشأن تسجيل تطبيق ويب على Yahoo.
  
  احرص على اختيار إذنَي واجهة برمجة تطبيقات اتصال OpenID: profile وemail.
2. عند تسجيل التطبيقات لدى موفّري الخدمة هؤلاء، احرص على تسجيل النطاق *.firebaseapp.com لمشروعك كنطاق إعادة التوجيه لتطبيقك.
انقر على حفظ.

التعامل مع عملية تسجيل الدخول باستخدام حزمة Firebase SDK

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

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

أنشئ مثيلاً من 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

اختياري: حدِّد مَعلمات 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.
اختياري: حدِّد نطاقات 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.
صادِق باستخدام 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 التالية:
```
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.

في حين أنّ الأمثلة أعلاه تركّز على عمليات تسجيل الدخول، يمكنك أيضًا ربط موفّر 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

يمكن استخدام النمط نفسه مع 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، يُرجى الاطّلاع على دليل مستندات خارج الشاشة.

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

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

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

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

عند تهيئة مكتبة 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

المصادقة باستخدام Yahoo باستخدام JavaScript تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.