میتوانید از Firebase Authentication برای ورود به سیستم استفاده کنید و با ارسال یک ایمیل حاوی یک پیوند به او، کاربر میتواند روی آن کلیک کند تا وارد شود. در این فرآیند، آدرس ایمیل کاربر نیز تأیید میشود.
ورود از طریق ایمیل مزایای زیادی دارد:
- ثبت نام و ورود به سیستم با اصطکاک کم.
- خطر کمتر استفاده مجدد از رمز عبور در بین برنامهها، که میتواند امنیت رمزهای عبور انتخاب شده را نیز تضعیف کند.
- امکان احراز هویت یک کاربر و همچنین تأیید اینکه کاربر مالک قانونی آدرس ایمیل است.
- یک کاربر برای ورود فقط به یک حساب ایمیل قابل دسترسی نیاز دارد. مالکیت شماره تلفن یا حساب رسانه اجتماعی مورد نیاز نیست.
- یک کاربر می تواند بدون نیاز به ارائه (یا به خاطر سپردن) رمز عبور، به طور ایمن وارد سیستم شود، که ممکن است در یک دستگاه تلفن همراه دست و پا گیر باشد.
- کاربر موجودی که قبلاً با یک شناسه ایمیل (رمز عبور یا فدرال) وارد شده است را می توان ارتقا داد تا فقط با ایمیل وارد شود. به عنوان مثال، کاربری که رمز عبور خود را فراموش کرده است همچنان می تواند بدون نیاز به بازنشانی رمز عبور خود وارد سیستم شود.
قبل از شروع
اگر قبلاً این کار را نکردهاید، قطعه مقداردهی اولیه را از کنسول Firebase در پروژه خود کپی کنید، همانطور که در Add Firebase به پروژه JavaScript خود توضیح داده شده است.
ورود به سیستم Email Link را برای پروژه Firebase خود فعال کنید
برای ورود کاربران از طریق پیوند ایمیل، ابتدا باید روش ورود ارائه دهنده ایمیل و پیوند ایمیل را برای پروژه Firebase خود فعال کنید:
- در کنسول Firebase ، بخش Auth را باز کنید.
- در برگه روش ورود به سیستم ، ارائه دهنده ایمیل/گذرواژه را فعال کنید. توجه داشته باشید که ورود ایمیل/رمز عبور برای استفاده از ورود به سیستم پیوند ایمیل باید فعال باشد.
- در همان بخش، روش ورود به سیستم پیوند ایمیل (ورود بدون رمز عبور) را فعال کنید.
- روی ذخیره کلیک کنید.
یک پیوند احراز هویت به آدرس ایمیل کاربر ارسال کنید
برای شروع جریان احراز هویت، رابطی را به کاربر ارائه دهید که از کاربر میخواهد آدرس ایمیل خود را ارائه کند و سپس sendSignInLinkToEmail
را فراخوانی کنید تا از Firebase درخواست کنید که پیوند احراز هویت را به ایمیل کاربر ارسال کند.
شی
ActionCodeSettings
را بسازید، که دستورالعملهایی را در مورد نحوه ساخت پیوند ایمیل به Firebase ارائه میدهد. فیلدهای زیر را تنظیم کنید:-
url
: پیوند عمیق برای جاسازی و هر حالت اضافی که باید همراه آن منتقل شود. دامنه پیوند باید در لیست دامنه های مجاز Firebase Console اضافه شود که با رفتن به برگه روش ورود به سیستم (Authentication -> Settings) می توانید آن را پیدا کنید. -
android
وios
: به Firebase Authentication کمک می کند تا تعیین کند که آیا باید یک پیوند فقط وب یا تلفن همراه ایجاد کند که در دستگاه Android یا Apple باز شود. -
handleCodeInApp
: روی true تنظیم کنید. عملیات ورود به سیستم برخلاف سایر اقدامات ایمیل خارج از باند (بازنشانی رمز عبور و تأیید ایمیل) باید همیشه در برنامه تکمیل شود. این به این دلیل است که در پایان جریان، انتظار می رود کاربر وارد سیستم شود و وضعیت Auth او در برنامه باقی بماند. -
linkDomain
: زمانی که دامنههای پیوند Hosting سفارشی برای یک پروژه تعریف میشوند، مشخص کنید که در هنگام باز شدن پیوند توسط یک برنامه تلفن همراه مشخص، از کدام یک استفاده کنید. در غیر این صورت، دامنه پیش فرض به طور خودکار انتخاب می شود (به عنوان مثال،PROJECT_ID .firebaseapp.com
). dynamicLinkDomain
: منسوخ شده است. این پارامتر را مشخص نکنید.const actionCodeSettings = { // URL you want to redirect back to. The domain (www.example.com) for this // URL must be in the authorized domains list in the Firebase Console. url: 'https://www.example.com/finishSignUp?cartId=1234', // This must be true. handleCodeInApp: true, iOS: { bundleId: 'com.example.ios' }, android: { packageName: 'com.example.android', installApp: true, minimumVersion: '12' }, // The domain must be configured in Firebase Hosting and owned by the project. linkDomain: 'custom-domain.com' };
var actionCodeSettings = { // URL you want to redirect back to. The domain (www.example.com) for this // URL must be in the authorized domains list in the Firebase Console. url: 'https://www.example.com/finishSignUp?cartId=1234', // This must be true. handleCodeInApp: true, iOS: { bundleId: 'com.example.ios' }, android: { packageName: 'com.example.android', installApp: true, minimumVersion: '12' }, dynamicLinkDomain: 'example.page.link' };
برای کسب اطلاعات بیشتر درباره ActionCodeSettings
، به بخش Passing State in Email Actions مراجعه کنید.-
از کاربر ایمیل خود را بخواهید. پیوند احراز هویت را به ایمیل کاربر ارسال کنید و ایمیل کاربر را در صورتی که کاربر ورود به ایمیل را در همان دستگاه کامل کند، ذخیره کنید. import { getAuth, sendSignInLinkToEmail } from "firebase/auth"; const auth = getAuth(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { // The link was successfully sent. Inform the user. // Save the email locally so you don't need to ask the user for it again // if they open the link on the same device. window.localStorage.setItem('emailForSignIn', email); // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // ... });
firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings) .then(() => { // The link was successfully sent. Inform the user. // Save the email locally so you don't need to ask the user for it again // if they open the link on the same device. window.localStorage.setItem('emailForSignIn', email); // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // ... });
با پیوند ایمیل وارد سیستم شوید
نگرانی های امنیتی
تکمیل ورود به سیستم در یک صفحه وب
isSignInWithEmailLink
API ساده می کند تا بررسی کند که آیا یک پیوند یک ورود به سیستم با پیوند ایمیل است یا خیر.
signInWithEmailLink
با ایمیل کاربر و پیوند ایمیل واقعی حاوی کد یکبار مصرف تماس بگیرید.
import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; // Confirm the link is a sign-in with email link. const auth = getAuth(); if (isSignInWithEmailLink(auth, window.location.href)) { // Additional state parameters can also be passed via URL. // This can be used to continue the user's intended action before triggering // the sign-in operation. // Get the email if available. This should be available if the user completes // the flow on the same device where they started it. let email = window.localStorage.getItem('emailForSignIn'); if (!email) { // User opened the link on a different device. To prevent session fixation // attacks, ask the user to provide the associated email again. For example: email = window.prompt('Please provide your email for confirmation'); } // The client SDK will parse the code from the link for you. signInWithEmailLink(auth, email, window.location.href) .then((result) => { // Clear email from storage. window.localStorage.removeItem('emailForSignIn'); // You can access the new user by importing getAdditionalUserInfo // and calling it with result: // getAdditionalUserInfo(result) // You can access the user's profile via: // getAdditionalUserInfo(result)?.profile // You can check if the user is new or existing: // getAdditionalUserInfo(result)?.isNewUser }) .catch((error) => { // Some error occurred, you can inspect the code: error.code // Common errors could be invalid email and invalid or expired OTPs. }); }
// Confirm the link is a sign-in with email link. if (firebase.auth().isSignInWithEmailLink(window.location.href)) { // Additional state parameters can also be passed via URL. // This can be used to continue the user's intended action before triggering // the sign-in operation. // Get the email if available. This should be available if the user completes // the flow on the same device where they started it. var email = window.localStorage.getItem('emailForSignIn'); if (!email) { // User opened the link on a different device. To prevent session fixation // attacks, ask the user to provide the associated email again. For example: email = window.prompt('Please provide your email for confirmation'); } // The client SDK will parse the code from the link for you. firebase.auth().signInWithEmailLink(email, window.location.href) .then((result) => { // Clear email from storage. window.localStorage.removeItem('emailForSignIn'); // You can access the new user via result.user // Additional user info profile not available via: // result.additionalUserInfo.profile == null // You can check if the user is new or existing: // result.additionalUserInfo.isNewUser }) .catch((error) => { // Some error occurred, you can inspect the code: error.code // Common errors could be invalid email and invalid or expired OTPs. }); }
تکمیل ورود به سیستم در یک برنامه تلفن همراه
پیوند دادن / احراز هویت مجدد با پیوند ایمیل
import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth"; // Construct the email link credential from the current URL. const credential = EmailAuthProvider.credentialWithLink( email, window.location.href); // Link the credential to the current user. const auth = getAuth(); linkWithCredential(auth.currentUser, credential) .then((usercred) => { // The provider is now successfully linked. // The phone user can now sign in with their phone number or email. }) .catch((error) => { // Some error occurred. });
// Construct the email link credential from the current URL. var credential = firebase.auth.EmailAuthProvider.credentialWithLink( email, window.location.href); // Link the credential to the current user. firebase.auth().currentUser.linkWithCredential(credential) .then((usercred) => { // The provider is now successfully linked. // The phone user can now sign in with their phone number or email. }) .catch((error) => { // Some error occurred. });
import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth"; // Construct the email link credential from the current URL. const credential = EmailAuthProvider.credentialWithLink( email, window.location.href); // Re-authenticate the user with this credential. const auth = getAuth(); reauthenticateWithCredential(auth.currentUser, credential) .then((usercred) => { // The user is now successfully re-authenticated and can execute sensitive // operations. }) .catch((error) => { // Some error occurred. });
// Construct the email link credential from the current URL. var credential = firebase.auth.EmailAuthProvider.credentialWithLink( email, window.location.href); // Re-authenticate the user with this credential. firebase.auth().currentUser.reauthenticateWithCredential(credential) .then((usercred) => { // The user is now successfully re-authenticated and can execute sensitive // operations. }) .catch((error) => { // Some error occurred. });
منسوخ شده: متمایز کردن رمز عبور ایمیل از پیوند ایمیل
fetchSignInMethodsForEmail()
را غیرفعال میکند، که قبلاً برای پیادهسازی جریانهای شناسه اول توصیه میکردیم.
الگوی پیشفرض ایمیل برای ورود پیوند
کد | زبان |
---|---|
ar | عربی |
zh-CN | چینی (ساده شده) |
zh-TW | چینی (سنتی) |
nl | هلندی |
en | انگلیسی |
en-GB | انگلیسی (بریتانیا) |
fr | فرانسوی |
de | آلمانی |
شناسه | اندونزیایی |
آن را | ایتالیایی |
ja | ژاپنی |
ko | کره ای |
pl | لهستانی |
pt-BR | پرتغالی (برزیل) |
pt-PT | پرتغالی (پرتغال) |
ru | روسی |
es | اسپانیایی |
es-419 | اسپانیایی (آمریکای لاتین) |
هفتم | تایلندی |
مراحل بعدی
در برنامه های شما، روش توصیه شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر بر روی شی Auth
است. سپس می توانید اطلاعات اولیه پروفایل کاربر را از شیUser
دریافت کنید. به مدیریت کاربران مراجعه کنید.در قوانین امنیتی Firebase Realtime Database و Cloud Storage خود، میتوانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر auth
دریافت کنید و از آن برای کنترل دادههایی که کاربر میتواند به آن دسترسی داشته باشد استفاده کنید.
signOut
تماس بگیرید:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });