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

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

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

ก่อนที่คุณจะเริ่มต้น

หากคุณยังไม่ได้ดำเนินการ ให้คัดลอกข้อมูลโค้ดการเริ่มต้นจาก คอนโซล Firebase ไปยังโครงการของคุณตามที่อธิบายไว้ใน Add Firebase to your JavaScript project

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

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

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

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

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

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

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

ตั้งค่าตัวตรวจสอบ reCAPTCHA

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

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

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

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

Web modular API

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 namespaced API

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 โดยระบุ ID ของปุ่มที่ส่งแบบฟอร์มลงชื่อเข้าใช้ของคุณ ตัวอย่างเช่น:

Web modular API

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 namespaced API

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

ใช้วิดเจ็ต reCAPTCHA

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

Web modular API

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

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

Web namespaced API

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

ทางเลือก: ระบุพารามิเตอร์ reCAPTCHA

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

Web modular API

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 namespaced API

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 modular API

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

Web namespaced API

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

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

Web modular API

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

Web namespaced API

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

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

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

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

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

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

    Web modular API

    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 namespaced API

    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 Authentication ส่งข้อความ SMS ที่มีรหัสยืนยันไปยังโทรศัพท์ของผู้ใช้

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

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

Web modular API

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 namespaced API

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 ด้วยหมายเลขโทรศัพท์นั้น ผู้ใช้มีลักษณะการทำงานและคุณสมบัติเหมือนกับผู้ใช้หมายเลขโทรศัพท์จริง และสามารถเข้าถึงฐานข้อมูลเรียลไทม์/Cloud Firestore และบริการอื่นๆ ได้ด้วยวิธีเดียวกัน โทเค็น ID ที่สร้างขึ้นในระหว่างกระบวนการนี้มีลายเซ็นเหมือนกับผู้ใช้หมายเลขโทรศัพท์จริง

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

การทดสอบการบูรณาการ

นอกจากการทดสอบด้วยตนเองแล้ว Firebase Authentication ยังมี API เพื่อช่วยเขียนการทดสอบการผสานรวมสำหรับการทดสอบการตรวจสอบสิทธิ์ทางโทรศัพท์ API เหล่านี้ปิดใช้งานการยืนยันแอปโดยปิดใช้งานข้อกำหนด reCAPTCHA ในเว็บและการแจ้งเตือนแบบเงียบใน 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 จำลองได้รับการแก้ไข ฟังก์ชันการโทรกลับที่เกี่ยวข้องจะถูกเรียกใช้ตามที่คาดไว้พร้อมกับการตอบกลับปลอม หากมีการระบุการเรียกกลับที่หมดอายุด้วย การเรียกกลับจะทริกเกอร์เมื่อหมดอายุ

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

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

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

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

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

ในการออกจากระบบผู้ใช้ โทร signOut :

Web modular API

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 namespaced API

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