Cách thiết lập xác thực không cần mật khẩu Firebase với ứng dụng web React

Giới thiệu Hướng dẫn này là phần bổ sung cho . Trong phần giới thiệu của hướng dẫn đó, tôi đã lưu ý rằng Firebase cung cấp các chương trình xác thực khác ngoài xác thực Email/Mật khẩu cơ bản. Một trong những lựa chọn thay thế đó là . Cách thiết lập xác thực Firebase bằng ứng dụng web React Xác thực không cần mật khẩu Xác thực không cần mật khẩu là một lựa chọn hấp dẫn khi xây dựng ứng dụng. Nó đơn giản hóa trải nghiệm người dùng vì người dùng của bạn không cần phải nhớ (các) mật khẩu của họ và do đó không bao giờ phải lo lắng về việc mất chúng. Nó cũng tạo điều kiện thuận lợi cho trải nghiệm phát triển vì không cần thiết kế bất kỳ logic quản lý hoặc thu thập mật khẩu nào. Trong hướng dẫn này, bạn sẽ xây dựng quy trình làm việc Đăng nhập/Xác nhận/Hồ sơ/Đăng xuất đơn giản để triển khai xác thực không cần mật khẩu của Firebase. Trước khi bắt đầu Google đặt ra nhiều Xác thực Firebase khác nhau. Nếu bạn đang sử dụng gói miễn phí, hãy lưu ý rằng bạn sẽ bị 5 email liên kết đăng nhập mỗi ngày. Mặc dù gói Spark có thể đủ cho mục đích thử nghiệm nhưng bạn sẽ cần nâng cấp lên gói trả tiền khi sử dụng để vượt quá giới hạn này. giới hạn Spark giới hạn Blaze Điều kiện tiên quyết Trong suốt hướng dẫn này, tôi sẽ tham khảo làm và dự án liên quan làm . Cách thiết lập xác thực Firebase với hướng dẫn Ứng dụng web React hướng dẫn tiên quyết dự án tiên quyết Để hoàn thành hướng dẫn này, bạn sẽ cần phải có: Đã hoàn thành hướng dẫn điều kiện tiên quyết, bao gồm tất cả các điều kiện tiên quyết của nó. Bước 1 - Kích hoạt xác thực không cần mật khẩu với dự án Firebase của bạn Trong hướng dẫn tiên quyết, bạn đã tạo dự án Firebase mới để xác thực email/mật khẩu cơ bản. Bây giờ, bạn sẽ kích hoạt chính dự án đó để xác thực không cần mật khẩu. Đăng nhập vào của bạn và nhấp vào . tài khoản Firebase Go to Console Nhấp vào dự án xác thực của bạn được liệt kê trên trang tổng quan dự án Firebase. Hướng dẫn này sử dụng tên dự án . my-auth-test Nhấp vào trong menu bảng điều khiển bên trái. xác thực Nhấp vào tab trong cửa sổ chính. Phương thức đăng nhập Từ công việc của bạn trong hướng dẫn điều kiện tiên quyết, bảng phải hiển thị trong cột với trạng thái . Nhấp vào biểu tượng bút chì để mở bảng cấu hình cho nhà cung cấp . Nhà cung cấp đăng nhập Email/Mật khẩu Nhà cung cấp Đã bật Email/Mật khẩu Nhấp vào nút chuyển đổi để bật . liên kết Email (đăng nhập không cần mật khẩu) Nhấp vào . Lưu Dự án Firebase của bạn hiện đã được định cấu hình để hỗ trợ xác thực không cần mật khẩu. Bước 2 - Tạo dự án React mới và cài đặt gói Bước 2a - Tạo một dự án React mới Tạo một dự án React mới bằng tên ứng dụng bạn muốn. Hướng dẫn này sử dụng . passwordless-auth npx create-react-app passwordless-auth Bước 2b - Cài đặt gói Hướng dẫn này yêu cầu cài đặt 3 gói Node.js: : SDK Firebase. Firebase : Để định tuyến. React Router DOM : Để tạo kiểu. Bootstrap Cài đặt từng gói trong ba gói trên thông qua : npm npm install firebase npm install react-router-dom npm install bootstrap Bước 3 - Sao chép từ Dự án tiên quyết firebase.js Trong dự án tiên quyết, bạn đã tạo tệp sử dụng dữ liệu cấu hình dự án Firebase để tạo phiên bản của dịch vụ Xác thực Firebase. Tệp của bạn phải có cấu trúc sau với các giá trị cấu hình dự án Firebase : firebase.js firebase.js của bạn import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth } Sao chép vào thư mục dự án React mới của bạn. firebase.js Nếu bạn cần xem lại cấu hình dự án Firebase của mình, hãy nhấp vào biểu tượng bánh răng bên cạnh trong menu bảng điều khiển bên trái. Tab đã được chọn. Cuộn xuống phần chứa bảng . Tùy chọn trong bảng đã được chọn. Giá trị cấu hình dự án của bạn sẽ được liệt kê trong khối mã được hiển thị. Tổng quan về dự án Chung Ứng dụng của bạn Ứng dụng web npm ứng dụng Web Bước 4 - Xây dựng ứng dụng React Bước 4a - Tổng quan về các thành phần ứng dụng React Ứng dụng React sẽ bao gồm 5 thành phần: , , , và . App Layout Login Confirm Profile App Thành phần xác định cấu trúc ứng dụng tổng thể, bao gồm cả định tuyến. App Layout Thành phần chỉ định đánh dấu ứng dụng luôn nhất quán trên tất cả các tuyến. Layout Login Điểm vào của người dùng vào ứng dụng là biểu mẫu đăng nhập. Khi người dùng cố gắng đăng nhập qua địa chỉ email của mình, một email có liên kết đăng nhập sẽ được gửi đến địa chỉ email của họ. Confirm Người dùng được chuyển đến trang khi họ nhấp vào liên kết đăng nhập. Confirm Trang yêu cầu người dùng xác nhận địa chỉ email được sử dụng khi họ đăng nhập. Profile Người dùng được chuyển đến trang sau khi xác nhận địa chỉ email của họ. Profile Người dùng có thể nhấp vào nút đăng xuất trên trang để đăng xuất khỏi tài khoản của mình. Profile Thư mục cuối cùng sẽ chứa các file sau: src src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx Bước 4b - Dọn dẹp mẫu dự án React và sao chép tệp từ dự án tiên quyết Bạn có thể xóa các tệp tương tự khỏi mẫu dự án React như được mô tả ở Bước 5b.1 của hướng dẫn tiên quyết. Xóa các tệp sau khỏi dự án React của bạn: reportWebVitals.js setupTests.js logo.svg index.css App.css App.test.js Sao chép từ dự án tiên quyết vào thư mục dự án mới của bạn. Hướng dẫn này sử dụng cùng một tập tin. Nếu bạn cần xây dựng lại , hãy xem Bước 5b.2 của hướng dẫn điều kiện tiên quyết hoặc sao chép khối mã bên dưới. index.js index.js Sao chép từ dự án tiên quyết vào thư mục dự án mới của bạn. Hướng dẫn này sử dụng cùng một tập tin. Nếu bạn cần xây dựng lại , hãy xem Bước 5d của hướng dẫn điều kiện tiên quyết hoặc sao chép khối mã bên dưới. Theo tùy chọn, bạn có thể cập nhật văn bản dự án trong thẻ của để hoặc bất kỳ tiêu đề nào bạn thích. Layout.jsx Layout.jsx Layout.jsx React With Firebase Passwordless Authentication Các tệp và của bạn phải như sau: index.js Layout.jsx // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( React With Firebase Passwordless Authentication

) } export default Layout Bước 4c - Xây dựng App.js Tệp phần lớn giống như trong dự án tiên quyết, chỉ thay đổi hai dòng. Để tạo điều kiện thuận lợi cho việc xây dựng tệp, hãy sao chép từ dự án tiên quyết vào thư mục dự án mới của bạn. App.js App.js Xóa dòng sau khỏi tệp và thay thế nó như hiển thị bên dưới: import // Delete this line: import Signup from "./Signup"; // Replace it with: import Confirm from "./Confirm"; Xóa sau khỏi tệp và thay thế nó như hiển thị bên dưới: // Delete this line: } > // Replace it with: } > Lưu . App.js Tệp hoàn chỉnh bây giờ sẽ như sau: import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( }> }> } > } > ) } export default App Lưu ý rằng thành phần một lần nữa lại là tuyến đường chính của ứng dụng giống như với dự án tiên quyết. Login Bước 4d - Xây dựng Login.jsx Trong trường hợp xác thực không cần mật khẩu, rõ ràng bạn không cần bao gồm trường mật khẩu và cũng không cần quản lý trạng thái để nhập mật khẩu. Vì vậy, biểu mẫu đăng nhập chỉ cần nắm bắt địa chỉ email của người dùng. Tạo một tệp mới trong thư mục . Login.jsx src Thêm mã sau đây: import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( { "" !== notice && { notice } } setEmail(e.target.value) }> Email address callSendSignInLinkToEmail(e)}>Submit ) } Lưu . Login.jsx Khi lấy được địa chỉ email của người dùng, biểu mẫu sẽ gửi email có liên kết đăng nhập đến địa chỉ của người dùng đó thông qua phương thức của Firebase. Nếu thành công, người dùng sẽ được thông báo rằng email đã được gửi. Lưu ý rằng đối tượng được truyền dưới dạng tham số cho phương thức và bao gồm URL mà người dùng sẽ được chuyển đến khi họ nhấp vào liên kết đăng nhập được gửi qua email. Trong trường hợp này, URL sẽ ánh xạ tới tuyến được chỉ định trong . Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail /confirm App.js Bước 4e - Xây dựng Confirm.jsx Phương thức của Firebase được sử dụng để đăng nhập người dùng đã nhấp vào liên kết đăng nhập. Như bạn sẽ thấy ngay sau đây, phương thức này lấy một tham số và giá trị của phải khớp với địa chỉ email mà người dùng đã sử dụng khi đăng nhập qua biểu mẫu đăng nhập. cung cấp cho người dùng một biểu mẫu để xác nhận địa chỉ email của họ và sau đó thử đăng nhập vào người dùng. signInWithEmailLink email email Confirm.jsx Tạo tệp mới trong thư mục . Confirm.jsx src Thêm mã sau đây: import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( { "" !== notice && { notice } } setEmail(e.target.value) }> Please confirm your email address callSignInWithEmailLink(e)}>Confirm ) } export default Confirm Lưu Xác . Confirm.jsx Phương thức trước tiên sẽ kiểm tra xem liên kết đăng nhập mà người dùng đang sử dụng có hợp lệ hay không. Nếu đúng như vậy, phương thức sẽ được gọi để đăng nhập người dùng. Để nhắc lại, giá trị được truyền cho phương thức phải khớp với địa chỉ email mà người dùng đã sử dụng với biểu mẫu đăng nhập. Lưu ý rằng nếu người dùng là người dùng mới (tức là đây là lần đầu tiên họ đăng nhập), Firebase sẽ tự động tạo người dùng trong cửa hàng Xác thực Firebase. Đây là một ví dụ khác về trải nghiệm đơn giản hóa được cung cấp bởi xác thực không mật khẩu: việc tạo tài khoản cho người dùng mới được xử lý tự động. isSignInWithEmailLink signInWithEmailLink email signInWithEmailLink Bước 4f - Xây dựng Profile.jsx Thành phần cuối cùng mà bạn sẽ xây dựng là . Người dùng được chuyển đến thành phần này khi họ đăng nhập thành công qua . Tuyến chào đón người dùng bằng địa chỉ email của họ và cung cấp nút để đăng xuất. Sau khi đăng xuất, người dùng được chuyển trở lại thành phần . Profile.jsx Confirm.jsx Login Tạo một tệp mới trong thư mục . Profile.jsx src Thêm mã sau đây: import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( Welcome { auth.currentUser.email } . You are logged in!

