ตรวจสอบสิทธิ์ด้วย Firebase ด้วยหมายเลขโทรศัพท์โดยใช้ JavaScript

คุณใช้การตรวจสอบสิทธิ์ Firebase เพื่อลงชื่อเข้าใช้ผู้ใช้ได้โดยส่งข้อความ SMS ไปยังโทรศัพท์ของผู้ใช้ ผู้ใช้จะลงชื่อเข้าใช้ด้วยรหัสแบบใช้ครั้งเดียวที่อยู่ในข้อความ SMS

วิธีที่ง่ายที่สุดในการเพิ่มการลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์ลงในแอปคือการใช้ FirebaseUI ซึ่งประกอบด้วยวิดเจ็ตการลงชื่อเข้าใช้แบบหล่นลงซึ่งใช้ขั้นตอนการลงชื่อเข้าใช้สำหรับการลงชื่อเข้าใช้หมายเลขโทรศัพท์ ตลอดจนการลงชื่อเข้าใช้ด้วยรหัสผ่านและแบบรวมศูนย์ เอกสารนี้จะอธิบายวิธีใช้ขั้นตอนการลงชื่อเข้าใช้หมายเลขโทรศัพท์โดยใช้ Firebase SDK

ก่อนเริ่มต้น

คัดลอกข้อมูลโค้ดการเริ่มต้นจากคอนโซล Firebase ไปยังโปรเจ็กต์ตามที่อธิบายไว้ใน เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript หากยังไม่ได้ทำ

ข้อกังวลด้านความปลอดภัย

แต่การตรวจสอบสิทธิ์โดยใช้หมายเลขโทรศัพท์เพียงอย่างเดียวนั้นสะดวกกว่าวิธีการอื่นๆ ที่มีให้บริการ เนื่องจากการครอบครองหมายเลขโทรศัพท์นั้นสามารถโอนระหว่างผู้ใช้ได้อย่างง่ายดาย นอกจากนี้ บนอุปกรณ์ที่มีโปรไฟล์ผู้ใช้หลายโปรไฟล์ ผู้ใช้ทุกคนที่สามารถรับข้อความ SMS จะสามารถลงชื่อเข้าใช้บัญชีโดยใช้หมายเลขโทรศัพท์ของอุปกรณ์ได้

หากคุณใช้การลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์ในแอป คุณควรเสนอการลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์ควบคู่กับวิธีการลงชื่อเข้าใช้ที่ปลอดภัยมากขึ้น และแจ้งให้ผู้ใช้ทราบถึงข้อดีด้านความปลอดภัยของการลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์

เปิดใช้การลงชื่อเข้าใช้หมายเลขโทรศัพท์สำหรับโปรเจ็กต์ Firebase

หากต้องการลงชื่อเข้าใช้ให้ผู้ใช้ทาง SMS คุณต้องเปิดใช้วิธีการลงชื่อเข้าใช้หมายเลขโทรศัพท์สำหรับโปรเจ็กต์ Firebase ก่อน ดังนี้

  1. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์
  2. ในหน้าวิธีการลงชื่อเข้าใช้ ให้เปิดใช้วิธีการลงชื่อเข้าใช้หมายเลขโทรศัพท์
  3. ในหน้าเดียวกัน หากโดเมนที่จะโฮสต์แอปของคุณไม่อยู่ในส่วนโดเมนการเปลี่ยนเส้นทาง OAuth ให้เพิ่มโดเมนของคุณ โปรดทราบว่า localhost ไม่ได้รับอนุญาตให้เป็นโดเมนที่โฮสต์เพื่อจุดประสงค์ในการตรวจสอบสิทธิ์ทางโทรศัพท์

โควต้าคำขอลงชื่อเข้าใช้หมายเลขโทรศัพท์ของ Firebase สูงพอที่แอปส่วนใหญ่จะไม่ได้รับผลกระทบ อย่างไรก็ตาม หากคุณต้องการลงชื่อเข้าใช้ให้ผู้ใช้จำนวนมากด้วยการตรวจสอบสิทธิ์ทางโทรศัพท์ คุณอาจต้องอัปเกรดแพ็กเกจราคา ดูหน้าราคา

ตั้งค่าเครื่องมือยืนยัน reCAPTCHA

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

คุณไม่จําเป็นต้องตั้งค่าไคลเอ็นต์ reCAPTCHA ด้วยตนเอง เมื่อใช้ออบเจ็กต์ RecaptchaVerifier ของ Firebase SDK ทาง Firebase จะสร้างและจัดการคีย์และข้อมูลลับของไคลเอ็นต์โดยอัตโนมัติ

