Xác thực bằng Firebase bằng đường liên kết email trong JavaScript

Bạn có thể sử dụng tính năng Xác thực Firebase để đăng nhập người dùng bằng cách gửi cho họ email có chứa đường liên kết mà người dùng 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 qua email:

• Quy trình đăng ký và đăng nhập ít phiền hà.
• Giảm rủi ro sử dụng lại mật khẩu trên các ứng dụng, điều này có thể làm giảm tính bảo mật của ngay cả những mật khẩu được chọn kỹ lưỡ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ó một tài khoản email có thể truy cập để đăng nhập. Không bắt buộc phải 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 (có thể rườm rà 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

Sao chép đoạn mã khởi chạy từ bảng điều khiển của Firebase vào dự án của bạn (nếu bạn chưa thực hiện) như mô tả trong phần Thêm Firebase vào dự án JavaScript của bạn.

Bật tính năng đăng nhập bằng đường liên kết email cho dự án Firebase của bạn

Để đăng nhập người dùng bằng đường liên kết email, trước tiên bạn phải bật Nhà cung cấp email và Phương thức đăng nhập bằng đường liên kết email cho dự án Firebase của bạn:

1. Trong bảng điều khiển của Firebase, hãy mở phần Xác thực.
2. Trên thẻ Phương thức đăng nhập, hãy bật nhà cung cấp Email/Mật khẩu. Lưu ý rằng bạn phải bật tính năng đăng nhập bằng email/mật khẩu để sử dụng tính năng đăng nhập qua đường liên kết email.
3. Cũng trong phần này, hãy bật phương thức đăng nhập Đường liên kết qua email (đăng nhập không cần mật khẩu).
4. Nhấp vào Lưu.

Gửi đường liên kết xác thực đến địa chỉ email của người dùng

Để bắt đầu quy trình 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 đường liên kết xác thực đến email của người dùng.

1. Tạo đối tượng ActionCodeSettings. Đối tượng này sẽ cung cấp cho Firebase hướng dẫn về cách tạo đường liên kết đến email. Đặt các trường sau:

   • url: Đường liên kết sâu để nhúng và mọi trạng thái khác cần truyền. Bạn phải thêm miền của đường liên kết vào danh sách các miền được uỷ quyền trong Bảng điều khiển của Firebase. Bạn có thể tìm thấy danh sách này bằng cách chuyển đến thẻ Phương thức đăng nhập (Xác thực -> Cài đặt).
   • android và ios: Các ứng dụng sẽ dùng khi đường 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 của Firebase để mở đường liên kết hành động qua email thông qua ứng dụng di động.
   • handleCodeInApp: Đặt thành true. Không giống như các thao tác email ngoài nhóm khác (đặt lại mật khẩu và xác minh email), hoạt động đăng nhập phải luôn được hoàn tất trong ứng dụng. Lý do là khi kết thúc luồng, người dùng được dự kiến sẽ đăng nhập và trạng thái Xác thực của họ vẫn được duy trì trong ứng dụng.

   • dynamicLinkDomain: Khi có nhiều miền đường liên kết động tuỳ chỉnh được xác định cho một dự án, hãy chỉ định miền cần sử dụng khi đường liên kết sẽ được mở thông qua một ứng dụng di động được chỉ định (ví dụ: example.page.link). Nếu không, miền đầu tiên sẽ tự động được chọn.

     API mô-đun web

     Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

     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'
     };
     auth_email_link_actioncode_settings.js

     API không gian tên trên web

     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'
     };
     email-link-auth.js

   Để tìm hiểu thêm về ActionCodeSettings, hãy tham khảo phần Chuyển trạng thái trong thao tác qua email.

2. Yêu cầu người dùng cung cấp email của họ.

3. Gửi đường 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 quá trình đăng nhập vào email trên cùng một thiết bị.

   API mô-đun web

   Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

   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;
       // ...
     });
   auth_email_link_send.js

   API không gian tên trên web

   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;
       // ...
     });
   email-link-auth.js

Hoàn tất quy trình đăng nhập bằng đường liên kết trong email

Các mối lo ngại về bảo mật

Để tránh việc sử dụng đường liên kết đăng nhập để đăng nhập với tư cách người dùng ngoài ý muốn hoặc trên thiết bị không mong muốn, tính năng Xác thực Firebase 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ỉ gửi đường liên kết đăng nhập ban đầu.

Bạn có thể đơn giản hoá quy trình này cho những người dùng mở đường liên kết đăng nhập trên cùng một thiết bị mà họ yêu cầu đường liên kết, bằng cách lưu trữ cục bộ địa chỉ email của họ (chẳng hạn như sử dụng localStorage hoặc cookie) khi bạn gửi email đăng nhập. Sau đó, hãy sử dụng địa chỉ này để hoàn tất quy trình. Không chuyển email của người dùng vào các tham số URL chuyển hướng và sử dụng lại vì thao tác này có thể cho phép chèn phiên.

Sau khi hoàn tất quy trình đăng nhập, mọi cơ chế đăng nhập chưa được xác minh trước đó sẽ bị xoá khỏi người dùng và mọi phiên hiện có sẽ mất hiệu lực. 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ị xoá để ngăn kẻ 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 nhớ sử dụng URL HTTPS trong phiên bản chính thức để tránh việc các máy chủ trung gian có thể chặn đường liên kết của bạn.

Hoàn tất quy trình đăng nhập trên một trang web