logoutUser(e)}>Logout ) } export default Profile Lưu . Profile.jsx Bước 5 - Kiểm tra ứng dụng Khởi động ứng dụng React: npm start Điều hướng đến trong trình duyệt của bạn nếu trình duyệt của bạn không tự động khởi chạy. Bạn sẽ thấy biểu mẫu . locahost:3000 Login Nhập email bạn muốn sử dụng để đăng nhập và nhấp vào . Nếu gửi thành công, một thông báo sẽ hiển thị rằng một email có liên kết đăng nhập đã được gửi đến địa chỉ email của bạn. Gửi Đăng nhập vào tài khoản email của bạn và tìm email liên kết đăng nhập Firebase. Nó phải có dòng chủ đề tương tự như trong đó dãy số gồm 13 chữ số biểu thị của dự án Firebase của bạn (xem Bước 3 của hướng dẫn này). Trong phần bên dưới, tôi sẽ giải thích cách bạn có thể sửa đổi tên dự án Firebase của mình để hiển thị tên "thân thiện với người dùng" trong email liên kết đăng nhập. Bây giờ, hãy mở email liên kết đăng nhập và nhấp vào liên kết đăng nhập. Bạn sẽ được chuyển đến biểu mẫu . Sign in to project-1078604952662 messagingSenderId Tùy chọn Confirm Nhập địa chỉ email bạn đã sử dụng khi đăng nhập vào biểu mẫu . Nhấp vào . Nếu xác nhận thành công, bạn sẽ được chuyển đến trang . Confirm Xác nhận Profile Nhấp vào nút trên trang để đăng xuất. Nếu đăng xuất thành công, bạn sẽ được chuyển trở lại biểu mẫu . Đăng xuất Profile Login Các bước trên nắm bắt quy trình làm việc của ứng dụng. Tùy chọn: Sửa đổi tên dự án của bạn Bạn có thể thay đổi tên dự án của mình để các email liên kết đăng nhập do Firebase gửi hiển thị tên "thân thiện với người dùng" thay vì, chẳng hạn như . Đăng nhập vào của bạn và nhấp vào . project-1078604952662 tài khoản Firebase Go to Console Nhấp vào dự án xác thực của bạn được liệt kê trên trang tổng quan dự án Firebase. Nhấp vào biểu tượng bánh răng bên cạnh trong menu bảng điều khiển bên trái. Tab đã được chọn. Tổng quan dự án Chung Cuộn xuống tùy chọn trong phần . Tên công khai Dự án của bạn Nhấp vào biểu tượng bút chì và sửa đổi tên dự án của bạn theo ý muốn. Nhấp vào . Email liên kết đăng nhập của bạn bây giờ sẽ hiển thị tên dự án được cập nhật. Lưu Kết luận và các bước tiếp theo Xác thực không cần mật khẩu dường như là một lựa chọn ngày càng phổ biến của các nhà phát triển ứng dụng và điều đó cũng dễ hiểu. Ngoài lợi thế rõ ràng là loại bỏ nhu cầu quản lý mật khẩu, còn không cần xác minh email vì quá trình gửi liên kết đăng nhập tự nó là một quá trình xác minh. Giống như dự án tiên quyết, việc triển khai ở đây là cơ bản. Bạn có thể xem xét các cải tiến đơn giản như: Chặn/đưa vào danh sách đen các miền địa chỉ email cụ thể (tức là các miền email spam phổ biến). Lưu trữ cục bộ địa chỉ email được người dùng nhập trên trang và kiểm tra sự tồn tại của địa chỉ email trên trang . Với phương pháp này, nếu người dùng nhấp vào liên kết đăng nhập trên cùng một thiết bị mà họ đã truy cập trang , họ sẽ không cần nhập lại địa chỉ email của mình trên trang vì địa chỉ đó sẽ được khôi phục từ bộ nhớ cục bộ. Điều này mang lại trải nghiệm người dùng mượt mà hơn nữa. Login Confirm Login Confirm Bạn có thể tìm hiểu thêm về Xác thực không mật khẩu Firebase thông qua . tài liệu chính thức