میتوانید به کاربران خود اجازه دهید با استفاده از حسابهای فیسبوک خود با Firebase احراز هویت را با ادغام فیسبوک Login در برنامه خود انجام دهند. شما می توانید با استفاده از Firebase SDK برای انجام جریان ورود به سیستم، یا با انجام دستی جریان ورود به سیستم فیس بوک و ارسال توکن دسترسی به Firebase، Login فیس بوک را ادغام کنید.
قبل از شروع
- Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
- در سایت Facebook for Developers ، شناسه برنامه و یک App Secret را برای برنامه خود دریافت کنید.
- فعال کردن ورود به فیس بوک:
- در کنسول Firebase ، بخش Auth را باز کنید.
- در برگه روش ورود ، روش ورود به فیس بوک را فعال کنید و شناسه برنامه و رمز برنامه را که از فیس بوک دریافت کرده اید را مشخص کنید.
- سپس، مطمئن شوید که URI تغییر مسیر OAuth شما (به عنوان مثال
my-app-12345.firebaseapp.com/__/auth/handler
) به عنوان یکی از URI های تغییر مسیر OAuth شما در صفحه تنظیمات برنامه فیس بوک در سایت Facebook for Developers در محصول فهرست شده است. تنظیمات > پیکربندی ورود به فیس بوک .
جریان ورود به سیستم را با Firebase SDK مدیریت کنید
اگر در حال ساخت یک برنامه وب هستید، ساده ترین راه برای احراز هویت کاربران خود با Firebase با استفاده از حساب های فیس بوک آنها، مدیریت جریان ورود به سیستم با Firebase JavaScript SDK است. (اگر می خواهید یک کاربر را در Node.js یا سایر محیط های غیر مرورگر احراز هویت کنید، باید جریان ورود به سیستم را به صورت دستی مدیریت کنید.)
برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:
- یک نمونه از شی ارائه دهنده فیس بوک ایجاد کنید:
Web
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
Web
var provider = new firebase.auth.FacebookAuthProvider();
- اختیاری : دامنه های OAuth 2.0 دیگری را که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، با
addScope
تماس بگیرید. به عنوان مثال:به مستندات ارائه دهنده احراز هویت مراجعه کنید.Web
provider.addScope('user_birthday');
Web
provider.addScope('user_birthday');
- اختیاری : برای بومیسازی جریان OAuth ارائهدهنده به زبان ترجیحی کاربر بدون ارسال صریح پارامترهای OAuth سفارشی مربوطه، قبل از شروع جریان OAuth، کد زبان را در نمونه Auth بهروزرسانی کنید. به عنوان مثال:
Web
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- اختیاری : پارامترهای اضافی ارائهدهنده OAuth را که میخواهید با درخواست OAuth ارسال کنید، مشخص کنید. برای افزودن یک پارامتر سفارشی،
setCustomParameters
در ارائه دهنده اولیه با یک شی حاوی کلید مشخص شده توسط اسناد ارائه دهنده OAuth و مقدار مربوطه فراخوانی کنید. به عنوان مثال:پارامترهای OAuth مورد نیاز رزرو شده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.Web
provider.setCustomParameters({ 'display': 'popup' });
Web
provider.setCustomParameters({ 'display': 'popup' });
- احراز هویت با Firebase با استفاده از شی ارائه دهنده فیس بوک. می توانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود، از کاربران خود بخواهید با حساب های فیس بوک خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
- برای ورود به سیستم با یک پنجره بازشو،
signInWithPopup
را تماس بگیرید:همچنین توجه داشته باشید که می توانید توکن OAuth ارائه دهنده فیس بوک را بازیابی کنید که می تواند برای واکشی داده های اضافی با استفاده از API های فیس بوک استفاده شود.Web
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // This gives you a Facebook Access Token. You can use it to access the Facebook API. var accessToken = credential.accessToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.
- برای ورود به صفحه ورود به سیستم، با
signInWithRedirect
تماس بگیرید: هنگام استفاده از «signInWithRedirect» ، بهترین روشها را دنبال کنید.سپس، میتوانید با فراخوانیWeb
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
هنگام بارگیری صفحه، توکن OAuth ارائهدهنده فیسبوک را بازیابی کنید:این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.Web
import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const token = credential.accessToken; const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = credential.accessToken; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- برای ورود به سیستم با یک پنجره بازشو،
احراز هویت با 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 احراز هویت را با ادغام فیسبوک Login در برنامه خود انجام دهند. شما می توانید با استفاده از Firebase SDK برای انجام جریان ورود به سیستم، یا با انجام دستی جریان ورود به سیستم فیس بوک و ارسال توکن دسترسی به Firebase، Login فیس بوک را ادغام کنید.
قبل از شروع
- Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
- در سایت Facebook for Developers ، شناسه برنامه و یک App Secret را برای برنامه خود دریافت کنید.
- فعال کردن ورود به فیس بوک:
- در کنسول Firebase ، بخش Auth را باز کنید.
- در برگه روش ورود ، روش ورود به فیس بوک را فعال کنید و شناسه برنامه و رمز برنامه را که از فیس بوک دریافت کرده اید را مشخص کنید.
- سپس، مطمئن شوید که URI تغییر مسیر OAuth شما (به عنوان مثال
my-app-12345.firebaseapp.com/__/auth/handler
) به عنوان یکی از URI های تغییر مسیر OAuth شما در صفحه تنظیمات برنامه فیس بوک در سایت Facebook for Developers در محصول فهرست شده است. تنظیمات > پیکربندی ورود به فیس بوک .
جریان ورود به سیستم را با Firebase SDK مدیریت کنید
اگر در حال ساخت یک برنامه وب هستید، ساده ترین راه برای احراز هویت کاربران خود با Firebase با استفاده از حساب های فیس بوک آنها، مدیریت جریان ورود به سیستم با Firebase JavaScript SDK است. (اگر می خواهید یک کاربر را در Node.js یا سایر محیط های غیر مرورگر احراز هویت کنید، باید جریان ورود به سیستم را به صورت دستی مدیریت کنید.)
برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:
- یک نمونه از شی ارائه دهنده فیس بوک ایجاد کنید:
Web
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
Web
var provider = new firebase.auth.FacebookAuthProvider();
- اختیاری : دامنه های OAuth 2.0 دیگری را که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، با
addScope
تماس بگیرید. به عنوان مثال:به مستندات ارائه دهنده احراز هویت مراجعه کنید.Web
provider.addScope('user_birthday');
Web
provider.addScope('user_birthday');
- اختیاری : برای بومیسازی جریان OAuth ارائهدهنده به زبان ترجیحی کاربر بدون ارسال صریح پارامترهای OAuth سفارشی مربوطه، قبل از شروع جریان OAuth، کد زبان را در نمونه Auth بهروزرسانی کنید. به عنوان مثال:
Web
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- اختیاری : پارامترهای اضافی ارائهدهنده OAuth را که میخواهید با درخواست OAuth ارسال کنید، مشخص کنید. برای افزودن یک پارامتر سفارشی،
setCustomParameters
در ارائه دهنده اولیه با یک شی حاوی کلید مشخص شده توسط اسناد ارائه دهنده OAuth و مقدار مربوطه فراخوانی کنید. به عنوان مثال:پارامترهای OAuth مورد نیاز رزرو شده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.Web
provider.setCustomParameters({ 'display': 'popup' });
Web
provider.setCustomParameters({ 'display': 'popup' });
- احراز هویت با Firebase با استفاده از شی ارائه دهنده فیس بوک. می توانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود، از کاربران خود بخواهید با حساب های فیس بوک خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
- برای ورود به سیستم با یک پنجره بازشو،
signInWithPopup
را تماس بگیرید:همچنین توجه داشته باشید که می توانید توکن OAuth ارائه دهنده فیس بوک را بازیابی کنید که می تواند برای واکشی داده های اضافی با استفاده از API های فیس بوک استفاده شود.Web
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // This gives you a Facebook Access Token. You can use it to access the Facebook API. var accessToken = credential.accessToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.
- برای ورود به صفحه ورود به سیستم، با
signInWithRedirect
تماس بگیرید: هنگام استفاده از «signInWithRedirect» ، بهترین روشها را دنبال کنید.سپس، میتوانید با فراخوانیWeb
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
هنگام بارگیری صفحه، توکن OAuth ارائهدهنده فیسبوک را بازیابی کنید:این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.Web
import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const token = credential.accessToken; const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = credential.accessToken; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- برای ورود به سیستم با یک پنجره بازشو،
احراز هویت با 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. });