احراز هویت یک جنبه اساسی از وب مدرن و برنامه های کاربردی تلفن همراه است. این تضمین می کند که کاربران می توانند به طور ایمن به یک برنامه دسترسی داشته باشند در حالی که از داده های خود محافظت می کنند.

Firebase، یک پلتفرم توسعه یافته توسط Google، یک روش ساده و کارآمد برای گفت ن احراز هویت به برنامه شما ارائه می دهد.

در این مقاله، من شما را از طریق مراحل احراز هویت برنامه خود با استفاده از Firebase راهنمایی می کنم. چه در حال کار بر روی یک برنامه وب یا تلفن همراه باشید، Firebase راهی ساده برای ادغام روش های مختلف احراز هویت ارائه می دهد.

در پایان این مقاله، شما یک سیستم احراز هویت کاملاً کاربردی خواهید داشت که به کاربران امکان می دهد ثبت نام کنند، وارد سیستم شوند و حساب های خود را به صورت ایمن مدیریت کنند.

فهرست مطالب

فهرست مطالب

پیش نیازها

چرا از Firebase برای احراز هویت استفاده کنیم؟

مرحله 1: نحوه راه اندازی یک پروژه Firebase

مرحله 2: چگونه Firebase را در پروژه خود نصب کنید

مرحله 3: چگونه Firebase را در برنامه خود راه اندازی کنید

مرحله 4: نحوه تنظیم روش های احراز هویت

روش احراز هویت با استفاده از گوگل

مرحله 5: نحوه آپلود در GitHub

نتیجه گیری

پیش نیازها

قبل از شروع، شما باید موارد زیر را داشته باشید:

یک حساب Google : Firebase یک محصول Google است و برای دسترسی به کنسول Firebase و استفاده از خدمات Firebase به یک حساب Google نیاز دارید. اگر حساب Google ندارید، می‌توانید در اینجا یک حساب ایجاد کنید .

چرا از Firebase برای احراز هویت استفاده کنیم؟

Firebase Authentication خدمات پشتیبان و SDK های با کاربرد آسان را برای احراز هویت کاربران در برنامه شما ارائه می دهد. از روش های مختلف احراز هویت پشتیبانی می کند، از جمله:

احراز هویت ایمیل و رمز عبور

احراز هویت گوگل، فیسبوک، توییتر و گیت هاب

احراز هویت شماره تلفن

احراز هویت ناشناس

این ویژگی‌ها Firebase را به گزینه‌ای عالی برای توسعه‌دهندگانی تبدیل می‌کند که می‌خواهند احراز هویت ایمن و قابل اعتماد را بدون پرداختن به پیچیدگی‌های ساخت یک سیستم احراز هویت سفارشی پیاده‌سازی کنند.

بیایید با راه اندازی شروع کنیم!

مرحله 1: نحوه راه اندازی یک پروژه Firebase

قبل از استفاده از Firebase Authentication، باید یک پروژه Firebase راه اندازی کنید.

من یک پروژه Firebase ایجاد کنید

به کنسول Firebase بروید.

روی " گفت ن پروژه" کلیک کنید و دستورالعمل های روی صفحه را برای ایجاد یک پروژه جدید دنبال کنید.

پس از ایجاد پروژه شما، به داشبورد پروژه Firebase هدایت خواهید شد.

ii برنامه خود را به پروژه اضافه کنید

در کنسول Firebase، روی نماد "Web" (</>) کلیک کنید تا یک برنامه وب به پروژه Firebase خود اضافه کنید.

برنامه خود را با یک نام مستعار ثبت کنید و روی "ثبت برنامه" کلیک کنید.

یک قطعه Firebase SDK (کیت توسعه نرم افزار) به شما ارائه می شود که باید آن را به برنامه خود اضافه کنید.

مرحله 2: چگونه Firebase را در پروژه خود نصب کنید

برای شروع با Firebase Authentication، ابتدا باید Firebase را در پروژه خود نصب کنید. در اینجا نحوه انجام این کار آمده است:

در ویرایشگر کد خود، ترمینال پروژه خود را باز کنید.

برای نصب Firebase دستور زیر را اجرا کنید:

 npm install firebase

این دستور Firebase را به پروژه شما اضافه می کند و به شما امکان می دهد از احراز هویت و سایر ویژگی های آن استفاده کنید.

مرحله 3: چگونه Firebase را در برنامه خود راه اندازی کنید