ออบเจ็กต์ RecaptchaVerifier รองรับ reCAPTCHA ที่ไม่ปรากฏ ซึ่งมักยืนยันผู้ใช้ได้โดยไม่ต้องดำเนินการใดๆ จากผู้ใช้ รวมถึงวิดเจ็ต reCAPTCHA ซึ่งกำหนดให้ต้องมีการโต้ตอบของผู้ใช้จึงจะเสร็จสมบูรณ์เสมอ

reCAPTCHA ที่แสดงผลที่เกี่ยวข้องสามารถแปลตามค่ากำหนดของผู้ใช้ได้โดยการอัปเดตรหัสภาษาในอินสแตนซ์ Auth ก่อนแสดงผล reCAPTCHA การแปลที่กล่าวถึงข้างต้นนี้จะใช้กับข้อความ SMS ที่ส่งถึงผู้ใช้ ซึ่งมีรหัสยืนยัน

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

ใช้ reCAPTCHA ที่ไม่แสดง

หากต้องการใช้ reCAPTCHA ที่ไม่แสดง ให้สร้างออบเจ็กต์ RecaptchaVerifier ที่มีการตั้งค่าพารามิเตอร์ size เป็น invisible โดยระบุรหัสของปุ่มที่ส่งแบบฟอร์มการลงชื่อเข้าใช้ ตัวอย่างเช่น

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});
auth_phone_recaptcha_verifier_invisible.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});
phone-auth.js

ใช้วิดเจ็ต reCAPTCHA

หากต้องการใช้วิดเจ็ต reCAPTCHA ที่มองเห็นได้ ให้สร้างองค์ประกอบในหน้าเว็บเพื่อให้มีวิดเจ็ต จากนั้นสร้างออบเจ็กต์ RecaptchaVerifier โดยระบุรหัสของคอนเทนเนอร์เมื่อดำเนินการดังกล่าว ตัวอย่างเช่น

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {});
auth_phone_recaptcha_verifier_simple.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
phone-auth.js

ไม่บังคับ: ระบุพารามิเตอร์ reCAPTCHA

คุณเลือกตั้งค่าฟังก์ชัน Callback ในออบเจ็กต์ RecaptchaVerifier ที่จะเรียกใช้เมื่อผู้ใช้แก้ reCAPTCHA หรือ reCAPTCHA หมดอายุก่อนที่ผู้ใช้จะส่งแบบฟอร์มได้ โดยทำดังนี้

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});
auth_phone_recaptcha_verifier_visible.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});
phone-auth.js

ไม่บังคับ: แสดงผล reCAPTCHA ล่วงหน้า

หากต้องการแสดงผล reCAPTCHA ล่วงหน้าก่อนส่งคำขอลงชื่อเข้าใช้ โปรดเรียกใช้ render

Web

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
auth_phone_recaptcha_render.js

Web

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
phone-auth.js

หลังจากแก้ปัญหา render แล้ว คุณจะได้รับรหัสวิดเจ็ตของ reCAPTCHA ซึ่งคุณจะใช้เรียก API ของ reCAPTCHA ได้

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
auth_get_recaptcha_response.js

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
phone-auth.js

ส่งรหัสยืนยันไปยังโทรศัพท์ของผู้ใช้

หากต้องการเริ่มลงชื่อเข้าใช้หมายเลขโทรศัพท์ ให้แสดงอินเทอร์เฟซที่แจ้งให้ผู้ใช้ระบุหมายเลขโทรศัพท์ของตน แล้วโทรไปที่ signInWithPhoneNumber เพื่อขอให้ Firebase ส่งรหัสการตรวจสอบสิทธิ์ไปยังโทรศัพท์ของผู้ใช้ทาง SMS โดยทำดังนี้

  1. ดูหมายเลขโทรศัพท์ของผู้ใช้

    ข้อกำหนดทางกฎหมายอาจแตกต่างกันออกไป แต่แนวทางปฏิบัติแนะนำและเพื่อกำหนดความคาดหวังของผู้ใช้ คุณควรแจ้งให้ผู้ใช้ทราบว่าหากผู้ใช้ลงชื่อเข้าใช้ทางโทรศัพท์ ผู้ใช้อาจได้รับข้อความ SMS สำหรับการยืนยัน และอาจต้องเสียค่าใช้จ่ายตามอัตรามาตรฐาน

  2. โทรหา signInWithPhoneNumber เพื่อโอนสายไปยังหมายเลขโทรศัพท์ของผู้ใช้และ RecaptchaVerifier ที่คุณสร้างไว้ก่อนหน้านี้

    Web

    import { getAuth, signInWithPhoneNumber } from "firebase/auth";

