การรับรองความถูกต้องทางโทรศัพท์

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

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

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