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 cho người dùng bằng cách gửi cho họ một email chứa đường 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.

Việc đăng nhập bằng email mang lại nhiều lợi ích:

• Đăng ký và đăng nhập dễ dàng.
• 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 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 trong khi cũng xác minh rằng người dùng đó là chủ sở hữu hợp pháp của một đị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. Bạn không cần 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 một cách an toàn mà không cần cung cấp (hoặc nhớ) mật khẩu, điều này có thể gây phiền hà trên thiết bị di động.
• Người dùng hiện tại từng đăng nhập bằng giá trị nhận dạng email (mật khẩu hoặc liên kết) có thể được nâng cấp để chỉ đăng nhập 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 thực hiện, hãy sao chép đoạn mã khởi chạy từ bảng điều khiển Firebase vào dự án của bạn như mô tả trong phần Thêm Firebase vào dự án JavaScript.

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

Để đă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:

1. Trong bảng điều khiển Firebase, hãy mở phần Auth (Xác thực).
2. Trên thẻ Phương thức đăng nhập, hãy bật trình cung cấp Email/Mật khẩu. Xin 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 bằng đường liên kết trong email.
3. Trong cùng phần, hãy bật phương thức đăng nhập Đường liên kết 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 họ cung cấp địa chỉ email, 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 cung cấp cho Firebase hướng dẫn về cách tạo đường liên kết email. Đặt các trường sau:

   • url: Đường liên kết sâu để nhúng và mọi trạng thái bổ sung sẽ được truyền cùng. Bạn phải thêm miền của đường liên kết vào danh sách miền được uỷ quyền trong Bảng điều khiển 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: Giúp Firebase Authentication xác định xem có nên tạo một đường liên kết chỉ dành cho web hay đường liên kết dành cho thiết bị di động được mở trên thiết bị Android hay Apple hay không.
   • handleCodeInApp: Đặt thành true. Thao tác đăng nhập phải luôn được hoàn tất trong ứng dụng, không giống như các thao tác khác ngoài phạm vi email (đặt lại mật khẩu và xác minh email). Lý do là ở cuối luồng, người dùng dự kiến sẽ đăng nhập và trạng thái xác thực của họ sẽ được duy trì trong ứng dụng.
   • linkDomain: Khi bạn xác định miền liên kết Hosting tuỳ chỉnh cho một dự án, hãy chỉ định miền nào sẽ được sử dụng khi một ứng dụng di động được chỉ định mở đường liên kết. Nếu không, miền mặc định sẽ tự động được chọn (ví dụ: PROJECT_ID.firebaseapp.com).

   • dynamicLinkDomain: Không dùng nữa. Không chỉ định thông số này.

     Web

     Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có 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

     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 Hành động 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 quy trình đăng nhập bằng email trên cùng một thiết bị.

   Web

   Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có 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

   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

Để ngăn việc sử dụng đường liên kết đăng nhập để đăng nhập dưới vai trò là người dùng không mong muốn hoặc trên một thiết bị không mong muốn, Firebase Auth yêu cầu người dùng cung cấp địa chỉ email 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à bạn đã nhận được đườ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ữ địa chỉ email của họ cục bộ (ví dụ: 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 truyền email của người dùng trong các tham số URL chuyển hướng và sử dụng lại email đó vì việ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 có người đã tạo một tài khoản chưa được xác minh bằng cùng một 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 đảm bảo bạn sử dụng URL HTTPS trong phiên bản chính thức để tránh trường hợp máy chủ trung gian chặn đường liên kết của bạn.

Hoàn tất quá trình đăng nhập trong một trang web

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

Để hoàn tất quy 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 email thực tế chứa mã một lần.

Web

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có 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

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 quy trình đăng nhập trong ứng dụng di động

Cảnh báo: Ba tính năng Firebase Authentication sau đây sẽ chịu ảnh hưởng của việc ngừng hoạt động của Firebase Dynamic Links vào ngày 25 tháng 8 năm 2025: xác thực đường liên kết email cho ứng dụng di động, quy trình OAuth cho ứng dụng Android sử dụng các phiên bản SDK Authentication cũ và tính năng hỗ trợ OAuth của Cordova cho ứng dụng web. Để sử dụng các tính năng này sau khi Dynamic Links ngừng hoạt động, hãy chuyển sang sử dụng phiên bản SDK mới hơn và hoàn tất một số bước bổ sung.

Để biết thông tin cụ thể và hướng dẫn di chuyển, hãy truy cập vào phần Dynamic Links Câu hỏi thường gặp về việc ngừng sử dụng.

Firebase Authentication sử dụng Firebase Hosting để gửi đường liên kết trong email đến một thiết bị di động. Để hoàn tất quy trình đăng nhập thông qua ứng dụng di động, ứng dụng phải được định cấu hình để phát hiện đường liên kết ứng dụng đến, phân tích cú pháp đường liên kết sâu cơ bản, sau đó hoàn tất quy trình đă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ý việc đăng nhập bằng đường liên kết 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ý đường liên kết đăng nhập bằng email trong một ứng dụng của 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 đường liên kết trong email

Bạn cũng có thể liên kết phương thức xác thực này với một người dùng hiện có. Ví dụ: một người dùng đã xác thực trước đó với 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 có của họ.

Sự khác biệt sẽ nằm ở nửa sau của phép toán:

Web

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có 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

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

Bạn cũng có thể dùng thông tin này để 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

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có 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

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 này 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ể không 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ị. Một số trạng thái có thể được truyền trong đường liên kết để cung cấp thông tin về loại thao tác và uid người dùng.

Ngừng sử dụng: Phân biệt email-password với đường liên kết trong email

Nếu bạn tạo dự án từ ngày 15 tháng 9 năm 2023 trở đi, thì tính năng bảo vệ tính năng 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 của tài khoản người dùng trong dự án, nhưng sẽ vô hiệu hoá phương thức fetchSignInMethodsForEmail() mà trước đây chúng tôi đề xuất để triển khai các luồng ưu tiên giá trị 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 bạn không nên làm như vậy.

Hãy xem tài liệu về cách bảo vệ tính năng 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 bao gồm dấu thời gian trong tiêu đề và nội dung email để các email tiếp theo không bị thu gọn thành một chuỗi tin nhắn duy nhất, trong đó đường liên kết 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ể)
nl	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)
pt-PT	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, 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 về nhà cung cấp xác thực) mà người dùng đã đăng nhập. Tài khoản mới này được lưu trữ 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, bất kể người dùng đăng nhập như thế nào.

• Trong ứng dụng, bạn nên biết trạng thái xác thực của người dùng bằng cách đặ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ượng User. Xem phần Quản lý người dùng.

• Trong Quy tắc bảo mật Firebase Realtime Database và Cloud Storage, 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 và sử dụng mã nhận dạng đó để kiểm soát 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 bạn bằng nhiều trình cung cấp dịch vụ xác thực bằng cách liên kết thông tin xác thực của trình cung cấp dịch vụ 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

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có 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

Web

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