Bạn có thể sử dụng Xác thực Firebase để đăng nhập người dùng bằng cách gửi cho họ email chứa liên kết mà họ có thể nhấp vào để đăng nhập. Trong quá trình này, địa chỉ email của người dùng cũng được xác minh.
Có rất nhiều lợi ích khi đăng nhập bằng email:
- Đăng ký và đăng nhập ít ma sát.
- Giảm nguy cơ sử dụng lại mật khẩu trên các ứng dụng, điều này có thể làm suy yếu tính bảo mật của ngay cả những mật khẩu được chọn kỹ càng.
- Khả năng xác thực người dùng đồng thời xác minh rằng người dùng đó là chủ sở hữu hợp pháp của địa chỉ email.
- Người dùng chỉ cần có tài khoản email có thể truy cập để đăng nhập. Không cần quyền sở hữu số điện thoại hoặc tài khoản mạng xã hội.
- Người dùng có thể đăng nhập an toàn mà không cần cung cấp (hoặc ghi nhớ) mật khẩu, điều này có thể gây cồng kềnh trên thiết bị di động.
- Người dùng hiện tại trước đây đã đăng nhập bằng mã nhận dạng email (mật khẩu hoặc liên kết) có thể được nâng cấp để đăng nhập chỉ bằng email. Ví dụ: người dùng quên mật khẩu vẫn có thể đăng nhập mà không cần đặt lại mật khẩu.
Trước khi bắt đầu
Nếu bạn chưa sao chép, hãy sao chép đoạn mã khởi tạo từ bảng điều khiển Firebase vào dự án của bạn như được mô tả trong Thêm Firebase vào dự án JavaScript của bạn .
Bật đăng nhập Liên kết email cho dự án Firebase của bạn
Để đăng nhập người dùng bằng liên kết email, trước tiên bạn phải kích hoạt nhà cung cấp Email và phương thức đăng nhập liên kết Email cho dự án Firebase của mình:
- Trong bảng điều khiển Firebase , hãy mở phần Xác thực .
- Trên tab Phương thức đăng nhập , bật nhà cung cấp Email/Mật khẩu . Lưu ý rằng tính năng đăng nhập bằng email/mật khẩu phải được bật để sử dụng tính năng đăng nhập bằng liên kết email.
- Trong cùng một phần, bật phương thức đăng nhập liên kết Email (đăng nhập không cần mật khẩu) .
- Nhấp vào để lưu .
Gửi liên kết xác thực đến địa chỉ email của người dùng
Để bắt đầu luồng xác thực, hãy hiển thị cho người dùng một giao diện nhắc người dùng cung cấp địa chỉ email của họ, sau đó gọi sendSignInLinkToEmail để yêu cầu Firebase gửi liên kết xác thực đến email của người dùng.
Xây dựng đối tượng
ActionCodeSettings, đối tượng này cung cấp cho Firebase các hướng dẫn về cách tạo liên kết email. Đặt các trường sau:-
url: Liên kết sâu để nhúng và mọi trạng thái bổ sung sẽ được chuyển qua. Miền của liên kết phải được thêm vào danh sách miền được ủy quyền của Bảng điều khiển Firebase. Bạn có thể tìm thấy miền này bằng cách đi tới tab Phương thức đăng nhập (Xác thực -> Phương thức đăng nhập). -
androidvàios: Các ứng dụng sẽ sử dụng khi liên kết đăng nhập được mở trên thiết bị Android hoặc Apple. Tìm hiểu thêm về cách định cấu hình Liên kết động Firebase để mở liên kết hành động email qua ứng dụng dành cho thiết bị di động. -
handleCodeInApp: Đặt thành true. Thao tác đăng nhập phải luôn được hoàn thành trong ứng dụng, không giống như các hành động email khác ngoài nhóm (đặt lại mật khẩu và xác minh email). Điều này là do ở cuối quy trình, người dùng dự kiến sẽ đăng nhập và trạng thái Xác thực của họ vẫn tồn tại trong ứng dụng. dynamicLinkDomain: Khi xác định nhiều miền liên kết động tùy chỉnh cho một dự án, hãy chỉ định miền nào sẽ sử dụng khi liên kết được mở thông qua một ứng dụng di động được chỉ định (ví dụ:example.page.link). Nếu không, tên miền đầu tiên sẽ tự động được chọn.Web modular API
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' }, dynamicLinkDomain: 'example.page.link' };Web namespaced API
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' };
Để tìm hiểu thêm về ActionCodeSettings, hãy tham khảo phần Trạng thái chuyển trong phần Hành động email .
-
Hỏi người dùng email của họ.
Gửi liên kết xác thực đến email của người dùng và lưu email của người dùng trong trường hợp người dùng hoàn tất đăng nhập email trên cùng một thiết bị.
Web modular API
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; // ... });Web namespaced API
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; // ... });
Hoàn tất đăng nhập bằng liên kết email
Mối lo ngại về an ninh
Để ngăn việc sử dụng liên kết đăng nhập để đăng nhập với tư cách là người dùng ngoài ý muốn hoặc trên một thiết bị ngoài ý muốn, Firebase Auth yêu cầu cung cấp địa chỉ email của người dùng khi hoàn tất quy trình đăng nhập. Để đăng nhập thành công, địa chỉ email này phải khớp với địa chỉ mà liên kết đăng nhập được gửi ban đầu.
Bạn có thể hợp lý hóa quy trình này cho những người dùng mở liên kết đăng nhập trên cùng thiết bị mà họ yêu cầu liên kết bằng cách lưu trữ cục bộ địa chỉ email của họ - ví dụ: sử dụng localStorage hoặc cookie - khi bạn gửi email đăng nhập. Sau đó, sử dụng địa chỉ này để hoàn thành quy trình. Không chuyển email của người dùng vào tham số URL chuyển hướng và sử dụng lại email đó vì điều này có thể cho phép chèn phiên.
Sau khi hoàn tất đăng nhập, mọi cơ chế đăng nhập chưa được xác minh trước đó sẽ bị xóa khỏi người dùng và mọi phiên hiện tại sẽ bị vô hiệu. Ví dụ: nếu trước đây ai đó đã tạo một tài khoản chưa được xác minh có cùng email và mật khẩu thì mật khẩu của người dùng sẽ bị xóa để ngăn người mạo danh đã xác nhận quyền sở hữu và tạo tài khoản chưa được xác minh đó đăng nhập lại bằng email và mật khẩu chưa được xác minh.
Ngoài ra, hãy đảm bảo bạn sử dụng URL HTTPS trong quá trình sản xuất để tránh liên kết của bạn có thể bị các máy chủ trung gian chặn.
Hoàn tất đăng nhập vào một trang web
Định dạng của liên kết sâu liên kết email giống với định dạng được sử dụng cho các hành động email ngoài phạm vi (xác minh email, đặt lại mật khẩu và thu hồi thay đổi email). Firebase Auth đơn giản hóa việc kiểm tra này bằng cách cung cấp API isSignInWithEmailLink để kiểm tra xem liên kết có phải là liên kết đăng nhập bằng liên kết email hay không.
Để hoàn tất đăng nhập trên trang đích, hãy gọi signInWithEmailLink bằng email của người dùng và liên kết email thực tế chứa mã một lần.
Web modular API
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 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.
});
}Web namespaced API
// 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.
});
}Hoàn tất đăng nhập trong ứng dụng dành cho thiết bị di động
Xác thực Firebase sử dụng Liên kết động Firebase để gửi liên kết email đến thiết bị di động. Để hoàn tất đăng nhập qua ứng dụng di động, ứng dụng phải được định cấu hình để phát hiện liên kết ứng dụng đến, phân tích liên kết sâu cơ bản và sau đó hoàn tất đăng nhập như được thực hiện thông qua luồng web.
Để tìm hiểu thêm về cách xử lý đăng nhập bằng liên kết email trong ứng dụng Android, hãy tham khảo hướng dẫn Android .
Để tìm hiểu thêm về cách xử lý đăng nhập bằng liên kết email trong ứng dụng Apple, hãy tham khảo hướng dẫn về nền tảng Apple .
Liên kết/xác thực lại bằng liên kết email
Bạn cũng có thể liên kết phương thức xác thực này với người dùng hiện có. Ví dụ: người dùng đã được xác thực trước đó với nhà cung cấp khác, chẳng hạn như số điện thoại, có thể thêm phương thức đăng nhập này vào tài khoản hiện tại của họ.
Sự khác biệt sẽ nằm ở nửa sau của hoạt động:
Web modular API
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.
});Web namespaced API
// 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.
});Điều này cũng có thể được sử dụng để xác thực lại người dùng liên kết email trước khi chạy một thao tác nhạy cảm.
Web modular API
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.
});Web namespaced API
// 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.
});Tuy nhiên, vì quy trình có thể kết thúc trên một thiết bị khác mà người dùng ban đầu chưa đăng nhập nên quy trình này có thể chưa hoàn tất. Trong trường hợp đó, người dùng có thể gặp lỗi để buộc họ mở liên kết trên cùng một thiết bị. Một số trạng thái có thể được chuyển vào liên kết để cung cấp thông tin về loại hoạt động và uid người dùng.
Không dùng nữa: Phân biệt mật khẩu email với liên kết email
Nếu bạn tạo dự án vào hoặc sau ngày 15 tháng 9 năm 2023 thì tính năng bảo vệ liệt kê email sẽ được bật theo mặc định. Tính năng này cải thiện tính bảo mật cho tài khoản người dùng trong dự án của bạn, nhưng nó vô hiệu hóa phương thức fetchSignInMethodsForEmail() mà trước đây chúng tôi khuyên bạn nên triển khai các luồng ưu tiên số nhận dạng.
Mặc dù bạn có thể tắt tính năng bảo vệ liệt kê email cho dự án của mình nhưng chúng tôi khuyên bạn không nên làm như vậy.
Xem tài liệu về bảo vệ liệt kê email để biết thêm chi tiết.
Mẫu email mặc định để đăng nhập bằng liên kết
Mẫu email mặc định bao gồm dấu thời gian trong chủ đề và nội dung email để các email tiếp theo không bị thu gọn thành một chuỗi duy nhất và liên kết sẽ bị ẩn .
Mẫu này áp dụng cho các ngôn ngữ sau:
| Mã số | Ngôn ngữ |
|---|---|
| ar | tiếng Ả Rập |
| zh-CN | Tiếng Trung (Giản thể) |
| zh-TW | Truyền thống Trung Hoa) |
| nl | tiếng Hà Lan |
| vi | Tiếng Anh |
| en-GB | Tiếng Anh UK) |
| bạn | người Pháp |
| de | tiếng Đức |
| nhận dạng | tiếng Indonesia |
| Nó | người Ý |
| à | tiếng Nhật |
| ko | Hàn Quốc |
| làm ơn | Đánh bóng |
| pt-BR | Tiếng Bồ Đào Nha (Brazil) |
| pt-PT | Tiếng Bồ Đào Nha (Bồ Đào Nha) |
| ru | tiếng Nga |
| es | người Tây Ban Nha |
| es-419 | Tiếng Tây Ban Nha (Châu Mỹ Latinh) |
| quần què | tiếng Thái |
Bước tiếp theo
Sau khi người dùng đăng nhập lần đầu tiên, một tài khoản người dùng mới sẽ được tạo và liên kết với thông tin xác thực—tức là tên người dùng và mật khẩu, số điện thoại hoặc thông tin nhà cung cấp dịch vụ xác thực—mà người dùng đã đăng nhập. Tài khoản mới này được lưu trữ như một phần của dự án Firebase của bạn và có thể được sử dụng để xác định người dùng trên mọi ứng dụng trong dự án của bạn, bất kể người dùng đăng nhập bằng cách nào.
Trong ứng dụng của bạn, cách được khuyên dùng để biết trạng thái xác thực của người dùng là đặt trình quan sát trên đối tượng
Auth. Sau đó, bạn có thể lấy thông tin hồ sơ cơ bản của người dùng từ đối tượngUser. Xem Quản lý người dùng .Trong Quy tắc bảo mật cơ sở dữ liệu thời gian thực và lưu trữ đám mây của Firebase, bạn có thể lấy ID người dùng duy nhất của người dùng đã đăng nhập từ biến
authvà sử dụng nó để kiểm soát dữ liệu nào người dùng có thể truy cập.
Bạn có thể cho phép người dùng đăng nhập vào ứng dụng của mình bằng nhiều nhà cung cấp xác thực bằng cách liên kết thông tin xác thực của nhà cung cấp xác thực với tài khoản người dùng hiện có.
Để đăng xuất người dùng, hãy gọi signOut :
Web modular API
import { getAuth, signOut } from "firebase/auth";
const auth = getAuth();
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});Web namespaced API
firebase.auth().signOut().then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});