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

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

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

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

ติดตั้ง

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

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) มีฟังก์ชันการตรวจสอบหมายเลขโทรศัพท์ที่แตกต่างจากเว็บ ดังนั้นจึงมี 2 วิธีสำหรับแต่ละแพลตฟอร์มเท่านั้น:

• Native Platform : 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. VerificationFailed : จัดการเหตุการณ์ที่ล้มเหลว เช่น หมายเลขโทรศัพท์ไม่ถูกต้องหรือเกินโควต้า 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 แล้ว คุณสามารถรวม ID การยืนยันกับรหัส 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 อีกครั้งด้วยโทเค็น resend ไปยังอาร์กิวเมนต์ forceResendingToken หากสำเร็จ ข้อความ SMS จะถูกส่งอีกครั้ง

codeAutoRetrievalTimeout

บนอุปกรณ์ 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');

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

การกำหนดค่า 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