const phoneNumber = getPhoneNumberFromUserInput();
const appVerifier = window.recaptchaVerifier;

const auth = getAuth();
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
    .then((confirmationResult) => {
      // SMS sent. Prompt user to type the code from the message, then sign the
      // user in with confirmationResult.confirm(code).
      window.confirmationResult = confirmationResult;
      // ...
    }).catch((error) => {
      // Error; SMS not sent
      // ...
    });
    auth_phone_signin.js

    Web

    const phoneNumber = getPhoneNumberFromUserInput();
const appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then((confirmationResult) => {
      // SMS sent. Prompt user to type the code from the message, then sign the
      // user in with confirmationResult.confirm(code).
      window.confirmationResult = confirmationResult;
      // ...
    }).catch((error) => {
      // Error; SMS not sent
      // ...
    });
    phone-auth.js
    หาก signInWithPhoneNumber แสดงข้อผิดพลาด ให้รีเซ็ต reCAPTCHA เพื่อให้ผู้ใช้ลองอีกครั้งได้โดยทำดังนี้ 
    grecaptcha.reset(window.recaptchaWidgetId);

// Or, if you haven't stored the widget ID:
window.recaptchaVerifier.render().then(function(widgetId) {
  grecaptcha.reset(widgetId);
});

เมธอด signInWithPhoneNumber จะออกคำถาม reCAPTCHA ให้แก่ผู้ใช้ และหากผู้ใช้ผ่านคำถามแล้ว จะขอให้การตรวจสอบสิทธิ์ Firebase ส่งข้อความ SMS ที่มีรหัสยืนยันไปยังโทรศัพท์ของผู้ใช้

ลงชื่อเข้าใช้ผู้ใช้ด้วยรหัสยืนยัน

หลังจากโทรหา signInWithPhoneNumber สำเร็จแล้ว ให้แจ้งให้ผู้ใช้พิมพ์รหัสยืนยันที่ได้รับทาง SMS จากนั้นลงชื่อเข้าใช้ผู้ใช้โดยการส่งรหัสไปยังเมธอด confirm ของออบเจ็กต์ ConfirmationResult ที่ส่งไปยังเครื่องจัดการการดำเนินการของ signInWithPhoneNumber (ซึ่งก็คือการบล็อก then) ตัวอย่างเช่น

Web

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});
auth_phone_verify_code.js

Web

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});
phone-auth.js

หากโทรหา confirm สำเร็จ ผู้ใช้จะลงชื่อเข้าใช้ได้สำเร็จ

รับออบเจ็กต์ AuthCredential ระหว่าง

หากจำเป็นต้องรับออบเจ็กต์ AuthCredential สำหรับบัญชีของผู้ใช้ ให้ส่งรหัสยืนยันจากผลการยืนยันและรหัสยืนยันไปยัง PhoneAuthProvider.credential แทนการโทรไปที่ confirm: 

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

จากนั้นคุณจะลงชื่อเข้าใช้ผู้ใช้ด้วยข้อมูลเข้าสู่ระบบได้โดยทำดังนี้

firebase.auth().signInWithCredential(credential);

ทดสอบด้วยหมายเลขโทรศัพท์สมมติ

คุณตั้งค่าหมายเลขโทรศัพท์สมมติสำหรับการพัฒนาได้ผ่านคอนโซล Firebase การทดสอบด้วยหมายเลขโทรศัพท์สมมติ มีประโยชน์ดังนี้

  • ทดสอบการตรวจสอบสิทธิ์ของหมายเลขโทรศัพท์โดยไม่ใช้โควต้าการใช้งาน
  • ทดสอบการตรวจสอบสิทธิ์หมายเลขโทรศัพท์โดยไม่ส่งข้อความ SMS จริง
  • ทำการทดสอบติดต่อกันด้วยหมายเลขโทรศัพท์เดียวกันโดยไม่มีการควบคุม การดำเนินการนี้จะช่วยลดความเสี่ยงในการปฏิเสธระหว่างกระบวนการตรวจสอบของ App Store หากผู้ตรวจสอบใช้หมายเลขโทรศัพท์เดียวกันสำหรับการทดสอบ
  • ทดสอบได้ทันทีในสภาพแวดล้อมในการพัฒนาซอฟต์แวร์โดยไม่ต้องดำเนินการใดๆ เพิ่มเติม เช่น สามารถพัฒนาในเครื่องมือจำลองของ iOS หรือโปรแกรมจำลองของ Android โดยไม่ต้องใช้บริการ Google Play
  • เขียนการทดสอบการผสานรวมโดยไม่ถูกบล็อกโดยการตรวจสอบความปลอดภัยที่โดยปกติใช้ในหมายเลขโทรศัพท์จริงในสภาพแวดล้อมที่ใช้งานจริง

