اصالت‌سنجی بااستفاده از Yahoo با جاوا اسکریپت

می‌توانید بااستفاده از ارائه‌دهندگان OAuth مثل Yahoo به کاربران اجازه دهید با Firebase اصالت‌سنجی کنند. برای این کار، بااستفاده از «کیت توسعه نرم‌افزار Firebase»، «ورود به سیستم OAuth عمومی» را در برنامه‌تان ادغام کنید تا جریان ورود به سیستم سرتاسری را انجام دهید.

قبل از شروع

برای ورود به سیستم کاربران بااستفاده از حساب‌های Yahoo، ابتدا باید Yahoo را به‌عنوان ارائه‌دهنده ورود به سیستم برای پروژه Firebase خود فعال کنید:

1. ‫Firebase را به پروژه جاوا اسکریپت خود اضافه کنید.
2. در کنسول Firebase، به امنیت > اصالت‌سنجی بروید.
3. در زبانه روش ورود به سیستم، ارائه‌دهنده ورود به سیستم Yahoo را فعال کنید.
4. شناسه کارخواه و رمز کارخواه را از کنسول توسعه‌دهنده آن ارائه‌دهنده به پیکربندی ارائه‌دهنده اضافه کنید:

   1. برای ثبت کارخواه Yahoo OAuth، مستندات توسعه‌دهنده Yahoo را درباره ثبت برنامه وب با Yahoo دنبال کنید.

      حتماً دو اجازه OpenID Connect API را انتخاب کنید: profile و email.

   2. هنگام ثبت برنامه‌ها با این ارائه‌دهندگان، حتماً دامنه *.firebaseapp.com را برای پروژه خود به‌عنوان دامنه هدایت مجدد برای برنامه خود ثبت کنید.
5. روی ذخیره کردن کلیک کنید.

مدیریت جریان ورود به سیستم با «کیت توسعه نرم‌افزار Firebase»

اگر برنامه وب می‌سازید، ساده‌ترین راه برای اصالت‌سنجی کاربران با Firebase بااستفاده از حساب‌های Yahoo آن‌ها این است که کل جریان ورود به سیستم را با کیت توسعه نرم‌افزار Firebase JavaScript مدیریت کنید.

برای مدیریت جریان ورود به سیستم با «کیت توسعه نرم‌افزار جاوا اسکریپت Firebase»، این مراحل را دنبال کنید:

1. بااستفاده از شناسه ارائه‌دهنده yahoo.com، نمونه‌ای از OAuthProvider ایجاد کنید.

   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 APIs دارد، باید در اجازه‌های API در کنسول توسعه‌دهندگان Yahoo، اجازه‌های Yahoo APIs را درخواست کنید. محدوده‌های OAuth درخواستی باید دقیقاً با محدوده‌های ازپیش‌پیکربندی‌شده در اجازه‌های API برنامه مطابقت داشته باشند. برای مثال، اگر دسترسی خواندن/نوشتن به مخاطبین کاربر درخواست شده باشد و در اجازه‌های API برنامه ازپیش پیکربندی شده باشد، 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. بااستفاده از شیء ارائه‌دهنده OAuth، با Firebase اصالت‌سنجی کنید. می‌توانید از کاربرانتان بخواهید با «حساب‌های 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 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. اگرچه مثال‌های بالا بر جریان‌های ورود به سیستم تمرکز دارند، شما همچنین می‌توانید بااستفاده از linkWithPopup/linkWithRedirect ارائه‌دهنده Yahoo را به کاربر موجود پیوند دهید. برای مثال، می‌توانید چندین ارائه‌دهنده را به یک کاربر پیوند دهید و به او اجازه دهید با هرکدام از آن‌ها به سیستم وارد شود.

   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

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) {
  // ...
}

اصالت‌سنجی با Firebase در افزونه Chrome

اگر درحال ساختن برنامه افزونه Chrome هستید، راهنمای «سندهای خارج از صفحه» را ببینید.

مراحل بعدی

پس‌از اینکه کاربر برای اولین‌بار به سیستم وارد شد، حساب کاربری جدیدی ایجاد می‌شود و به اطلاعات اعتباری—یعنی نام کاربری و گذرواژه، شماره تلفن، یا اطلاعات ارائه‌دهنده اصالت‌سنجی—که کاربر با آن به سیستم وارد شده است پیوند داده می‌شود. این حساب جدید به‌عنوان بخشی از پروژه Firebase شما ذخیره می‌شود و می‌توان از آن برای شناسایی کاربر در همه برنامه‌های پروژه شما، صرف‌نظر از نحوه ورود کاربر به سیستم، استفاده کرد.

• در برنامه‌هایتان، روش توصیه‌شده برای اطلاع از وضعیت اصالت‌سنجی کاربر این است که روی شیء Auth ناظر تنظیم کنید. سپس می‌توانید اطلاعات نمایه پایه کاربر را از شیء User دریافت کنید. به مدیریت کاربران مراجعه کنید.

• در Firebase Realtime Database و Cloud Storage قوانین امنیتی، می‌توانید شناسه کاربر یکتای کاربر واردشده به سیستم را از متغیر 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