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

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

قبل ان تبدأ

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

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

      تأكد من تحديد أذونات OpenID Connect API: profile email .

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

تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK

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

للتعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK، اتبع الخطوات التالية:

  1. قم بإنشاء مثيل لـ OAuthProvider باستخدام معرف الموفر yahoo.com .

    Web modular API

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

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. اختياري : حدد معلمات OAuth المخصصة الإضافية التي تريد إرسالها مع طلب OAuth.

    Web modular API

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

    Web namespaced API

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

    للتعرف على المعلمات التي يدعمها Yahoo، راجع وثائق Yahoo OAuth . لاحظ أنه لا يمكنك تمرير المعلمات المطلوبة لـ Firebase باستخدام setCustomParameters() . هذه المعلمات هي Client_id و redirect_uri و response_type والنطاق والحالة .

  3. اختياري : حدد نطاقات OAuth 2.0 الإضافية خارج profile email الذي تريد طلبه من موفر المصادقة. إذا كان التطبيق الخاص بك يتطلب الوصول إلى بيانات المستخدم الخاصة من Yahoo APIs، فستحتاج إلى طلب أذونات إلى Yahoo APIs ضمن أذونات API في وحدة تحكم مطور Yahoo. يجب أن تكون نطاقات OAuth المطلوبة مطابقة تمامًا للنطاقات التي تم تكوينها مسبقًا في أذونات واجهة برمجة تطبيقات التطبيق. على سبيل المثال، إذا تم طلب الوصول للقراءة/الكتابة إلى جهات اتصال المستخدم وتم تكوينه مسبقًا في أذونات واجهة برمجة التطبيقات الخاصة بالتطبيق، فيجب تمرير sdct-w بدلاً من نطاق OAuth للقراءة فقط sdct-r . وإلا، فسوف يفشل التدفق وسيظهر خطأ للمستخدم النهائي.

    Web modular API

    // 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');

    Web namespaced API

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

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

    • لتسجيل الدخول باستخدام نافذة منبثقة، اتصل بـ signInWithPopup :

      Web modular API

      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.
        });

      Web namespaced API

      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.
        });
    • لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، اتصل بـ signInWithRedirect :

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

      firebase.auth().signInWithRedirect(provider);
      

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

    Web modular API

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

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

    عند الانتهاء بنجاح، يمكن استرداد رمز معرف 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 modular API

    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.
        });

    Web namespaced API

    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.
        });
  6. يمكن استخدام نفس النمط مع reauthenticateWithPopup / reauthenticateWithRedirect والذي يمكن استخدامه لاسترداد بيانات اعتماد جديدة للعمليات الحساسة التي تتطلب تسجيل دخول مؤخرًا.

    Web modular API

    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.
        });

    Web namespaced API

    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.
        });

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

إذا كنت تقوم بإنشاء تطبيق ملحق لـ Chrome، فراجع دليل المستندات خارج الشاشة .

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

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

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

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

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

لتسجيل خروج مستخدم، اتصل signOut :

Web modular API

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

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

Web namespaced API

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