คุณสมบัติการรับรองความถูกต้องขั้นสูง

1. ตั้งค่า

รับซอร์สโค้ด

ใน Codelab นี้ คุณจะเริ่มต้นด้วยเวอร์ชันของแอปตัวอย่าง Friendly Chat ที่เกือบจะเสร็จสมบูรณ์แล้ว ดังนั้นสิ่งแรกที่คุณต้องทำคือโคลนซอร์สโค้ด:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

จากนั้น ย้ายไปยังไดเร็กทอรี security-start ซึ่งคุณจะทำงานส่วนที่เหลือของ codelab นี้:

$ cd codelab-friendlychat-web/security-start

ตอนนี้ ให้ติดตั้งการขึ้นต่อกันเพื่อให้คุณสามารถรันโค้ดได้ หากคุณใช้การเชื่อมต่ออินเทอร์เน็ตที่ช้ากว่า อาจใช้เวลาหนึ่งหรือสองนาที:

$ npm install && (cd functions && npm install)

ทำความรู้จักกับ repo นี้

ไดเร็กทอรี security-solution/ มีโค้ดที่สมบูรณ์สำหรับแอปตัวอย่าง ไดเร็กทอรี security-start คือที่ที่คุณจะทำงานผ่าน Codelab และขาดส่วนสำคัญบางประการของการดำเนินการตรวจสอบสิทธิ์ ไฟล์หลักและคุณสมบัติใน security-start/ และ security-solution/ ได้แก่:

• functions/index.js มีโค้ด Cloud Functions และเป็นที่ที่คุณจะเขียนฟังก์ชันบล็อกการตรวจสอบสิทธิ์
• public/ - มีไฟล์คงที่สำหรับแอปแชทของคุณ
• public/scripts/main.js - โดยที่โค้ด JS ของแอปแชทของคุณ ( src/index.js ) ถูกคอมไพล์
• src/firebase-config.js - มีออบเจ็กต์การกำหนดค่า Firebase ที่ใช้ในการเริ่มต้นแอปแชทของคุณ
• src/index.js - รหัส JS ของแอปแชทของคุณ

รับ Firebase CLI

Emulator Suite เป็นส่วนหนึ่งของ Firebase CLI (อินเทอร์เฟซบรรทัดคำสั่ง) ซึ่งสามารถติดตั้งบนเครื่องของคุณด้วยคำสั่งต่อไปนี้:

$ npm install -g firebase-tools@latest

สร้างจาวาสคริปต์ด้วย webpack ซึ่งจะสร้าง main.js ภายในไดเร็กทอรี public/scripts/

webpack build

ถัดไป ยืนยันว่าคุณมี CLI เวอร์ชันล่าสุด Codelab นี้ใช้งานได้กับเวอร์ชัน 11.14 ขึ้นไป

$ firebase --version
11.14.2

เชื่อมต่อกับโปรเจ็กต์ Firebase ของคุณ

หากคุณไม่มีโปรเจ็กต์ Firebase ให้สร้างโปรเจ็กต์ Firebase ใหม่ใน คอนโซล Firebase จดบันทึกรหัสโปรเจ็กต์ที่คุณเลือก เนื่องจากคุณจะต้องใช้ในภายหลัง

ตอนนี้คุณต้องเชื่อมต่อโค้ดนี้กับโปรเจ็กต์ Firebase ของคุณ ขั้นแรกให้รันคำสั่งต่อไปนี้เพื่อเข้าสู่ระบบ Firebase CLI:

$ firebase login

จากนั้นรันคำสั่งต่อไปนี้เพื่อสร้างนามแฝงโครงการ แทนที่ $YOUR_PROJECT_ID ด้วย ID ของโครงการ Firebase ของคุณ

$ firebase use $YOUR_PROJECT_ID

ตอนนี้คุณพร้อมที่จะเรียกใช้แอปแล้ว!

2. เรียกใช้โปรแกรมจำลอง

ในส่วนนี้ คุณจะเรียกใช้แอปในเครื่อง ซึ่งหมายความว่าถึงเวลาบูต Emulator Suite

เริ่มโปรแกรมจำลอง

จากภายในไดเรกทอรีต้นทางของ 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

เมื่อคุณเห็นข้อความ All Emulators Ready แสดงว่าแอปพร้อมใช้งานแล้ว

3. การดำเนินการ MFA

MFA ได้ถูกนำไปใช้บางส่วนใน repo นี้ คุณจะต้องเพิ่มรหัสเพื่อลงทะเบียนผู้ใช้ใน MFA ก่อน จากนั้นจึงแจ้งให้ผู้ใช้ที่ลงทะเบียนใน MFA ทราบปัจจัยที่สอง

ในโปรแกรมแก้ไข ให้เปิดไฟล์ src/index.js และค้นหาเมธอด startEnrollMultiFactor() เพิ่มโค้ดต่อไปนี้เพื่อตั้งค่าตัวยืนยัน reCAPTCHA ที่จะป้องกันการละเมิดทางโทรศัพท์ (ตัวยืนยัน reCAPTCHA ถูกตั้งค่าเป็นมองไม่เห็นและผู้ใช้จะไม่สามารถมองเห็นได้):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

จากนั้น ค้นหาเมธอด finishEnrollMultiFactor() และเพิ่มรายการต่อไปนี้เพื่อลงทะเบียนปัจจัยที่สอง:

// 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 ให้ป้อนปัจจัยที่สอง:

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 ในหน้าต่างเทอร์มินัล

เนื่องจากโปรแกรมจำลองรองรับ Multi-Factor Auth อย่างสมบูรณ์ สภาพแวดล้อมการพัฒนาของคุณจึงสามารถพึ่งพาตนเองได้ทั้งหมด

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการนำ MFA ไปใช้ โปรดดู เอกสารอ้างอิง ของเรา

5. สร้างฟังก์ชั่นการบล็อค

แอปพลิเคชั่นบางตัวมีไว้สำหรับผู้ใช้กลุ่มใดกลุ่มหนึ่งเท่านั้น ในกรณีดังกล่าว คุณต้องการสร้างข้อกำหนดที่กำหนดเองสำหรับผู้ใช้ในการสมัครหรือลงชื่อเข้าใช้แอปของคุณ

นั่นคือสิ่งที่ฟังก์ชันการบล็อกมอบให้: วิธีสร้างข้อกำหนดการรับรองความถูกต้องแบบกำหนดเอง เป็นฟังก์ชันคลาวด์ แต่ไม่เหมือนกับฟังก์ชันส่วนใหญ่ตรงที่ทำงานพร้อมกันเมื่อผู้ใช้พยายามสมัครหรือลงชื่อเข้าใช้

หากต้องการสร้างฟังก์ชันการบล็อก ให้เปิด 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 แน่นอน!