1. ตั้งค่า
ดูซอร์สโค้ด
ในโค้ดแล็บนี้ คุณจะเริ่มต้นด้วยแอปตัวอย่าง Friendly Chat เวอร์ชันที่เกือบเสร็จสมบูรณ์แล้ว ดังนั้นสิ่งแรกที่คุณต้องทำคือโคลนซอร์สโค้ด
$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security
จากนั้นให้ย้ายไปที่ไดเรกทอรี security-start ซึ่งคุณจะใช้ทำงานในส่วนที่เหลือของ Codelab นี้
$ cd codelab-friendlychat-web/security-start
ตอนนี้ให้ติดตั้งการอ้างอิงเพื่อให้เรียกใช้โค้ดได้ หากใช้การเชื่อมต่ออินเทอร์เน็ตที่ช้า การดำเนินการนี้อาจใช้เวลา 1-2 นาที
$ npm install && (cd functions && npm install)
ทำความรู้จักที่เก็บข้อมูลนี้
ไดเรกทอรี security-solution/ มีโค้ดทั้งหมดสำหรับแอปตัวอย่าง ส่วนไดเรกทอรี security-start เป็นที่ที่คุณจะใช้ในการทำ Codelab และไม่มีส่วนสำคัญบางส่วนของการติดตั้งใช้งานการตรวจสอบสิทธิ์ ไฟล์และฟีเจอร์หลักใน security-start/ และ security-solution/ มีดังนี้
functions/index.jsมีโค้ด Cloud Functions และเป็นที่ที่คุณจะเขียนฟังก์ชันการบล็อกการตรวจสอบสิทธิ์public/- มีไฟล์แบบคงที่สำหรับแอปแชทpublic/scripts/main.js- ที่คอมไพล์โค้ด JS ของแอปใน Chat (src/index.js)src/firebase-config.js- มีออบเจ็กต์การกำหนดค่า Firebase ที่ใช้ในการเริ่มต้นแอปแชทsrc/index.js- โค้ด JS ของแอปแชท
รับ Firebase CLI
ชุดโปรแกรมจำลองเป็นส่วนหนึ่งของ Firebase CLI (อินเทอร์เฟซบรรทัดคำสั่ง) ซึ่งติดตั้งในเครื่องได้ด้วยคำสั่งต่อไปนี้
$ npm install -g firebase-tools@latest
สร้าง JavaScript ด้วย Webpack ซึ่งจะสร้าง main.js ภายในไดเรกทอรี public/scripts/
webpack build
จากนั้นตรวจสอบว่าคุณใช้ CLI เวอร์ชันล่าสุด Codelab นี้ใช้ได้กับเวอร์ชัน 11.14 ขึ้นไป
$ firebase --version 11.14.2
เชื่อมต่อกับโปรเจ็กต์ Firebase
สร้างโปรเจ็กต์ Firebase ใหม่
- ลงชื่อเข้าใช้คอนโซล Firebase โดยใช้บัญชี Google
- คลิกปุ่มเพื่อสร้างโปรเจ็กต์ใหม่ แล้วป้อนชื่อโปรเจ็กต์ (เช่น
Authentication MFA Codelab)
- คลิกต่อไป
- หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase แล้วคลิกต่อไป
- (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase")
- สำหรับ Codelab นี้ คุณไม่จำเป็นต้องใช้ Google Analytics ดังนั้นให้ปิดตัวเลือก Google Analytics
- คลิกสร้างโปรเจ็กต์ รอให้ระบบจัดสรรโปรเจ็กต์ แล้วคลิกดำเนินการต่อ
เชื่อมต่อโค้ดกับโปรเจ็กต์ Firebase
ตอนนี้คุณต้องเชื่อมต่อโค้ดนี้กับโปรเจ็กต์ Firebase ก่อนอื่น ให้เรียกใช้คำสั่งต่อไปนี้เพื่อเข้าสู่ระบบ Firebase CLI
$ firebase login
จากนั้นเรียกใช้คำสั่งต่อไปนี้เพื่อสร้างชื่อแทนของโปรเจ็กต์ แทนที่ $YOUR_PROJECT_ID ด้วยรหัสของโปรเจ็กต์ Firebase
$ firebase use $YOUR_PROJECT_ID
ตอนนี้คุณก็พร้อมที่จะเรียกใช้แอปแล้ว
2. เรียกใช้โปรแกรมจำลอง
ในส่วนนี้ คุณจะเรียกใช้แอปในเครื่อง ซึ่งหมายความว่าถึงเวลาบูตชุดโปรแกรมจำลองแล้ว
เริ่มโปรแกรมจำลอง
จากภายในไดเรกทอรีแหล่งที่มาของ Codelab ให้เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มโปรแกรมจำลอง
$ firebase emulators:start
ซึ่งจะแสดงแอปที่ http://127.0.0.1:5170 และสร้างซอร์สโค้ดใหม่ต่อไปเรื่อยๆ เมื่อคุณทำการเปลี่ยนแปลง คุณจะต้องรีเฟรชแบบเต็ม (ctrl-shift-r) ในเบราว์เซอร์ของคุณเท่านั้นจึงจะเห็นการเปลี่ยนแปลง
คุณควรเห็นเอาต์พุตบางอย่างดังนี้
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
เมื่อเห็นข้อความโปรแกรมจำลองทั้งหมดพร้อมใช้งาน แสดงว่าแอปพร้อมใช้งานแล้ว
3. การใช้ MFA
เราได้นำ MFA ไปใช้ในที่เก็บข้อมูลนี้แล้วบางส่วน คุณจะเพิ่มโค้ดเพื่อลงทะเบียนผู้ใช้ใน MFA ก่อน จากนั้นจึงแจ้งให้ผู้ใช้ที่ลงทะเบียนใน MFA ระบุปัจจัยที่ 2
ในเครื่องมือแก้ไข ให้เปิดไฟล์ src/index.js แล้วค้นหาวิธี startEnrollMultiFactor() เพิ่มโค้ดต่อไปนี้เพื่อตั้งค่าเครื่องมือยืนยัน reCAPTCHA ที่จะป้องกันการละเมิดทางโทรศัพท์ (เครื่องมือยืนยัน reCAPTCHA จะตั้งค่าเป็นแบบไม่แสดงและผู้ใช้จะไม่เห็น)
async function startEnrollMultiFactor(phoneNumber) {
const recaptchaVerifier = new RecaptchaVerifier(
"recaptcha",
{ size: "invisible" },
getAuth()
);
จากนั้นค้นหาวิธี finishEnrollMultiFactor() แล้วเพิ่มข้อมูลต่อไปนี้เพื่อลงทะเบียนการยืนยันแบบ 2 ขั้นตอน
// 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;
}
จากนั้นค้นหาฟังก์ชัน signIn และเพิ่มโฟลว์การควบคุมต่อไปนี้ซึ่งจะแจ้งให้ผู้ใช้ที่ลงทะเบียน MFA ป้อนปัจจัยที่ 2
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}`);
}
});
}
การติดตั้งใช้งานส่วนที่เหลือ รวมถึงฟังก์ชันที่เรียกใช้ที่นี่เสร็จสมบูรณ์แล้ว หากต้องการดูวิธีการทำงาน ให้เลื่อนดูส่วนที่เหลือของไฟล์
4. ลองลงชื่อเข้าใช้ด้วย MFA ในโปรแกรมจำลอง
ตอนนี้ลองใช้การติดตั้งใช้งาน MFA กันเลย ตรวจสอบว่าโปรแกรมจำลองยังทำงานอยู่ และไปที่แอปที่โฮสต์ในเครื่องที่ localhost:5170 ลองลงชื่อเข้าใช้ แล้วเมื่อระบบแจ้งให้ระบุรหัส MFA คุณจะเห็นรหัส MFA ในหน้าต่างเทอร์มินัล
เนื่องจากโปรแกรมจำลองรองรับการตรวจสอบแบบ 2 ขั้นตอนอย่างเต็มรูปแบบ สภาพแวดล้อมการพัฒนาจึงสามารถเป็นแบบสแตนด์อโลนได้อย่างสมบูรณ์
ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งใช้งาน MFA ได้ที่เอกสารอ้างอิง
5. สร้างฟังก์ชันการบล็อก
แอปพลิเคชันบางอย่างมีไว้สำหรับผู้ใช้บางกลุ่มเท่านั้น ในกรณีดังกล่าว คุณอาจต้องการสร้างข้อกำหนดที่กำหนดเองเพื่อให้ผู้ใช้ลงชื่อสมัครใช้หรือลงชื่อเข้าใช้แอปของคุณ
ฟังก์ชันการบล็อกมีไว้เพื่อสร้างข้อกำหนดในการตรวจสอบสิทธิ์ที่กำหนดเอง ซึ่งเป็น Cloud Functions แต่จะทำงานพร้อมกันเมื่อผู้ใช้พยายามลงชื่อสมัครใช้หรือลงชื่อเข้าใช้ ซึ่งแตกต่างจากฟังก์ชันส่วนใหญ่
หากต้องการสร้างฟังก์ชันการบล็อก ให้เปิด functions/index.js ในเครื่องมือแก้ไขแล้วค้นหาฟังก์ชัน beforecreated ที่ถูกแสดงความคิดเห็น
แทนที่ด้วยโค้ดนี้ซึ่งอนุญาตให้เฉพาะผู้ใช้ที่มีโดเมน example.com สร้างบัญชีได้
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. ลองใช้ฟังก์ชันการบล็อกในโปรแกรมจำลอง
หากต้องการลองใช้ฟังก์ชันการบล็อก ให้ตรวจสอบว่าโปรแกรมจำลองทำงานอยู่ และออกจากระบบในเว็บแอปที่ localhost:5170
จากนั้นลองสร้างบัญชีด้วยอีเมลที่ไม่ได้ลงท้ายด้วย example.com ฟังก์ชันการบล็อกจะป้องกันไม่ให้การดำเนินการสำเร็จ
ตอนนี้ ให้ลองอีกครั้งโดยใช้อีเมลที่ลงท้ายด้วย example.com ระบบจะสร้างบัญชีให้คุณเรียบร้อย
ฟังก์ชันการบล็อกช่วยให้คุณสร้างข้อจำกัดที่จำเป็นเกี่ยวกับการตรวจสอบสิทธิ์ได้ ดูข้อมูลเพิ่มเติมได้ที่เอกสารอ้างอิง
สรุป
เก่งมาก! คุณเพิ่มการตรวจสอบสิทธิ์แบบหลายปัจจัยลงในเว็บแอปเพื่อช่วยให้ผู้ใช้รักษาบัญชีให้ปลอดภัย จากนั้นคุณได้สร้างข้อกำหนดที่กำหนดเองเพื่อให้ผู้ใช้ลงชื่อสมัครใช้โดยใช้ฟังก์ชันการบล็อก คุณได้รับ GIF แล้ว
