Xác thực điện thoại

Tính năng xác thực qua điện thoại cho phép người dùng đăng nhập vào Firebase bằng điện thoại của họ làm trình xác thực. Một tin nhắn SMS có chứa mã duy nhất sẽ được gửi đến người dùng (qua số điện thoại được cung cấp). Sau khi mã được cho phép, người dùng có thể đăng nhập vào Firebase.

Google sẽ gửi và lưu trữ số điện thoại mà người dùng cuối cung cấp để xác thực nhằm cải thiện khả năng ngăn chặn thư rác và hành vi lạm dụng trên các dịch vụ của Google, bao gồm nhưng không giới hạn ở Firebase. Nhà phát triển phải đảm bảo rằng họ đã được người dùng cuối đồng ý thích hợp trước khi sử dụng dịch vụ đăng nhập bằng số điện thoại của tính năng Xác thực Firebase.authentication

Tính năng Xác thực qua điện thoại của Firebase không được hỗ trợ ở tất cả các quốc gia. Vui lòng xem phần Câu hỏi thường gặp để biết thêm thông tin.

Thiết lập

Trước khi bắt đầu sử dụng tính năng Xác thực qua điện thoại, hãy đảm bảo bạn đã làm theo các bước sau:

  1. Trong bảng điều khiển Firebase, hãy chuyển đến phần Bảo mật > Xác thực.

  2. Trong thẻ Phương thức đăng nhập, hãy bật nhà cung cấp dịch vụ đăng nhập Điện thoại.

  3. Thiết lập các yêu cầu dành riêng cho nền tảng:

Cách sử dụng

SDK Xác thực Firebase cho Flutter cung cấp 2 cách riêng biệt để đăng nhập người dùng bằng số điện thoại của họ. Các nền tảng gốc (ví dụ: Android và iOS) cung cấp chức năng khác với web để xác thực số điện thoại. Do đó, mỗi nền tảng chỉ có 2 phương thức:

  • Nền tảng gốc: verifyPhoneNumber.
  • Nền tảng web: signInWithPhoneNumber.

Gốc: verifyPhoneNumber

Trên các nền tảng gốc, trước tiên, số điện thoại của người dùng phải được xác minh, sau đó người dùng có thể đăng nhập hoặc liên kết tài khoản của họ với PhoneAuthCredential.

Trước tiên, bạn phải nhắc người dùng cung cấp số điện thoại của họ. Sau khi cung cấp, hãy gọi phương thức verifyPhoneNumber():

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

Bạn phải xử lý 4 lệnh gọi lại riêng biệt. Mỗi lệnh gọi lại sẽ xác định cách bạn cập nhật giao diện người dùng của ứng dụng:

  1. verificationCompleted: Xử lý tự động mã SMS trên thiết bị Android.
  2. verificationFailed: Xử lý các sự kiện không thành công, chẳng hạn như số điện thoại không hợp lệ hoặc đã vượt quá hạn mức SMS.
  3. codeSent: Xử lý khi một mã đã được gửi đến thiết bị từ Firebase, dùng để nhắc người dùng nhập mã.
  4. codeAutoRetrievalTimeout: Xử lý thời gian chờ khi quá trình xử lý mã SMS tự động không thành công.

verificationCompleted

Trình xử lý này sẽ chỉ được gọi trên các thiết bị Android hỗ trợ giải quyết mã SMS tự động.

Khi mã SMS được gửi đến thiết bị, Android sẽ tự động xác minh mã SMS mà không yêu cầu người dùng nhập mã theo cách thủ công. Nếu sự kiện này xảy ra, PhoneAuthCredential sẽ tự động được cung cấp. Bạn có thể dùng mã này để đăng nhập hoặc liên kết số điện thoại của người dùng.

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

verificationFailed

Nếu Firebase trả về lỗi, chẳng hạn như số điện thoại không chính xác hoặc đã vượt quá hạn mức SMS cho dự án, thì FirebaseAuthException sẽ được gửi đến trình xử lý này. Trong trường hợp này, bạn sẽ nhắc người dùng rằng đã xảy ra lỗi tuỳ thuộc vào mã lỗi.

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

codeSent

Khi Firebase gửi mã SMS đến thiết bị, trình xử lý này sẽ được kích hoạt bằng verificationId và resendToken (resendToken chỉ được hỗ trợ trên thiết bị Android, thiết bị iOS sẽ luôn trả về giá trị null).

Sau khi kích hoạt, đây là thời điểm thích hợp để cập nhật giao diện người dùng của ứng dụng nhằm nhắc người dùng nhập mã SMS mà họ đang mong đợi. Sau khi nhập mã SMS, bạn có thể kết hợp mã xác minh với mã SMS để tạo PhoneAuthCredential mới:

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

