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

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

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

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

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

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

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

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

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

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

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

    โปรดทราบว่าไม่อนุญาตให้ใช้ localhost เป็นโดเมนที่ฝากบริการเพื่อวัตถุประสงค์ในการ การตรวจสอบสิทธิ์ทางโทรศัพท์

ตั้งค่าเครื่องมือยืนยัน 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();

Web

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

ใช้ 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();
  }
});

Web

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

ใช้วิดเจ็ต reCAPTCHA

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

Web

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

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

Web

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

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

คุณสามารถตั้งค่าฟังก์ชันเรียกกลับในออบเจ็กต์ 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.
    // ...
  }
});

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.
    // ...
  }
});

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

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

Web

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

Web

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

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

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

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

หากต้องการเริ่มการลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์ ให้แสดงอินเทอร์เฟซที่แจ้งให้ผู้ใช้ ระบุหมายเลขโทรศัพท์ จากนั้นเรียกใช้ 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
          // ...
        });

    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
          // ...
        });
    หาก 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 Authentication ส่งข้อความ 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?)
  // ...
});

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?)
  // ...
});

หากการเรียกไปยัง 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 Authentication ไม่อนุญาตให้คุณตั้งค่าหมายเลขโทรศัพท์ที่มีอยู่ซึ่งผู้ใช้จริงใช้เป็นหมายเลขทดสอบ ตัวเลือกหนึ่งคือการใช้หมายเลขที่ขึ้นต้นด้วย 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 Authentication ยังมี 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()เรียกใช้หรือเมื่อคลิกปุ่มยึดของ reCAPTCHA หลังจากหน่วงเวลาเพียงเสี้ยววินาที ในทำนองเดียวกัน คำตอบจะหมดอายุหลังจากผ่านไประยะหนึ่ง และจะแก้ไขโดยอัตโนมัติหลังจากappVerifier.verify()การเรียกใช้ หรือเมื่อคลิกลิงก์ปุ่มของ reCAPTCHA อีกครั้งเท่านั้น

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

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

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

  • ในแอป วิธีที่แนะนำในการทราบสถานะการให้สิทธิ์ของผู้ใช้คือการ ตั้งค่า Observer ในออบเจ็กต์ 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.
});

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});