احراز هویت با استفاده از یاهو با جاوا اسکریپت

شما می‌توانید با ادغام ورود عمومی OAuth در برنامه خود با استفاده از Firebase SDK، به کاربران خود اجازه دهید تا با استفاده از ارائه‌دهندگان OAuth مانند یاهو، با Firebase احراز هویت کنند تا جریان ورود به سیستم سرتاسری را انجام دهند.

قبل از اینکه شروع کنی

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

1. فایربیس را به پروژه جاوا اسکریپت خود اضافه کنید .
2. در کنسول Firebase ، بخش Auth را باز کنید.
3. در برگه «روش ورود» ، ارائه‌دهنده یاهو را فعال کنید.
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. با استفاده از شناسه ارائه دهنده 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

   برای پارامترهایی که یاهو پشتیبانی می‌کند، به مستندات OAuth یاهو مراجعه کنید. توجه داشته باشید که نمی‌توانید پارامترهای مورد نیاز Firebase را با setCustomParameters() ارسال کنید. این پارامترها client_id ، redirect_uri ، response_type ، scope و state هستند.

3. اختیاری : حوزه‌های OAuth 2.0 اضافی فراتر از profile و email را که می‌خواهید از ارائه‌دهنده احراز هویت درخواست کنید، مشخص کنید. اگر برنامه شما نیاز به دسترسی به داده‌های خصوصی کاربر از APIهای یاهو دارد، باید در بخش مجوزهای API در کنسول توسعه‌دهنده یاهو، مجوزهای APIهای یاهو را درخواست کنید. حوزه‌های OAuth درخواستی باید دقیقاً با موارد از پیش پیکربندی‌شده در مجوزهای API برنامه مطابقت داشته باشند. به عنوان مثال، اگر دسترسی خواندن/نوشتن به مخاطبین کاربر درخواست شده و در مجوزهای API برنامه از پیش پیکربندی شده باشد، باید به جای حوزه OAuth فقط خواندنی sdct-r ، sdct-w ارسال شود. در غیر این صورت، روند کار با شکست مواجه می‌شود و خطایی به کاربر نهایی نشان داده می‌شود.

   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

   برای کسب اطلاعات بیشتر، به مستندات یاهو اسکوپ مراجعه کنید.

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 را فراخوانی کنید:

     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 ID و توکن دسترسی مرتبط با ارائه‌دهنده می‌توانند از شیء firebase.auth.UserCredential برگردانده شده بازیابی شوند.

   با استفاده از توکن دسترسی OAuth، می‌توانید 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 شناسه کاربر یاهو است که می‌تواند از فیلد firebase.auth().currentUser.providerData[0].uid یا از result.additionalUserInfo.profile بازیابی شود.

5. در حالی که مثال‌های بالا بر جریان‌های ورود به سیستم تمرکز دارند، شما همچنین می‌توانید با استفاده از 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 فعال کرده باشید، وقتی کاربری سعی می‌کند با ایمیلی که از قبل برای ارائه‌دهنده‌ی دیگری از Firebase (مانند Google) وجود دارد، وارد یک ارائه‌دهنده (مانند Yahoo) شود، خطای auth/account-exists-with-different-credential به همراه یک شیء AuthCredential (اعتبارنامه‌ی Yahoo) نمایش داده می‌شود. برای تکمیل ورود به ارائه‌دهنده‌ی مورد نظر، کاربر باید ابتدا به ارائه‌دهنده‌ی موجود (Google) وارد شود و سپس به AuthCredential قبلی (اعتبارنامه‌ی Yahoo) پیوند دهد.

حالت پاپ‌آپ

اگر از signInWithPopup استفاده می‌کنید، می‌توانید خطاهای auth/account-exists-with-different-credential را با کدی مانند مثال زیر مدیریت کنید:

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

حالت تغییر مسیر

این خطا به روشی مشابه در حالت تغییر مسیر مدیریت می‌شود، با این تفاوت که اعتبارنامه‌ی در حال بررسی باید بین تغییر مسیرهای صفحه ذخیره شود (برای مثال، با استفاده از ذخیره‌سازی جلسه).

پیشرفته: جریان ورود به سیستم را به صورت دستی مدیریت کنید