Theo mặc định, Firebase sẽ không gửi lại tin nhắn SMS mới nếu tin nhắn đó đã được gửi gần đây. Tuy nhiên, bạn có thể ghi đè hành vi này bằng cách gọi lại phương thức verifyPhoneNumber bằng mã gửi lại cho đối số forceResendingToken. Nếu thành công, tin nhắn SMS sẽ được gửi lại.

codeAutoRetrievalTimeout

Trên các thiết bị Android hỗ trợ giải quyết mã SMS tự động, trình xử lý này sẽ được gọi nếu thiết bị không tự động giải quyết tin nhắn SMS trong một khoảng thời gian nhất định. Sau khi khoảng thời gian này trôi qua, thiết bị sẽ không còn cố gắng giải quyết bất kỳ tin nhắn nào đến.

Theo mặc định, thiết bị sẽ chờ 30 giây. Tuy nhiên, bạn có thể tuỳ chỉnh khoảng thời gian này bằng đối số 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...
  },
);

Web: signInWithPhoneNumber

Trên các nền tảng web, người dùng có thể đăng nhập bằng cách xác nhận rằng họ có quyền truy cập vào điện thoại bằng cách nhập mã SMS được gửi đến số điện thoại đã cung cấp. Để tăng cường tính bảo mật và ngăn chặn thư rác, người dùng được yêu cầu chứng minh rằng họ là người thật bằng cách hoàn tất tiện ích reCAPTCHA của Google. Sau khi xác nhận, mã SMS sẽ được gửi.

Theo mặc định, SDK Xác thực Firebase cho Flutter sẽ quản lý tiện ích reCAPTCHA, nhưng cung cấp quyền kiểm soát cách hiển thị và định cấu hình tiện ích này nếu cần. Để bắt đầu, hãy gọi phương thức signInWithPhoneNumber bằng số điện thoại.

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

Việc gọi phương thức này sẽ kích hoạt tiện ích reCAPTCHA hiển thị. Người dùng phải hoàn tất bài kiểm tra trước khi mã SMS được gửi. Sau khi hoàn tất, bạn có thể đăng nhập người dùng bằng cách cung cấp mã SMS cho phương thức confirm trên phản hồi ConfirmationResult đã giải quyết:

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

Giống như các quy trình đăng nhập khác, việc đăng nhập thành công sẽ kích hoạt mọi trình nghe trạng thái xác thực mà bạn đã đăng ký trong suốt ứng dụng của mình.

Cấu hình reCAPTCHA

Tiện ích reCAPTCHA là một quy trình được quản lý hoàn toàn, giúp bảo mật ứng dụng web của bạn.

Đối số thứ hai của signInWithPhoneNumber chấp nhận một thực thể RecaptchaVerifier không bắt buộc. Bạn có thể dùng thực thể này để quản lý tiện ích. Theo mặc định, tiện ích sẽ hiển thị dưới dạng một tiện ích ẩn khi quy trình đăng nhập được kích hoạt. Tiện ích "ẩn" sẽ xuất hiện dưới dạng một phương thức toàn trang ở trên cùng của ứng dụng.

Tuy nhiên, bạn có thể hiển thị một tiện ích nội tuyến mà người dùng phải nhấn rõ ràng để xác minh.

Để thêm một tiện ích nội tuyến, hãy chỉ định mã phần tử DOM cho đối số container của thực thể RecaptchaVerifier. Phần tử này phải tồn tại và trống, nếu không, lỗi sẽ xảy ra. Nếu không có đối số container nào được cung cấp, tiện ích sẽ được kết xuất dưới dạng "ẩn".

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

Bạn có thể tuỳ ý thay đổi kích thước và giao diện bằng cách tuỳ chỉnh các đối số size và theme như minh hoạ ở trên.

Bạn cũng có thể nghe các sự kiện, chẳng hạn như việc người dùng đã hoàn tất reCAPTCHA hay chưa, reCAPTCHA đã hết hạn hay chưa hoặc đã xảy ra lỗi hay chưa:

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

Kiểm thử

Firebase hỗ trợ kiểm thử số điện thoại cục bộ:

  1. Trên Bảng điều khiển Firebase, hãy chọn nhà cung cấp dịch vụ xác thực "Điện thoại" rồi nhấp vào trình đơn thả xuống "Số điện thoại để kiểm thử".
  2. Nhập số điện thoại mới (ví dụ: +44 7444 555666) và mã kiểm thử (ví dụ: 123456).

Nếu cung cấp số điện thoại kiểm thử cho phương thức verifyPhoneNumber hoặc signInWithPhoneNumber, thì tin nhắn SMS sẽ không thực sự được gửi. Thay vào đó, bạn có thể cung cấp mã kiểm thử trực tiếp cho PhoneAuthProvider hoặc bằng trình xử lý kết quả xác nhận của signInWithPhoneNumber.