การตรวจสอบโทรศัพท์

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

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

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

ติดตั้ง

ก่อนเริ่มใช้การตรวจสอบสิทธิ์โทรศัพท์ ตรวจสอบให้แน่ใจว่าคุณได้ปฏิบัติตามขั้นตอนเหล่านี้แล้ว:

1. เปิดใช้งานโทรศัพท์เป็นวิธีลงชื่อเข้าใช้ใน คอนโซล Firebase
2. Android : หากคุณยังไม่ได้ตั้งค่าแฮช SHA-1 ของแอปใน คอนโซล Firebase ให้ดำเนินการดังกล่าว ดูการ ตรวจสอบสิทธิ์ไคลเอ็นต์ของคุณ สำหรับข้อมูลเกี่ยวกับการค้นหาแฮช SHA-1 ของแอป
3. iOS : ใน Xcode ให้เปิดใช้งานการแจ้งเตือนแบบพุช สำหรับโปรเจ็กต์ของคุณ & ตรวจสอบให้แน่ใจว่าคีย์การตรวจสอบสิทธิ์ APN ของคุณได้รับ การกำหนดค่าด้วย Firebase Cloud Messaging (FCM) หากต้องการดูคำอธิบายเชิงลึกของขั้นตอนนี้ โปรดดูเอกสาร Firebase iOS Phone Auth
4. เว็บ : ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มโดเมนแอปพลิเคชันของคุณบน คอนโซล Firebase ภายใต้ โดเมนเปลี่ยนเส้นทาง OAuth

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

การใช้งาน

Firebase Authentication SDK สำหรับ Flutter ให้สองวิธีในการลงชื่อเข้าใช้ให้ผู้ใช้ด้วยหมายเลขโทรศัพท์ของตน แพลตฟอร์มดั้งเดิม (เช่น Android และ iOS) มีฟังก์ชันการทำงานที่แตกต่างกันในการตรวจสอบหมายเลขโทรศัพท์มากกว่าเว็บ ดังนั้นจึงมีวิธีการสองวิธีสำหรับแต่ละแพลตฟอร์มโดยเฉพาะ:

• แพลตฟอร์มดั้งเดิม : verifyPhoneNumber
• แพลตฟอร์มเว็บ : signInWithPhoneNumber

พื้นเมือง: verifyPhoneNumber

บนแพลตฟอร์มดั้งเดิม หมายเลขโทรศัพท์ของผู้ใช้ต้องได้รับการยืนยันก่อน จากนั้นผู้ใช้สามารถลงชื่อเข้าใช้หรือเชื่อมโยงบัญชีของตนกับ PhoneAuthCredential

ก่อนอื่นคุณต้องแจ้งให้ผู้ใช้ทราบหมายเลขโทรศัพท์ เมื่อระบุแล้ว ให้เรียก verifyPhoneNumber() :

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) {},
  verificationFailed: (FirebaseAuthException e) {},
  codeSent: (String verificationId, int? resendToken) {},
  codeAutoRetrievalTimeout: (String verificationId) {},
);

มีการโทรกลับแยกกัน 4 รายการที่คุณต้องจัดการ โดยแต่ละรายการจะกำหนดว่าคุณอัปเดต UI ของแอปพลิเคชันอย่างไร:

1. การ ตรวจสอบ เสร็จสมบูรณ์ : การจัดการรหัส SMS บนอุปกรณ์ Android โดยอัตโนมัติ
2. ตรวจสอบ ล้มเหลว : จัดการเหตุการณ์ความล้มเหลวเช่นหมายเลขโทรศัพท์ที่ไม่ถูกต้องหรือว่าเกินโควต้า SMS หรือไม่
3. codeSent : จัดการเมื่อมีการส่งรหัสไปยังอุปกรณ์จาก Firebase ใช้เพื่อแจ้งให้ผู้ใช้ป้อนรหัส
4. codeAutoRetrievalTimeout : จัดการการหมดเวลาเมื่อการจัดการรหัส SMS อัตโนมัติล้มเหลว

การตรวจสอบเสร็จสิ้น

ตัวจัดการนี้จะถูกเรียกบนอุปกรณ์ Android ที่รองรับการแก้ไขรหัส SMS อัตโนมัติเท่านั้น

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

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) async {
    // ANDROID ONLY!

    // Sign the user in (or link) with the auto-generated credential
    await auth.signInWithCredential(credential);
  },
);

การตรวจสอบล้มเหลว

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

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationFailed: (FirebaseAuthException e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
    }

    // Handle other errors
  },
);

ส่งรหัส