پس از نصب Firebase، مرحله بعدی این است که آن را در پروژه خود با استفاده از قطعه پیکربندی ارائه شده در کنسول Firebase، که معمولاً به عنوان قطعه Firebase SDK نامیده می شود، مقداردهی اولیه کنید.

برای تنظیم این:

یک پوشه به نام config در فهرست پروژه خود ایجاد کنید.

در داخل پوشه، فایلی به نام firebase.js ایجاد کنید.

قطعه SDK را که از کنسول Firebase به دست آورده اید در فایل firebase.js قرار دهید.

در اینجا نحوه تنظیم پروژه شما باید به این صورت باشد:

این کد Firebase را در برنامه شما مقداردهی اولیه می‌کند و به شما امکان می‌دهد از احراز هویت Firebase و سایر سرویس‌ها، مانند فضای ذخیره‌سازی Firebase، برای مدیریت داده‌های خود استفاده کنید.

توجه: مطمئن شوید که کلید کاربردی منحصر به فرد خود را برای عملکرد صحیح برنامه خود ایجاد کرده اید.

مرحله 4: نحوه تنظیم روش های احراز هویت

Firebase از چندین روش احراز هویت مانند استفاده از Google، Facebook، GitHub و غیره پشتیبانی می کند.

اما اجازه دهید احراز هویت ایمیل و رمز عبور را به عنوان مثال تنظیم کنیم:

در منوی سمت چپ کنسول Firebase به "Authentication" بروید.

روی تب "روش ورود به سیستم" کلیک کنید.

"ایمیل/گذرواژه" را در بخش "ارائه دهندگان ورود به سیستم" فعال کنید.

از ایمیل و رمز عبور" class="image--center mx-auto" width="1920" height="971" loading="lazy">

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

بیایید یک مثال کاری از یک تابع ثبت نام ایجاد کنیم:

در پروژه خود، یک فایل با نام sign-up.jsx ایجاد کنید.

تابع مورد نیاز برای ایجاد کاربر را از Firebase وارد کنید. تابعی که برای ایجاد یک کاربر استفاده می کنید، createUserWithEmailAndPassword است.