Định dạng của đường liên kết sâu đến đường liên kết email giống với định dạng dùng cho các thao tác gửi email ngoài dải (xác minh email, đặt lại mật khẩu và thu hồi việc thay đổi email). Tính năng Xác thực Firebase đơn giản hoá quy trình kiểm tra này bằng cách cung cấp API isSignInWithEmailLink để kiểm tra xem đường liên kết có dùng để đăng nhập bằng đường liên kết email hay không.

Để hoàn tất quá trình đăng nhập trên trang đích, hãy gọi signInWithEmailLink bằng email của người dùng và đường liên kết thực tế trong email chứa mã dùng một lần.

API mô-đun web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

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.
    });
}
email_link_complete.js

API không gian tên trên web

// 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.
    });
}
email-link-auth.js

Hoàn tất đăng nhập trong ứng dụng dành cho thiết bị di động

Tính năng Xác thực Firebase sử dụng Đường liên kết động của Firebase để gửi đường liên kết qua email đến thiết bị di động. Để hoàn tất quy trình đăng nhập thông qua ứng dụng dành cho thiết bị di động, bạn phải định cấu hình ứng dụng để phát hiện đường liên kết đến của ứng dụng, phân tích cú pháp đường liên kết sâu cơ sở, sau đó hoàn tất quá trình đăng nhập như thực hiện thông qua luồng web.

Để tìm hiểu thêm về cách xử lý quy trình đăng nhập bằng đường liên kết đến email trong ứng dụng Android, hãy tham khảo hướng dẫn dành cho Android.

Để tìm hiểu thêm về cách xử lý hoạt động đăng nhập bằng đường liên kết đến email trong ứng dụng của Apple, hãy tham khảo hướng dẫn dành cho các nền tảng của Apple.

Liên kết/xác thực lại bằng đường liên kết email

Bạn cũng có thể liên kết phương pháp xác thực này với một người dùng hiện có. Ví dụ: người dùng đã xác thực trước đây bằng một 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ự chênh lệch sẽ nằm trong nửa sau của thao tác:

API mô-đun web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

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.
  });
auth_email_link_link.js

API không gian tên trên web

// 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.
  });
email-link-auth.js

Tính năng này cũng có thể được dùng để xác thực lại người dùng đường liên kết email trước khi chạy một thao tác nhạy cảm.

API mô-đun web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

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.
  });
auth_email_link_reauth.js

API không gian tên trên web

// 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.
  });
email-link-auth.js

Tuy nhiên, vì luồng 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 luồng này có thể chưa hoàn tất. Trong trường hợp đó, người dùng có thể thấy lỗi để buộc họ mở đường liên kết trên cùng một thiết bị. Bạn có thể chuyển một số trạng thái trong đường liên kết để cung cấp thông tin về loại thao tác và uid của người dùng.

Không dùng nữa: Phân biệt mật khẩu email với đường liên kết đến 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 giúp cải thiện độ bảo mật cho tài khoản người dùng của dự án, nhưng vô hiệu hoá phương thức fetchSignInMethodsForEmail() mà trước đây chúng tôi đề xuất để triển khai quy trình ưu tiên giá trị nhận dạng.

Mặc dù có thể tắt tính năng bảo vệ liệt kê email cho dự án của mình, nhưng bạn không nên làm như vậy.

Xem tài liệu về biện pháp bảo vệ liệt kê email để biết thêm thông tin chi tiết.

Mẫu email mặc định để đăng nhập bằng đường liên kết

Mẫu email mặc định có một dấu thời gian trong tiêu đề và nội dung email để các email tiếp theo không được thu gọn vào một chuỗi duy nhất, kèm theo đường liên kết sẽ bị ẩn.

Mẫu này áp dụng cho các ngôn ngữ sau:

Mã	Ngôn ngữ
ar	Tiếng Ả Rập
zh-CN	Tiếng Trung (Giản thể)
zh-TW	Tiếng Trung (Phồn thể)
ngôn ngữ	Tiếng Hà Lan
vi	Tiếng Anh
en-GB	Tiếng Anh (Anh)
fr	Tiếng Pháp
de	Tiếng Đức
id	Tiếng Indonesia
it	Tiếng Ý
ja	Tiếng Nhật
ko	Tiếng Hàn
pl	Tiếng Ba Lan
pt-BR	Tiếng Bồ Đào Nha (Brazil)
PTT	Tiếng Bồ Đào Nha (Bồ Đào Nha)
ru	Tiếng Nga
es	Tiếng Tây Ban Nha
es-419	Tiếng Tây Ban Nha (Mỹ Latinh)
thứ	Tiếng Thái

Các 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 đăng nhập (chẳng hạn như tên người dùng và mật khẩu, số điện thoại hoặc thông tin của 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 trong dự án Firebase và có thể được 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, bạn nên đặt trình quan sát trên đối tượng Auth để biết trạng thái xác thực của người dùng. Sau đó, bạn có thể lấy thông tin hồ sơ cơ bản của người dùng từ đối tượng User. Hãy xem phần Quản lý người dùng.

• Trong Quy tắc bảo mật của Cloud Storage và Cơ sở dữ liệu theo thời gian thực của Firebase, bạn có thể lấy mã nhận dạng người dùng riêng biệt của người dùng đã đăng nhập từ biến auth rồi sử dụng mã này để kiểm soát những dữ liệu mà 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 thông qua nhiều nhà cung cấp dịch vụ xác thực bằng cách liên kết thông tin đăng nhập của nhà cung cấp dịch vụ xác thực với một tài khoản người dùng hiện có.

Để đăng xuất một người dùng, hãy gọi signOut:

API mô-đun web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

API không gian tên trên web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js