หมายเลขโทรศัพท์สมมติต้องเป็นไปตามข้อกำหนดเหล่านี้

  1. ตรวจสอบว่าคุณใช้หมายเลขโทรศัพท์ที่สมมติขึ้นจริงๆ และหมายเลขไม่มีอยู่จริง การตรวจสอบสิทธิ์ Firebase ไม่อนุญาตให้คุณตั้งค่าหมายเลขโทรศัพท์ที่มีอยู่ซึ่งผู้ใช้จริงใช้เป็นหมายเลขทดสอบ ตัวเลือกหนึ่งคือการใช้หมายเลข 555 นำหน้าเป็นหมายเลขโทรศัพท์ทดสอบในสหรัฐอเมริกา เช่น +1 650-555-3434
  2. หมายเลขโทรศัพท์ต้องมีรูปแบบที่ถูกต้องสำหรับความยาวและข้อจำกัดอื่นๆ ผู้ใช้จะยังผ่านขั้นตอนการตรวจสอบเดียวกับหมายเลขโทรศัพท์ของผู้ใช้จริง
  3. คุณเพิ่มหมายเลขโทรศัพท์สำหรับการพัฒนาได้สูงสุด 10 หมายเลข
  4. ใช้หมายเลขโทรศัพท์/รหัสที่คาดเดาได้ยากและเปลี่ยนรหัสเหล่านั้นบ่อยๆ

สร้างหมายเลขโทรศัพท์และรหัสยืนยันสมมติ

  1. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์
  2. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการโทรศัพท์หากยังไม่ได้เปิดใช้
  3. เปิดเมนูหมายเลขโทรศัพท์สำหรับการทดสอบ
  4. ระบุหมายเลขโทรศัพท์ที่ต้องการทดสอบ เช่น +1 650-555-3434
  5. ระบุรหัสยืนยัน 6 หลักของหมายเลขนั้น เช่น 654321
  6. เพิ่มหมายเลข หากมีความจำเป็น คุณสามารถลบหมายเลขโทรศัพท์และโค้ดของหมายเลขดังกล่าวได้ โดยวางเมาส์เหนือแถวที่ต้องการ แล้วคลิกไอคอนถังขยะ

การทดสอบด้วยตนเอง

คุณสามารถเริ่มใช้หมายเลขโทรศัพท์สมมติในแอปพลิเคชันได้โดยตรง วิธีนี้ช่วยให้คุณทำการทดสอบด้วยตนเองในขั้นตอนการพัฒนาได้โดยไม่มีปัญหาโควต้าหรือการควบคุม นอกจากนี้คุณยังทดสอบจากเครื่องจำลองของ iOS หรือโปรแกรมจำลองของ Android ได้โดยตรงโดยไม่ต้องติดตั้งบริการ Google Play

เมื่อคุณระบุหมายเลขโทรศัพท์สมมติและส่งรหัสยืนยัน จะไม่มีการส่ง SMS จริง โดยคุณจะต้องระบุรหัสยืนยันที่กำหนดค่าไว้ก่อนหน้านี้แทนเพื่อลงชื่อเข้าใช้ให้เสร็จสิ้น

เมื่อลงชื่อเข้าใช้เสร็จแล้ว ระบบจะสร้างผู้ใช้ Firebase ด้วยหมายเลขโทรศัพท์ดังกล่าว ผู้ใช้มีลักษณะการทำงานและพร็อพเพอร์ตี้เหมือนกับผู้ใช้หมายเลขโทรศัพท์จริง และเข้าถึง Realtime Database/Cloud Firestore และบริการอื่นๆ ได้ในลักษณะเดียวกัน โทเค็นรหัสที่สร้างในระหว่างขั้นตอนนี้มีลายเซ็นเหมือนกับผู้ใช้หมายเลขโทรศัพท์จริง

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

การทดสอบการผสานรวม

นอกจากการทดสอบด้วยตนเองแล้ว การตรวจสอบสิทธิ์ Firebase ยังมี API ที่ช่วยเขียนการทดสอบการผสานรวมสำหรับการทดสอบการตรวจสอบสิทธิ์ทางโทรศัพท์ API เหล่านี้จะปิดใช้การตรวจสอบแอปโดยปิดใช้ข้อกำหนด reCAPTCHA ในเว็บและข้อความ Push แบบเงียบใน iOS แนวทางนี้ช่วยให้ทดสอบการทำงานอัตโนมัติได้ ในขั้นตอนเหล่านี้และนำไปใช้ได้ง่ายขึ้น และยังช่วยให้ทดสอบขั้นตอนการยืนยันแบบทันทีบน Android ได้ด้วย