قبل از ایجاد کاربر، مطمئن شوید که نمونه auth که در firebase.js مقداردهی اولیه شده است را به فایل sign-up.jsx وارد کنید.

 import { auth } from '../../../config/firebase' ; import { createUserWithEmailAndPassword } from 'firebase/auth' ; const SignUp = () => { // To create the user with email and password const handleUser = async (e) => { e.preventDefault(); try { await createUserWithEmailAndPassword(auth, email, password); alert( 'User created successfully' ); } catch (err) { console .error(err); } }; // ... (rest of your SignUp component) };

در عبارت return، من از یک فرم استفاده خواهم کرد، پس باید برای مدیریت و ردیابی تغییرات در فیلدهای ورودی فرم، قلاب useState() را وارد کنیم.

 <div> < h2 > Register your Account </ h2 > < form onSubmit = {handleCreateUser} > < div > < label > Name </ label > < input type = "text" id = "name" name = "name" value = {name} onChange = {(e) => setName(e.target.value)} /> </ div > < div > < label htmlFor = "email" > Email </ label > < input type = "email" id = "email" name = "email" value = {email} onChange = {(e) => setEmail(e.target.value)} /> </ div > < div > < label htmlFor = "password" > Password </ label > < input type = "password" id = "password" name = "password" value = {password} onChange = {(e) => setPassword(e.target.value)} /> </ div > < div > < label htmlFor = "confirm_password" className = {styles.label} > Confirm Password </ label > < input type = "password" id = "confirm_password" name = "confirm_password" value = {confirmPassword} onChange = {(e) => setConfirmPassword(e.target.value)} /> </ div > < div > < div > < input type = "checkbox" id = "terms" name = "terms" className = "mr-2" /> < label htmlFor = "terms" > I agree to the < a href = "#" > Terms and Conditions </ a > </ label > </ div > </ div > < button type = "submit" > Register </ button > </ form > </div>

قرار دادن همه کدها با هم ( Sign-up.jsx ):

 import { useState } from 'react' ; import { auth } from '../../config/firebase' ; import { createUserWithEmailAndPassword } from 'firebase/auth' ; const SignUp = () => { const [name, setName] = useState( '' ); const [email, setEmail] = useState( '' ); const [password, setPassword] = useState( '' ); const [confirmPassword, setConfirmPassword] = useState( '' ); const handleCreateUser = async (e) => { e.preventDefault(); try { await createUserWithEmailAndPassword(auth, email, password); alert( 'User created successfully' ); } catch (error) { console .log(error); } }; return ( < div > < h2 > Register your Account </ h2 > < form onSubmit = {handleCreateUser} > < div > < label > Name </ label > < input type = 'text' id = 'name' name = 'name' value = {name} onChange = {(e) => setName(e.target.value)} /> </ div > < div > < label htmlFor = 'email' > Email </ label > < input type = 'email' id = 'email' name = 'email' value = {email} onChange = {(e) => setEmail(e.target.value)} /> </ div > < div > < label htmlFor = 'password' > Password </ label > < input type = 'password' id = 'password' name = 'password' value = {password} onChange = {(e) => setPassword(e.target.value)} /> </ div > < div > < label htmlFor = 'confirm_password' > Confirm Password </ label > < input type = 'password' id = 'confirm_password' name = 'confirm_password' value = {confirmPassword} onChange = {(e) => setConfirmPassword(e.target.value)} /> </ div > < div > < div > < input type = 'checkbox' id = 'terms' name = 'terms' className = 'mr-2' /> < label htmlFor = 'terms' > I agree to the{' '} < a href = '#' > Terms and Conditions </ a > </ label > </ div > </ div > < button type = 'submit' > Register </ button > </ form > </ div > ); }; export default SignUp;

اکنون که عملکرد ثبت نام را ایجاد کرده اید، زمان آن رسیده است که یک تابع ورود به سیستم اضافه کنید تا کاربران بتوانند وارد برنامه شما شوند.

در اینجا نحوه ایجاد یک تابع ورود به سیستم ساده آمده است:

در پروژه خود، یک فایل جدید با نام sign-in.jsx ایجاد کنید.

نمونه auth اولیه را از firebase.js به sign-in.jsx وارد کنید.

از تابع signInWithEmailAndPassword از Firebase استفاده کنید تا به کاربران اجازه ورود به سیستم را بدهید.

ساختار تابع ورود به سیستم در اینجا آمده است:

 import { useState } from 'react' ; import { auth } from '../../config/firebase' ; import { signInWithEmailAndPassword } from 'firebase/auth' ; const SignIn = () => { const [email, setEmail] = useState( '' ); const [password, setPassword] = useState( '' ); const handleSignIn = async (e) => { e.preventDefault(); try { await signInWithEmailAndPassword(auth, email, password); alert( 'Signed in successfully' ); } catch (error) { console .error(error); } }; return ( < div > < h2 > Sign In </ h2 > < form onSubmit = {handleSignIn} > < div > < label htmlFor = "email" > Email </ label > < input type = "email" value = {email} onChange = {(e) => setEmail(e.target.value)} /> </ div > < div > < label htmlFor = "password" > Password </ label > < input type = "password" value = {password} onChange = {(e) => setPassword(e.target.value)} /> </ div > < button type = "submit" > Sign In </ button > </ form > </ div > ); }; export default SignIn;

نمایش بصری نتیجه از کد بالا هم ثبت نام و هم ورود به سیستم

روش احراز هویت با استفاده از گوگل

همانطور که قبلاً ذکر شد، می‌توانید ایمیل‌های کاربران را مستقیماً از طریق یک فرم قبل از استفاده از برنامه شما و روش‌های دیگر برای احراز هویت کاربران جمع‌آوری کنید.

برای استفاده از احراز هویت گوگل:

در کنسول Firebase، به "Authentication" در منوی سمت چپ بروید.

روی تب "روش ورود به سیستم" کلیک کنید.

«Google» را در بخش «ارائه‌دهندگان ورود به سیستم» فعال کنید (برای این آموزش، ما به Google پایبند هستیم، اگرچه می‌توانید ارائه‌دهندگان دیگری را انتخاب کنید).

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

بیایید نحوه تنظیم یک تابع ثبت نام Google را مرور کنیم:

ابتدا فایلی به نام Google.jsx در پروژه خود ایجاد کنید.

auth و GoogleAuthProvider از فایل firebase.js وارد کنید

 // Import the functions you need from the SDKs you need import { initializeApp } from 'firebase/app' ; import { getAuth, GoogleAuthProvider } from 'firebase/auth' ; const firebaseConfig = { apiKey : ...., authDomain : ...., projectId :.... , storageBucket : .... , messagingSenderId : .... , appId : ...., measurementId : ...., }; // Initialize Firebase const app = initializeApp(firebaseConfig); export const auth= getAuth(app); export const googleProvider = new GoogleAuthProvider(app);

ارائه‌دهنده Google را راه‌اندازی کنید و آن را برای استفاده در بخش‌های دیگر برنامه خود صادر کنید.

 import { auth, googleProvider } from './firebase' ; // Adjust the path to your Firebase config file import { signInWithPopup } from 'firebase/auth' ;

تابع Firebase لازم را برای احراز هویت یک کاربر وارد کنید. از روش signInWithPopup برای احراز هویت کاربران با Google استفاده کنید.

در حالی که روش‌های احراز هویت دیگری در دسترس است، signInWithPopup ترجیح داده می‌شود زیرا کاربران را در برنامه نگه می‌دارد و نیازی به باز کردن برگه مرورگر جدید نیست.

 const signInWithGoogle = async () => { try { await signInWithPopup(auth, googleProvider); alert( 'Signed in successfully with Google' ); } catch (error) { console .error( 'Error signing in with Google' , error); } };

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

 return ( < div > < button onClick = {signInWithGoogle} > Sign in with Google </ button > </ div > );

نمایش بصری نتیجه از کد بالا:

از signInWithPop()" class="image--center mx-auto" width="1920" height="971" loading="lazy">

Firebase به شما اجازه می دهد تا کاربران را به راحتی از برنامه خود خارج کنید. در اینجا نحوه پیاده سازی تابع خروج از سیستم آمده است:

ابتدا تابع signOut را از Firebase وارد کنید.

پس از وارد کردن، می‌توانید با signOut تماس بگیرید تا کاربر از برنامه خارج شود.

در اینجا یک مثال ساده آورده شده است:

 import { auth } from './config/firebase' ; // Adjust the path based on your file structure import { signOut } from 'firebase/auth' ; const handleSignOut = async () => { try { await signOut(auth); alert( 'User signed out successfully' ); } catch (error) { console .error( 'Error signing out:' , error); } };

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

در عبارت بازگشت، معمولاً دکمه‌ای خواهید داشت که با کلیک کردن، تابع handleSignOut را فعال می‌کند.

 return ( < div > < h2 > Welcome to the app! </ h2 > < button onClick = {handleSignOut} > Sign Out </ button > </ div >

نمایش بصری نتیجه از کد بالا

مطمئن شوید که پروژه Firebase شما برای انجام صحیح احراز هویت، از جمله ورود به سیستم Google، پیکربندی شده است تا از تجربه ورود و خروج روان مطمئن شوید.

مرحله 5: نحوه آپلود در GitHub

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

ایجاد یک فایل env

در ریشه برنامه خود، یک فایل env. ایجاد کنید.

کلید Firebase API خود را به فایل firebase.js اضافه کنید.

برای دسترسی به کلید API Firebase خود از import یا process.env استفاده کنید. از آنجایی که برنامه با Vite ایجاد شد، از import استفاده کردم.

در نهایت، فایل .gitignore خود را به‌روزرسانی کنید تا شامل فایل env باشد. این مرحله همچنین از سایر فایل ها و دایرکتوری های حساس مانند node_modules محافظت می کند.

 # Logs logs node_modules .env

نتیجه گیری

در پایان، این راهنما نحوه ادغام احراز هویت Firebase را در برنامه خود توضیح می دهد. Firebase گفت ن آپشن های احراز هویت مانند ایمیل/رمز عبور و ورود به سیستم Google را ساده می‌کند.

با راه‌اندازی یک پروژه Firebase، نصب و راه‌اندازی اولیه آن در برنامه‌تان، می‌توانید بدون نیاز به شروع از ابتدا یا راه‌اندازی سرور، عملکردهای ثبت نام و ورود به سیستم کاربر را به طور مؤثر ایجاد کنید.

اگر این مقاله برای شما مفید بود، آن را با دیگران به اشتراک بگذارید که ممکن است آن را نیز جالب بدانند.

با دنبال کردن من در توییتر ، لینکدین و گیت هاب ، از پروژه های من به روز بمانید.

کدی که برای این مقاله آموزشی استفاده کردم را می توانید در GitHub من پیدا کنید.

ممنون که خواندید.

خبرکاو