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

لمعالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (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 API ضمن أذونات واجهة برمجة التطبيقات في وحدة تحكّم المطوّرين في 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 التالية :

    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

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

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

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

بعد تسجيل المستخدم الدخول لأول مرة، يتم إنشاء حساب مستخدم جديد المرتبطة ببيانات الاعتماد - أي اسم المستخدم وكلمة المرور، أو الرقم أو معلومات مقدم المصادقة - المستخدم الذي سجّل الدخول باستخدامه. هذا الجديد كجزء من مشروع 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