บนเว็บ ให้ตั้งค่า appVerificationDisabledForTesting เป็น true ก่อนแสดงผล firebase.auth.RecaptchaVerifier วิธีนี้จะแก้ปัญหา reCAPTCHA โดยอัตโนมัติ ซึ่งช่วยให้คุณส่งหมายเลขโทรศัพท์ได้โดยไม่ต้องแก้ปัญหาด้วยตนเอง โปรดทราบว่าแม้จะปิดใช้ reCAPTCHA แต่การใช้หมายเลขโทรศัพท์สมมติจะยังลงชื่อเข้าใช้ไม่สำเร็จ ใช้ได้เฉพาะหมายเลขโทรศัพท์สมมติเท่านั้นกับ API นี้ 

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

เครื่องมือยืนยันแอปจำลอง reCAPTCHA ที่มองเห็นได้และมองไม่เห็นจะทำงานต่างออกไปเมื่อปิดใช้การยืนยันแอป

  • reCAPTCHA ที่มองเห็นได้: เมื่อแสดงผล reCAPTCHA ที่มองเห็นได้ผ่าน appVerifier.render() ระบบจะแก้ไขตัวเองโดยอัตโนมัติหลังจากล่าช้าเพียงเสี้ยววินาที ซึ่งจะเหมือนกับการที่ผู้ใช้คลิก reCAPTCHA ทันทีที่แสดงผล การตอบกลับ reCAPTCHA จะหมดอายุหลังจากผ่านไประยะเวลาหนึ่งและจะแก้ไขโดยอัตโนมัติอีกครั้ง
  • reCAPTCHA แบบไม่แสดง: reCAPTCHA ที่ไม่แสดงจะไม่แก้ไขโดยอัตโนมัติเมื่อแสดงผล แต่จะแก้ไขใน appVerifier.verify()การเรียกใช้ หรือเมื่อมีการคลิกปุ่ม Anchor ของปุ่มของ reCAPTCHA หลังจากการหน่วงเวลา 1 วินาที ในทำนองเดียวกัน การตอบกลับจะหมดอายุหลังจากผ่านไประยะหนึ่งและจะแก้ไขโดยอัตโนมัติหลังจากการเรียกใช้ appVerifier.verify() หรือเมื่อมีการคลิกปุ่ม Anchor ของ reCAPTCHA อีกครั้งเท่านั้น

เมื่อใดก็ตามที่มีการแปลง reCAPTCHA ที่เป็นการจำลอง ฟังก์ชัน Callback ที่สอดคล้องกันจะทริกเกอร์ด้วยคำตอบปลอมตามที่คาดไว้ หากมีการระบุ Callback วันหมดอายุด้วย จะทริกเกอร์เมื่อหมดอายุ

ขั้นตอนถัดไป

หลังจากผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรก ระบบจะสร้างบัญชีผู้ใช้ใหม่และลิงก์กับข้อมูลเข้าสู่ระบบ ซึ่งก็คือชื่อผู้ใช้และรหัสผ่าน หมายเลขโทรศัพท์ หรือข้อมูลของผู้ให้บริการการตรวจสอบสิทธิ์ ซึ่งผู้ใช้ที่ลงชื่อเข้าใช้ด้วย ระบบจะจัดเก็บบัญชีใหม่นี้เป็นส่วนหนึ่งของโปรเจ็กต์ Firebase และสามารถใช้เพื่อระบุผู้ใช้ในทุกแอปในโปรเจ็กต์ได้ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใด

  • สำหรับแอปของคุณ ทางที่แนะนำเพื่อให้ทราบถึงสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์ในออบเจ็กต์ Auth จากนั้นคุณจะรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์ User โปรดดูหัวข้อจัดการผู้ใช้

  • ในกฎความปลอดภัยของ Firebase Realtime Database และ Cloud Storage คุณจะรับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth ได้ และใช้รหัสดังกล่าวเพื่อควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้

คุณอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปโดยใช้ผู้ให้บริการการตรวจสอบสิทธิ์หลายรายได้โดยลิงก์ข้อมูลเข้าสู่ระบบของผู้ให้บริการการตรวจสอบสิทธิ์กับบัญชีผู้ใช้ที่มีอยู่

หากต้องการนำผู้ใช้ออกจากระบบ โปรดโทรหา signOut:

Web

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