میتوانید به کاربران خود اجازه دهید با استفاده از حسابهای Google خود با Firebase احراز هویت کنند. میتوانید از Firebase SDK برای اجرای جریان ورود به سیستم Google استفاده کنید، یا جریان ورود به سیستم را به صورت دستی با استفاده از کتابخانه Sign In With Google انجام دهید و کد ID حاصل را به Firebase ارسال کنید.
قبل از اینکه شروع کنی
- Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
- Google را به عنوان روش ورود به سیستم در کنسول Firebase فعال کنید:
- در کنسول Firebase ، بخش Auth را باز کنید.
- در برگه روش ورود به سیستم، روش ورود به سیستم Google را فعال کنید و روی ذخیره کلیک کنید.
جریان ورود به سیستم را با Firebase SDK مدیریت کنید
اگر در حال ساختن یک برنامه وب هستید، سادهترین راه برای احراز هویت کاربران با Firebase با استفاده از حسابهای Google آنها، مدیریت جریان ورود به سیستم با Firebase JavaScript SDK است. (اگر می خواهید یک کاربر را در Node.js یا سایر محیط های غیر مرورگر احراز هویت کنید، باید جریان ورود به سیستم را به صورت دستی مدیریت کنید.)
برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:
- یک نمونه از شی ارائه دهنده Google ایجاد کنید:
Web version 9
import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
Web version 8
var provider = new firebase.auth.GoogleAuthProvider();
- اختیاری : دامنه های OAuth 2.0 دیگری را که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، با
addScope
تماس بگیرید. مثلا:به مستندات ارائه دهنده احراز هویت مراجعه کنید.Web version 9
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
Web version 8
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
- اختیاری : برای بومیسازی جریان OAuth ارائهدهنده به زبان ترجیحی کاربر بدون ارسال صریح پارامترهای OAuth سفارشی مربوطه، قبل از شروع جریان OAuth، کد زبان را در نمونه Auth بهروزرسانی کنید. مثلا:
Web version 9
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
Web version 8
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- اختیاری : پارامترهای اضافی ارائهدهنده OAuth را که میخواهید با درخواست OAuth ارسال کنید، مشخص کنید. برای افزودن یک پارامتر سفارشی،
setCustomParameters
را در ارائه دهنده اولیه با یک شی حاوی کلید مشخص شده توسط اسناد ارائه دهنده OAuth و مقدار مربوطه فراخوانی کنید. مثلا:پارامترهای OAuth مورد نیاز رزرو شده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.Web version 9
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
Web version 8
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
- با استفاده از شی ارائه دهنده Google با Firebase احراز هویت کنید. میتوانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود، از کاربران خود بخواهید با حسابهای Google خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
- برای ورود به سیستم با یک پنجره بازشو،
signInWithPopup
تماس بگیرید:همچنین توجه داشته باشید که میتوانید رمز OAuth ارائهدهنده Google را بازیابی کنید که میتواند برای واکشی دادههای اضافی با استفاده از APIهای Google استفاده شود.Web version 9
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // This gives you a Google Access Token. You can use it to access the Google API. const credential = GoogleAuthProvider.credentialFromResult(result); const token = credential.accessToken; // The signed-in user info. 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; // The AuthCredential type that was used. const credential = GoogleAuthProvider.credentialFromError(error); // ... });
Web version 8
firebase.auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Google Access Token. You can use it to access the Google 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; // ... });
این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.
- برای ورود به صفحه ورود به سیستم، با
signInWithRedirect
تماس بگیرید: هنگام استفاده از «signInWithRedirect»، بهترین روشها را دنبال کنید.سپس، میتوانید با فراخوانیWeb version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
getRedirectResult
هنگام بارگیری صفحه، توکن OAuth ارائهدهنده Google را بازیابی کنید:این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.Web version 9
import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Google Access Token. You can use it to access Google APIs. const credential = GoogleAuthProvider.credentialFromResult(result); const token = credential.accessToken; // The signed-in user info. 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; // The AuthCredential type that was used. const credential = GoogleAuthProvider.credentialFromError(error); // ... });
Web version 8
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Google Access Token. You can use it to access the Google 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 هستید، باید شناسه برنامه افزودنی Chrome خود را اضافه کنید:
- پروژه خود را در کنسول Firebase باز کنید.
- در بخش Authentication ، صفحه روش ورود به سیستم را باز کنید.
- یک URI مانند زیر به لیست دامنه های مجاز اضافه کنید:
chrome-extension://CHROME_EXTENSION_ID
فقط عملیات بازشو ( signInWithPopup
، linkWithPopup
، و reauthenticateWithPopup
) برای برنامههای افزودنی Chrome در دسترس است، زیرا برنامههای افزودنی Chrome نمیتوانند از تغییر مسیرهای HTTP استفاده کنند. شما باید این روشها را از یک اسکریپت صفحه پسزمینه فراخوانی کنید تا از یک پنجره عملکرد مرورگر، زیرا پنجره بازشو احراز هویت، پنجره عملیات مرورگر را لغو میکند. روشهای بازشو فقط در برنامههای افزودنی با استفاده از Manifest V2 قابل استفاده هستند. Manifest V3 جدیدتر فقط به اسکریپتهای پسزمینه در قالب سرویسدهندگان اجازه میدهد، که اصلاً نمیتوانند عملیات بازشو را انجام دهند.
در فایل مانیفست افزونه Chrome خود، مطمئن شوید که URL https://apis.google.com
را به لیست مجاز content_security_policy
اضافه کنید.
مراحل بعدی
پس از اینکه کاربر برای اولین بار وارد سیستم شد، یک حساب کاربری جدید ایجاد میشود و به اعتبارنامهها (یعنی نام کاربری و رمز عبور، شماره تلفن یا اطلاعات ارائهدهنده تاییدیه) مرتبط میشود که کاربر با آن وارد شده است. این حساب جدید بهعنوان بخشی از پروژه Firebase شما ذخیره میشود و میتوان از آن برای شناسایی کاربر در همه برنامههای پروژه شما، صرف نظر از نحوه ورود کاربر به سیستم استفاده کرد.
در برنامه های شما، روش توصیه شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر بر روی شی
Auth
است. سپس می توانید اطلاعات اولیه پروفایل کاربر را از شیUser
دریافت کنید. به مدیریت کاربران مراجعه کنید.در قوانین امنیتی Firebase Realtime Database و Cloud Storage خود، میتوانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر
auth
دریافت کنید و از آن برای کنترل دادههایی که کاربر میتواند به آن دسترسی داشته باشد استفاده کنید.
میتوانید به کاربران اجازه دهید با استفاده از چندین ارائهدهنده احراز هویت، با پیوند دادن اعتبار ارائهدهنده تأیید اعتبار به یک حساب کاربری موجود، به برنامه شما وارد شوند.
برای خروج از سیستم کاربر، با خروج از سیستم تماس signOut
:
Web version 9
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web version 8
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });