میتوانید به کاربران خود اجازه دهید با استفاده از حسابهای 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
import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
Web
var provider = new firebase.auth.GoogleAuthProvider();
- اختیاری : محدوده های OAuth 2.0 دیگری را که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، با
addScope
تماس بگیرید. به عنوان مثال:به مستندات ارائه دهنده احراز هویت مراجعه کنید.Web
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
Web
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
- اختیاری : برای بومیسازی جریان 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({ 'login_hint': 'user@example.com' });
Web
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
- با استفاده از شی ارائه دهنده Google با Firebase احراز هویت کنید. میتوانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود، از کاربران خود بخواهید با حسابهای Google خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
- برای ورود به سیستم با یک پنجره بازشو،
signInWithPopup
را تماس بگیرید:همچنین توجه داشته باشید که میتوانید رمز OAuth ارائهدهنده Google را بازیابی کنید که میتواند برای واکشی دادههای اضافی با استفاده از APIهای Google استفاده شود.Web
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
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
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
هنگام بارگیری صفحه، توکن OAuth ارائهدهنده Google را بازیابی کنید:این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.Web
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
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 هستید، راهنمای اسناد خارج از صفحه را ببینید.
مراحل بعدی
پس از اینکه کاربر برای اولین بار وارد سیستم شد، یک حساب کاربری جدید ایجاد میشود و به اعتبارنامهها (یعنی نام کاربری و رمز عبور، شماره تلفن یا اطلاعات ارائهدهنده تاییدیه) مرتبط میشود که کاربر با آن وارد شده است. این حساب جدید بهعنوان بخشی از پروژه 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. });