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

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

قبل ان تبدأ

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

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

      تأكد من تحديد أذونات API رض الاتصال هما: profile و email .

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

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

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

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

  1. إنشاء مثيل OAuthProvider باستخدام ID مزود yahoo.com.

    إصدار الويب 9

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

    إصدار الويب 8

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

    إصدار الويب 9

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

    إصدار الويب 8

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

    لدعم المعلمات ياهو، راجع وثائق ياهو أوث . ملاحظة أنه لا يمكنك تمرير المعلمات المطلوبة Firebase مع setCustomParameters() . هذه المعلمات CLIENT_ID، redirect_uri، RESPONSE_TYPE ونطاقها والدولة.

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

    إصدار الويب 9

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

    إصدار الويب 8

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

    لمعرفة المزيد، يرجى الرجوع إلى وثائق ياهو نطاقات .

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

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

      إصدار الويب 9

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

      إصدار الويب 8

      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 :

      firebase.auth().signInWithRedirect(provider);
      

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

      إصدار الويب 9

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

      إصدار الويب 8

      firebase.auth().signInWithRedirect(provider);

    على الانتهاء بنجاح، وID أوث رمز وصول رمز المرتبطة مزود يمكن استردادها من firebase.auth.UserCredential الكائن التي تم إرجاعها.

    باستخدام رمز وصول أوث، يمكنك استدعاء API ياهو .

    على سبيل المثال ، للحصول على معلومات الملف الشخصي الأساسية ، يمكن استدعاء واجهة برمجة تطبيقات REST التالية:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    حيث YAHOO_USER_UID غير معرف المستخدم ياهو التي يمكن استردادها من firebase.auth().currentUser.providerData[0].uid الحقل أو من result.additionalUserInfo.profile .

  5. وبينما تركز الأمثلة المذكورة أعلاه على تدفقات تسجيل الدخول ل، لديك أيضا القدرة على ربط مزود Yahoo إلى مستخدم موجود باستخدام linkWithPopup / linkWithRedirect . على سبيل المثال ، يمكنك ربط عدة موفرين لنفس المستخدم مما يسمح لهم بتسجيل الدخول باستخدام أي منهما.

    إصدار الويب 9

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

    إصدار الويب 8

    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 والتي يمكن استخدامها لاسترداد أوراق اعتماد جديدة لعمليات الحساسة التي تتطلب تسجيل الدخول مؤخرا.

    إصدار الويب 9

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

    إصدار الويب 8

    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 ، فيجب عليك إضافة معرف إضافة Chrome الخاص بك:

  1. فتح مشروعك في وحدة التحكم Firebase .
  2. في قسم مصادقة، افتح صفحة تسجيل الدخول الأسلوب.
  3. إضافة URI كما يلي إلى قائمة المصرح مجالات:
    chrome-extension://CHROME_EXTENSION_ID

عمليات المنبثقة فقط ( signInWithPopup ، linkWithPopup ، و reauthenticateWithPopup ) متاحة لملحقات كروم، وملحقات كروم لا يمكن استخدام HTTP الموجهات. يجب عليك استدعاء هذه الطرق من برنامج نصي لصفحة الخلفية بدلاً من نافذة منبثقة لإجراء المستعرض ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة. ويمكن استخدام الأساليب المنبثقة الوحيد في التمديدات باستخدام المانيفستو V2 . الأحدث المانيفستو V3 يسمح فقط مخطوطات الخلفية في شكل عمال الخدمات، والتي لا يمكن تنفيذ العمليات المنبثقة على الإطلاق.

في الظاهر جعل ملف تمديد كروم الخاص بك من أن قمت بإضافة https://apis.google.com URL إلى content_security_policy allowlist.

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

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

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

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

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

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

إصدار الويب 9

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

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

إصدار الويب 8

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