برخلاف سایر ارائه‌دهندگان OAuth که توسط Firebase پشتیبانی می‌شوند، مانند گوگل، فیس‌بوک و توییتر، که در آن‌ها ورود به سیستم مستقیماً با اعتبارنامه‌های مبتنی بر توکن دسترسی OAuth امکان‌پذیر است، Firebase Auth به دلیل عدم توانایی سرور Firebase Auth در تأیید مخاطبان توکن‌های دسترسی OAuth یاهو، از چنین قابلیتی برای ارائه‌دهندگانی مانند یاهو پشتیبانی نمی‌کند. این یک الزام امنیتی حیاتی است و می‌تواند برنامه‌ها و وب‌سایت‌ها را در معرض حملات مجدد قرار دهد که در آن یک توکن دسترسی OAuth یاهو که برای یک پروژه (مهاجم) به دست آمده است، می‌تواند برای ورود به پروژه دیگری (قربانی) استفاده شود. در عوض، Firebase Auth این امکان را ارائه می‌دهد که کل جریان OAuth و تبادل کد مجوز را با استفاده از شناسه و رمز کلاینت OAuth پیکربندی شده در کنسول Firebase مدیریت کند. از آنجایی که کد مجوز فقط می‌تواند همراه با یک شناسه/رمز کلاینت خاص استفاده شود، کد مجوز به دست آمده برای یک پروژه را نمی‌توان با پروژه دیگری استفاده کرد.

اگر لازم باشد از این ارائه‌دهندگان در محیط‌های پشتیبانی‌نشده استفاده شود، باید از یک کتابخانه OAuth شخص ثالث و احراز هویت سفارشی Firebase استفاده شود. مورد اول برای احراز هویت با ارائه‌دهنده و مورد دوم برای تبادل اعتبارنامه ارائه‌دهنده با یک توکن سفارشی مورد نیاز است.

احراز هویت با Firebase در افزونه Chrome

اگر در حال ساخت یک برنامه افزونه کروم هستید، به راهنمای اسناد Offscreen مراجعه کنید.

سفارشی‌سازی دامنه تغییر مسیر برای ورود به یاهو

هنگام ایجاد پروژه، فایربیس یک زیر دامنه منحصر به فرد برای پروژه شما ارائه می‌دهد: https://my-app-12345.firebaseapp.com .

این همچنین به عنوان مکانیزم تغییر مسیر برای ورود با OAuth استفاده خواهد شد. این دامنه باید برای همه ارائه دهندگان پشتیبانی شده OAuth مجاز باشد. با این حال، این بدان معناست که کاربران ممکن است هنگام ورود به یاهو، قبل از هدایت مجدد به برنامه، آن دامنه را ببینند: ادامه به: https://my-app-12345.firebaseapp.com .

برای جلوگیری از نمایش زیر دامنه خود، می‌توانید یک دامنه سفارشی با Firebase Hosting راه‌اندازی کنید:

1. مراحل ۱ تا ۳ در بخش «تنظیم دامنه برای Hosting را دنبال کنید. پس از تأیید مالکیت دامنه، Hosting یک گواهی SSL برای دامنه سفارشی شما ارائه می‌دهد.
2. دامنه سفارشی خود را به لیست دامنه‌های مجاز در کنسول Firebase اضافه کنید: auth.custom.domain.com .
3. در کنسول توسعه‌دهندگان یاهو یا صفحه تنظیمات OAuth، آدرس اینترنتی صفحه تغییر مسیر را که از طریق دامنه سفارشی شما قابل دسترسی خواهد بود، در فهرست سفید قرار دهید: https://auth.custom.domain.com/__/auth/handler .
4. هنگام مقداردهی اولیه کتابخانه جاوا اسکریپت، دامنه سفارشی خود را با فیلد authDomain مشخص کنید:

   var config = {
     apiKey: '...',
     // Changed from 'PROJECT_ID.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://PROJECT_ID.firebaseio.com',
     projectId: 'PROJECT_ID',
     storageBucket: 'PROJECT_ID.firebasestorage.app',
     messagingSenderId: 'SENDER_ID'
   };
   firebase.initializeApp(config);

مراحل بعدی

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

• در برنامه‌های شما، روش پیشنهادی برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر (observer) روی شیء Auth است. سپس می‌توانید اطلاعات اولیه پروفایل کاربر را از شیء User دریافت کنید. به بخش مدیریت کاربران (Manage Users) مراجعه کنید.

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