المصادقة باستخدام 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 version 9

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

   Web version 8

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   yahoo-oauth.js

2. اختياري : حدد معلمات OAuth المخصصة الإضافية التي تريد إرسالها مع طلب OAuth.

   Web version 9

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

   Web version 8

   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 و range و state .

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

   Web version 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');
   auth_yahoo_provider_scopes.js

   Web version 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');
   yahoo-oauth.js

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

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

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

     Web version 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.
       });
     auth_yahoo_signin_popup.js

     Web version 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.
       });
     yahoo-oauth.js

   • لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول ، اتصل signInWithRedirect :

     firebase.auth().signInWithRedirect(provider);
     

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

     Web version 9

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

     Web version 8

     firebase.auth().signInWithRedirect(provider);
     yahoo-oauth.js

   عند الانتهاء بنجاح ، يمكن استرداد رمز معرف OAuth المميز ورمز الوصول المرتبط بالموفر من firebase.auth.UserCredential object.

   باستخدام رمز الوصول 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 field أو من result.additionalUserInfo.profile .

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

   Web version 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.
       });
   auth_yahoo_link_popup.js

   Web version 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.
       });
   yahoo-oauth.js

6. يمكن استخدام نفس النمط مع إعادة المصادقة مع reauthenticateWithPopup / إعادة المصادقة مع إعادة reauthenticateWithRedirect والتي يمكن استخدامها لاسترداد بيانات اعتماد جديدة للعمليات الحساسة التي تتطلب تسجيل دخول حديثًا.

   Web version 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.
       });
   auth_yahoo_reauth_popup.js

   Web version 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.
       });
   yahoo-oauth.js

// Step 1.
// User tries to sign in to Yahoo.
auth.signInWithPopup(new firebase.auth.OAuthProvider('yahoo.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Yahoo credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Yahoo credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

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

إذا كنت تقوم بإنشاء تطبيق ملحق Chrome ، فيجب عليك إضافة معرف إضافة Chrome الخاص بك:

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

   chrome-extension://CHROME_EXTENSION_ID

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

في ملف بيان امتداد Chrome ، تأكد من إضافة https://apis.google.com URL إلى content_security_policy allowlist.

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

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

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

• في قاعدة بيانات Firebase Realtime وقواعد أمان التخزين السحابي ، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير 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