ตรวจสอบสิทธิ์ด้วย 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. ตั้งค่านโยบายในภูมิภาคที่คุณต้องการอนุญาตหรือปฏิเสธ การส่งข้อความ 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();
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

คุณเลือกตั้งค่าฟังก์ชันเรียกกลับในออบเจ็กต์ 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 ซึ่ง คุณสามารถใช้เพื่อทำการเรียกไปยัง reCAPTCHA API ได้

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

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

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

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 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()โทรหรือเมื่อคลิกปุ่มยึดของ 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.
});
auth_sign_out.js

Web

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