1. Thiết lập
Lấy mã nguồn
Trong lớp học lập trình này, bạn bắt đầu với một phiên bản ứng dụng mẫu Trò chuyện thân thiện gần như hoàn thiện, vì vậy, điều đầu tiên bạn cần làm là sao chép mã nguồn:
$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security
Sau đó, chuyển vào thư mục security-start , nơi bạn sẽ làm việc trong phần còn lại của lớp học lập trình này:
$ cd codelab-friendlychat-web/security-start
Bây giờ, hãy cài đặt các phần phụ thuộc để bạn có thể chạy mã. Nếu bạn sử dụng kết nối Internet chậm hơn, quá trình này có thể mất một hoặc hai phút:
$ npm install && (cd functions && npm install)
Làm quen với repo này
Thư mục security-solution/ chứa mã hoàn chỉnh cho ứng dụng mẫu. Thư mục security-start là nơi bạn sẽ làm việc thông qua lớp học lập trình và thiếu một số phần quan trọng trong quá trình triển khai xác thực. Các tệp và tính năng chính trong security-start/ và security-solution/ là:
-
functions/index.jschứa mã Hàm đám mây và đó là nơi bạn sẽ viết các hàm chặn xác thực. -
public/- chứa các tệp tĩnh cho ứng dụng trò chuyện của bạn -
public/scripts/main.js- nơi mã JS ứng dụng trò chuyện của bạn (src/index.js) được biên dịch thành -
src/firebase-config.js- chứa đối tượng cấu hình Firebase được sử dụng để khởi tạo ứng dụng trò chuyện của bạn -
src/index.js- mã JS ứng dụng trò chuyện của bạn
Nhận CLI Firebase
Bộ mô phỏng là một phần của Firebase CLI (giao diện dòng lệnh), có thể được cài đặt trên máy của bạn bằng lệnh sau:
$ npm install -g firebase-tools@latest
Xây dựng javascript bằng webpack, nó sẽ tạo main.js bên trong thư mục public/scripts/.
webpack build
Tiếp theo, xác nhận rằng bạn có phiên bản CLI mới nhất. Lớp học lập trình này hoạt động với phiên bản 11.14 trở lên.
$ firebase --version 11.14.2
Kết nối với dự án Firebase của bạn
Nếu bạn không có dự án Firebase, trong bảng điều khiển Firebase , hãy tạo dự án Firebase mới. Hãy ghi lại ID dự án bạn chọn vì bạn sẽ cần nó sau này.
Bây giờ bạn cần kết nối mã này với dự án Firebase của mình. Trước tiên hãy chạy lệnh sau để đăng nhập vào Firebase CLI:
$ firebase login
Tiếp theo chạy lệnh sau để tạo bí danh dự án. Thay thế $YOUR_PROJECT_ID bằng ID dự án Firebase của bạn.
$ firebase use $YOUR_PROJECT_ID
Bây giờ bạn đã sẵn sàng để chạy ứng dụng!
2. Chạy trình giả lập
Trong phần này, bạn sẽ chạy ứng dụng cục bộ. Điều này có nghĩa là đã đến lúc khởi động Emulator Suite.
Khởi động trình giả lập
Từ bên trong thư mục nguồn codelab, hãy chạy lệnh sau để khởi động trình mô phỏng:
$ firebase emulators:start
Điều này sẽ phục vụ ứng dụng của bạn tại http://127.0.0.1:5170 và liên tục xây dựng lại mã nguồn của bạn khi bạn thực hiện thay đổi. Bạn sẽ chỉ cần làm mới cục bộ (ctrl-shift-r) cục bộ trong trình duyệt để xem các thay đổi của mình.
Bạn sẽ thấy một số đầu ra như thế này:
i emulators: Starting emulators: auth, functions, firestore, hosting, storage ✔ functions: Using node@16 from host. i firestore: Firestore Emulator logging to firestore-debug.log ✔ firestore: Firestore Emulator UI websocket is running on 9150. i hosting[demo-example]: Serving hosting files from: ./public ✔ hosting[demo-example]: Local server: http://127.0.0.1:5170 i ui: Emulator UI logging to ui-debug.log i functions: Watching "[...]" for Cloud Functions... ✔ functions: Loaded functions definitions from source: beforecreated. ✔ functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated). i Running script: npm start > security@1.0.0 start > webpack --watch --progress [...] webpack 5.50.0 compiled with 1 warning in 990 ms
Khi bạn thấy thông báo Tất cả trình mô phỏng đã sẵn sàng nghĩa là ứng dụng đã sẵn sàng để sử dụng.
3. Thực hiện MFA
MFA đã được triển khai một phần trong repo này. Bạn sẽ thêm mã để đăng ký người dùng vào MFA trước tiên, sau đó nhắc người dùng đã đăng ký MFA về yếu tố thứ hai.
Trong trình chỉnh sửa của bạn, hãy mở tệp src/index.js và tìm phương thức startEnrollMultiFactor() . Thêm mã sau đây để thiết lập trình xác minh reCAPTCHA nhằm ngăn chặn việc lạm dụng điện thoại (trình xác minh reCAPTCHA được đặt ở chế độ ẩn và sẽ không hiển thị với người dùng):
async function startEnrollMultiFactor(phoneNumber) {
const recaptchaVerifier = new RecaptchaVerifier(
"recaptcha",
{ size: "invisible" },
getAuth()
);
Sau đó, tìm phương thức finishEnrollMultiFactor() và thêm phần sau để đăng ký yếu tố thứ hai:
// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
// Ask user for the verification code. Then:
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
// Complete enrollment.
await multiFactor(getAuth().currentUser)
.enroll(multiFactorAssertion)
.catch(function (error) {
alert(`Error finishing second factor enrollment. ${error}`);
throw error;
});
verificationId = null;
}
Tiếp theo, tìm chức năng signIn và thêm luồng điều khiển sau để nhắc người dùng đã đăng ký MFA nhập yếu tố thứ hai của họ:
async function signIn() {
// Sign in Firebase using popup auth and Google as the identity provider.
var provider = new GoogleAuthProvider();
await signInWithPopup(getAuth(), provider)
.then(function (userCredential) {
// User successfully signed in and is not enrolled with a second factor.
})
.catch(function (error) {
if (error.code == "auth/multi-factor-auth-required") {
multiFactorResolver = getMultiFactorResolver(getAuth(), error);
displaySecondFactor(multiFactorResolver.hints);
} else {
alert(`Error signing in user. ${error}`);
}
});
}
Phần còn lại của quá trình triển khai, bao gồm cả các hàm được gọi ở đây, đã hoàn tất. Để xem chúng hoạt động như thế nào, hãy duyệt qua phần còn lại của tệp.
4. Thử đăng nhập bằng MFA trong trình mô phỏng
Bây giờ hãy thử triển khai MFA! Đảm bảo trình mô phỏng của bạn vẫn đang chạy và truy cập ứng dụng được lưu trữ cục bộ tại localhost:5170 . Hãy thử đăng nhập và khi được nhắc cung cấp mã MFA, bạn sẽ thấy mã MFA trong cửa sổ terminal của mình.
Vì trình mô phỏng hỗ trợ đầy đủ Xác thực đa yếu tố nên môi trường phát triển của bạn có thể hoàn toàn khép kín.
Để tìm hiểu thêm về cách triển khai MFA, hãy xem tài liệu tham khảo của chúng tôi.
5. Tạo chức năng chặn
Một số ứng dụng chỉ dành cho một nhóm người dùng cụ thể. Đối với những trường hợp đó, bạn muốn có thể tạo các yêu cầu tùy chỉnh để người dùng đăng ký hoặc đăng nhập vào ứng dụng của bạn.
Đó là những gì chức năng chặn cung cấp: một cách để tạo các yêu cầu xác thực tùy chỉnh. Chúng là các Chức năng đám mây, nhưng không giống như hầu hết các chức năng, chúng chạy đồng bộ khi người dùng cố gắng đăng ký hoặc đăng nhập.
Để tạo một hàm chặn, hãy mở functions/index.js trong trình chỉnh sửa của bạn và tìm hàm đã được nhận xét beforecreated .
Thay thế nó bằng mã này chỉ cho phép người dùng có tên miền example.com tạo tài khoản:
exports.beforecreated = beforeUserCreated((event) => {
const user = event.data;
// Only users of a specific domain can sign up.
if (!user.email || !user.email.endsWith("@example.com")) {
throw new HttpsError("invalid-argument", "Unauthorized email");
}
});
6. Thử chức năng chặn trong trình giả lập
Để thử chức năng chặn, hãy đảm bảo trình mô phỏng của bạn đang chạy và trong ứng dụng web tại localhost:5170 , hãy đăng xuất.
Sau đó, hãy thử tạo một tài khoản có địa chỉ email không kết thúc bằng example.com . Chức năng chặn sẽ ngăn hoạt động thành công.
Bây giờ, hãy thử lại bằng địa chỉ email có đuôi là example.com . Tài khoản sẽ được tạo thành công.
Với chức năng chặn, bạn có thể tạo bất kỳ hạn chế nào bạn cần xung quanh việc xác thực. Để tìm hiểu thêm, hãy xem tài liệu tham khảo .
Tóm tắt lại
Bạn đã làm rất tốt! Bạn đã thêm Xác thực đa yếu tố vào ứng dụng web để giúp người dùng bảo mật tài khoản của họ, sau đó bạn đã tạo các yêu cầu tùy chỉnh để người dùng đăng ký bằng chức năng chặn. Bạn chắc chắn đã kiếm được một gif!