เมื่อ Firebase ส่งรหัส SMS ไปยังอุปกรณ์ ตัวจัดการนี้จะถูกทริกเกอร์ด้วย verificationId และ resendToken ( resendToken รองรับบนอุปกรณ์ Android เท่านั้น อุปกรณ์ iOS จะคืน null เสมอ )

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

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async {
    // Update the UI - wait for the user to enter the SMS code
    String smsCode = 'xxxx';

    // Create a PhoneAuthCredential with the code
    PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

    // Sign the user in (or link) with the credential
    await auth.signInWithCredential(credential);
  },
);

ตามค่าเริ่มต้น Firebase จะไม่ส่งข้อความ SMS ใหม่อีกครั้งหากเพิ่งส่งไป อย่างไรก็ตาม คุณสามารถแทนที่ลักษณะการทำงานนี้ได้โดยการเรียกเมธอด verifyPhoneNumber อีกครั้งด้วยการส่งโทเค็นอีกครั้งไปยังอาร์กิวเมนต์ forceResendingToken หากสำเร็จ ระบบจะส่งข้อความ SMS อีกครั้ง

รหัสเรียกข้อมูลอัตโนมัติหมดเวลา

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

โดยค่าเริ่มต้น อุปกรณ์จะรอเป็นเวลา 30 วินาที อย่างไรก็ตาม ค่านี้สามารถปรับแต่งได้ด้วยอาร์กิวเมนต์การ timeout :

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  timeout: const Duration(seconds: 60),
  codeAutoRetrievalTimeout: (String verificationId) {
    // Auto-resolution timed out...
  },
);

เว็บ: signInWithPhoneNumber

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

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

FirebaseAuth auth = FirebaseAuth.instance;

// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

การเรียกใช้เมธอดจะทำให้วิดเจ็ต reCAPTCHA แสดงขึ้นก่อน ผู้ใช้ต้องทำการทดสอบให้เสร็จสิ้นก่อนที่จะส่งรหัส SMS เมื่อเสร็จแล้ว คุณสามารถลงชื่อเข้าใช้โดยให้รหัส SMS กับวิธีการ confirm ในการตอบกลับ ConfirmationResult ที่ได้รับการแก้ไข:

UserCredential userCredential = await confirmationResult.confirm('123456');

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

การกำหนดค่า reCAPTCHA

วิดเจ็ต reCAPTCHA เป็นโฟลว์ที่มีการจัดการเต็มรูปแบบซึ่งมอบความปลอดภัยให้กับเว็บแอปพลิเคชันของคุณ

อาร์กิวเมนต์ที่สองของ signInWithPhoneNumber ยอมรับอินสแตนซ์ RecaptchaVerifier ที่เป็นตัวเลือก ซึ่งสามารถใช้เพื่อจัดการวิดเจ็ต โดยค่าเริ่มต้น วิดเจ็ตจะแสดงเป็นวิดเจ็ตที่มองไม่เห็นเมื่อมีการทริกเกอร์ขั้นตอนการลงชื่อเข้าใช้ วิดเจ็ต "ล่องหน" จะปรากฏเป็นโมดอลแบบเต็มหน้าที่ด้านบนของแอปพลิเคชันของคุณ

อย่างไรก็ตาม เป็นไปได้ที่จะแสดงวิดเจ็ตแบบอินไลน์ที่ผู้ใช้ต้องกดเพื่อยืนยันตัวเองอย่างชัดเจน

ในการเพิ่มวิดเจ็ตอินไลน์ ให้ระบุ ID องค์ประกอบ DOM ไปยังอาร์กิวเมนต์ container ของอินสแตนซ์ RecaptchaVerifier องค์ประกอบต้องมีอยู่และว่างเปล่ามิฉะนั้นจะเกิดข้อผิดพลาด หากไม่ได้ระบุอาร์กิวเมนต์ container วิดเจ็ตจะแสดงเป็น "ล่องหน"

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

คุณสามารถเลือกเปลี่ยนขนาดและธีมได้โดยกำหนดอาร์กิวเมนต์ size และ theme ตามที่แสดงด้านบน

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

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

การทดสอบ

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

1. บนคอนโซล Firebase เลือกผู้ให้บริการตรวจสอบสิทธิ์ "โทรศัพท์" และคลิกรายการแบบเลื่อนลง "หมายเลขโทรศัพท์สำหรับการทดสอบ"
2. ป้อนหมายเลขโทรศัพท์ใหม่ (เช่น +44 7444 555666 ) และรหัสทดสอบ (เช่น 123456 )

หากระบุหมายเลขโทรศัพท์ทดสอบกับวิธี verifyPhoneNumber หรือ signInWithPhoneNumber จะไม่มีการส่ง SMS คุณสามารถระบุรหัสทดสอบโดยตรงกับ PhoneAuthProvider หรือด้วยตัวจัดการผลการยืนยัน signInWithPhoneNumber