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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced 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

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

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced 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

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

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced API

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 หรือ reCAPTCHA หมดอายุก่อนที่ผู้ใช้จะส่งแบบฟอร์ม

Web

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced 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

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

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced API

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 คุณสามารถใช้เพื่อเรียกไปยัง reCAPTCHA API:

Web

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced API

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

   เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced 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

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

   หมายเหตุ: โปรดดู Firebase Authentication ขีดจำกัดสำหรับขีดจำกัดการใช้งานและโควต้าที่เกี่ยวข้อง

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

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

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

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

Web

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก 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?)
  // ...
});
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 Authentication ไม่อนุญาตให้คุณกำหนดหมายเลขโทรศัพท์ที่มีอยู่ซึ่งผู้ใช้จริงใช้เป็นหมายเลขทดสอบ ทางเลือกหนึ่งคือการใช้หมายเลข 555 นำหน้าเป็นหมายเลขโทรศัพท์ทดสอบในสหรัฐอเมริกา ตัวอย่างเช่น [phone]
2. หมายเลขโทรศัพท์ต้องมีรูปแบบที่ถูกต้องสำหรับความยาวและหมายเลขอื่นๆ ข้อจำกัด ผู้ใช้จะยังผ่านขั้นตอนการตรวจสอบเดียวกับหมายเลขโทรศัพท์ของผู้ใช้จริง
3. คุณเพิ่มหมายเลขโทรศัพท์สำหรับการพัฒนาได้สูงสุด 10 หมายเลข
4. ใช้หมายเลขโทรศัพท์/รหัสทดสอบที่คาดเดาและเปลี่ยนแปลงได้ยาก เหล่านั้นบ่อยๆ

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

1. ในคอนโซล Firebase ให้เปิด การตรวจสอบสิทธิ์
2. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการโทรศัพท์หากยังไม่ได้เปิดใช้
3. เปิดเมนูหมายเลขโทรศัพท์สำหรับการทดสอบ
4. ระบุหมายเลขโทรศัพท์ที่ต้องการทดสอบ เช่น [phone]
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 = "[phone]";
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 คือ คลิกหลังจากความล่าช้าเพียงเสี้ยววินาที ในทำนองเดียวกัน การตอบกลับจะหมดอายุหลังจากผ่านไประยะหนึ่ง และ จะแก้ไขอัตโนมัติหลังจากการเรียก appVerifier.verify() หรือเมื่อ ปุ่ม Anchor ของปุ่ม reCAPTCHA ถูกคลิกอีกครั้ง

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

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

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

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

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

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

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

Web

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced 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

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