میتوانید به کاربران خود اجازه دهید با Firebase با استفاده از ارائهدهندگان OAuth مانند Yahoo با ادغام ورود به سیستم OAuth عمومی در برنامه خود با استفاده از Firebase SDK برای انجام جریان ورود به سیستم از پایان به انتها، احراز هویت کنند.
قبل از شروع
برای ورود کاربرانی که از حساب های Yahoo استفاده می کنند، ابتدا باید یاهو را به عنوان ارائه دهنده ورود به پروژه Firebase خود فعال کنید:
- Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
- در کنسول Firebase ، بخش Auth را باز کنید.
- در زبانه روش ورود ، ارائه دهنده یاهو را فعال کنید.
- شناسه مشتری و Client Secret را از کنسول توسعه دهنده آن ارائه دهنده به پیکربندی ارائه دهنده اضافه کنید:
برای ثبت نام سرویس گیرنده Yahoo OAuth، مستندات توسعه دهنده یاهو را در مورد ثبت یک برنامه وب در Yahoo دنبال کنید.
حتماً دو مجوز OpenID Connect API را انتخاب کنید:
profile
وemail
.- هنگام ثبت برنامه در این ارائه دهندگان، مطمئن شوید که دامنه
*.firebaseapp.com
برای پروژه خود به عنوان دامنه تغییر مسیر برای برنامه خود ثبت کنید.
- روی ذخیره کلیک کنید.
جریان ورود به سیستم را با Firebase SDK مدیریت کنید
اگر در حال ساخت یک برنامه وب هستید، ساده ترین راه برای احراز هویت کاربران خود با Firebase با استفاده از حساب های Yahoo آنها این است که کل جریان ورود به سیستم را با Firebase JavaScript SDK مدیریت کنید.
برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:
با استفاده از شناسه ارائه دهنده yahoo.com یک نمونه از یک OAuthProvider ایجاد کنید.
Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
Web
var provider = new firebase.auth.OAuthProvider('yahoo.com');
اختیاری : پارامترهای سفارشی OAuth اضافی را که می خواهید با درخواست OAuth ارسال کنید، مشخص کنید.
Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
برای پارامترهایی که یاهو پشتیبانی می کند، به مستندات Yahoo OAuth مراجعه کنید. توجه داشته باشید که نمیتوانید پارامترهای مورد نیاز Firebase را با
setCustomParameters()
ارسال کنید. این پارامترها عبارتند از client_id , redirect_uri , answer_type , scope و state .اختیاری : دامنه های OAuth 2.0 اضافی را فراتر از
profile
وemail
که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. اگر برنامه شما نیاز به دسترسی به دادههای کاربر خصوصی از APIهای یاهو دارد، باید مجوزهای APIهای یاهو را تحت مجوزهای API در کنسول توسعهدهنده یاهو درخواست کنید. دامنه های درخواستی 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');
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');
برای کسب اطلاعات بیشتر، به مستندات حوزه یاهو مراجعه کنید.
با استفاده از شی ارائه دهنده OAuth با Firebase احراز هویت کنید. می توانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود به سیستم از کاربران خود بخواهید با حساب های یاهو خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
برای ورود به سیستم با یک پنجره بازشو،
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. });
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. });
برای ورود به سیستم با تغییر مسیر به صفحه ورود به سیستم،
signInWithRedirect
تماس بگیرید:
firebase.auth().signInWithRedirect(provider);
پس از تکمیل ورود کاربر و بازگشت به صفحه، می توانید با فراخوانی
getRedirectResult
نتیجه ورود را دریافت کنید.Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
پس از تکمیل موفقیت آمیز، کد OAuth ID و نشانه دسترسی مرتبط با ارائه دهنده را می توان از شی
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
شناسه کاربر یاهو است که می تواند از فیلدfirebase.auth().currentUser.providerData[0].uid
یا ازresult.additionalUserInfo.profile
بازیابی شود.در حالی که مثالهای بالا بر جریانهای ورود تمرکز دارند، شما همچنین میتوانید با استفاده از
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. });
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. });
از همین الگو می توان با
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. });
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. });
احراز هویت با Firebase در یک برنامه افزودنی Chrome
اگر در حال ساخت یک برنامه افزودنی Chrome هستید، راهنمای اسناد خارج از صفحه را ببینید.
مراحل بعدی
پس از اینکه کاربر برای اولین بار وارد سیستم شد، یک حساب کاربری جدید ایجاد میشود و به اعتبارنامهها (یعنی نام کاربری و رمز عبور، شماره تلفن یا اطلاعات ارائهدهنده تاییدیه) مرتبط میشود که کاربر با آن وارد شده است. این حساب جدید بهعنوان بخشی از پروژه Firebase شما ذخیره میشود و میتوان از آن برای شناسایی کاربر در همه برنامههای پروژه شما، صرف نظر از نحوه ورود کاربر به سیستم استفاده کرد.
در برنامه های شما، روش توصیه شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر بر روی شی
Auth
است. سپس می توانید اطلاعات اولیه پروفایل کاربر را از شیUser
دریافت کنید. به مدیریت کاربران مراجعه کنید.در قوانین امنیتی Firebase Realtime Database و Cloud Storage خود، میتوانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر
auth
دریافت کنید و از آن برای کنترل دادههایی که کاربر میتواند به آن دسترسی داشته باشد استفاده کنید.
میتوانید به کاربران اجازه دهید با استفاده از چندین ارائهدهنده احراز هویت، با پیوند دادن اعتبار ارائهدهنده تأیید اعتبار به یک حساب کاربری موجود، به برنامه شما وارد شوند.
برای خروج از سیستم کاربر، signOut
تماس بگیرید:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
میتوانید به کاربران خود اجازه دهید با Firebase با استفاده از ارائهدهندگان OAuth مانند Yahoo با ادغام ورود به سیستم OAuth عمومی در برنامه خود با استفاده از Firebase SDK برای انجام جریان ورود به سیستم از پایان به انتها، احراز هویت کنند.
قبل از شروع
برای ورود کاربرانی که از حساب های Yahoo استفاده می کنند، ابتدا باید یاهو را به عنوان ارائه دهنده ورود به پروژه Firebase خود فعال کنید:
- Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
- در کنسول Firebase ، بخش Auth را باز کنید.
- در زبانه روش ورود ، ارائه دهنده یاهو را فعال کنید.
- شناسه مشتری و Client Secret را از کنسول توسعه دهنده آن ارائه دهنده به پیکربندی ارائه دهنده اضافه کنید:
برای ثبت نام سرویس گیرنده Yahoo OAuth، مستندات توسعه دهنده یاهو را در مورد ثبت یک برنامه وب در Yahoo دنبال کنید.
حتماً دو مجوز OpenID Connect API را انتخاب کنید:
profile
وemail
.- هنگام ثبت برنامه در این ارائه دهندگان، مطمئن شوید که دامنه
*.firebaseapp.com
برای پروژه خود به عنوان دامنه تغییر مسیر برای برنامه خود ثبت کنید.
- روی ذخیره کلیک کنید.
جریان ورود به سیستم را با Firebase SDK مدیریت کنید
اگر در حال ساخت یک برنامه وب هستید، ساده ترین راه برای احراز هویت کاربران خود با Firebase با استفاده از حساب های Yahoo آنها این است که کل جریان ورود به سیستم را با Firebase JavaScript SDK مدیریت کنید.
برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:
با استفاده از شناسه ارائه دهنده yahoo.com یک نمونه از یک OAuthProvider ایجاد کنید.
Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
Web
var provider = new firebase.auth.OAuthProvider('yahoo.com');
اختیاری : پارامترهای سفارشی OAuth اضافی را که می خواهید با درخواست OAuth ارسال کنید، مشخص کنید.
Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
برای پارامترهایی که یاهو پشتیبانی می کند، به مستندات Yahoo OAuth مراجعه کنید. توجه داشته باشید که نمیتوانید پارامترهای مورد نیاز Firebase را با
setCustomParameters()
ارسال کنید. این پارامترها عبارتند از client_id , redirect_uri , answer_type , scope و state .اختیاری : دامنه های OAuth 2.0 اضافی را فراتر از
profile
وemail
که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. اگر برنامه شما نیاز به دسترسی به دادههای کاربر خصوصی از APIهای یاهو دارد، باید مجوزهای APIهای یاهو را تحت مجوزهای API در کنسول توسعهدهنده یاهو درخواست کنید. دامنه های درخواستی 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');
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');
برای کسب اطلاعات بیشتر، به مستندات حوزه یاهو مراجعه کنید.
با استفاده از شی ارائه دهنده OAuth با Firebase احراز هویت کنید. می توانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود به سیستم از کاربران خود بخواهید با حساب های یاهو خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
برای ورود به سیستم با یک پنجره بازشو،
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. });
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. });
برای ورود به سیستم با تغییر مسیر به صفحه ورود به سیستم،
signInWithRedirect
تماس بگیرید:
firebase.auth().signInWithRedirect(provider);
پس از تکمیل ورود کاربر و بازگشت به صفحه، می توانید با فراخوانی
getRedirectResult
نتیجه ورود را دریافت کنید.Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
پس از تکمیل موفقیت آمیز، کد OAuth ID و نشانه دسترسی مرتبط با ارائه دهنده را می توان از شی
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
شناسه کاربر یاهو است که می تواند از فیلدfirebase.auth().currentUser.providerData[0].uid
یا ازresult.additionalUserInfo.profile
بازیابی شود.در حالی که مثالهای بالا بر جریانهای ورود تمرکز دارند، شما همچنین میتوانید با استفاده از
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. });
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. });
از همین الگو می توان با
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. });
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. });
احراز هویت با Firebase در یک برنامه افزودنی Chrome
اگر در حال ساخت یک برنامه افزودنی Chrome هستید، راهنمای اسناد خارج از صفحه را ببینید.
مراحل بعدی
پس از اینکه کاربر برای اولین بار وارد سیستم شد، یک حساب کاربری جدید ایجاد میشود و به اعتبارنامهها (یعنی نام کاربری و رمز عبور، شماره تلفن یا اطلاعات ارائهدهنده تاییدیه) مرتبط میشود که کاربر با آن وارد شده است. این حساب جدید بهعنوان بخشی از پروژه Firebase شما ذخیره میشود و میتوان از آن برای شناسایی کاربر در همه برنامههای پروژه شما، صرف نظر از نحوه ورود کاربر به سیستم استفاده کرد.
در برنامه های شما، روش توصیه شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر بر روی شی
Auth
است. سپس می توانید اطلاعات اولیه پروفایل کاربر را از شیUser
دریافت کنید. به مدیریت کاربران مراجعه کنید.در قوانین امنیتی Firebase Realtime Database و Cloud Storage خود، میتوانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر
auth
دریافت کنید و از آن برای کنترل دادههایی که کاربر میتواند به آن دسترسی داشته باشد استفاده کنید.
میتوانید به کاربران اجازه دهید با استفاده از چندین ارائهدهنده احراز هویت، با پیوند دادن اعتبار ارائهدهنده تأیید اعتبار به یک حساب کاربری موجود، به برنامه شما وارد شوند.
برای خروج از سیستم کاربر، signOut
تماس بگیرید:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });