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 làm trình xác thực. Hệ thống sẽ gửi một tin nhắn SMS đến người dùng (sử dụng số điện thoại đã cung cấp) chứa một mã duy nhất. Sau khi mã được uỷ quyền, người dùng có thể đăng nhập vào Firebase.
Số điện thoại mà người dùng cuối cung cấp để xác thực sẽ được Google gửi và lưu trữ để cải thiện khả năng ngăn chặn nội dung rác và hành vi sai trái 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 họ có sự đồng ý thích hợp của người dùng cuối trước khi sử dụng dịch vụ đăng nhập bằng số điện thoại của Firebase Authentication.
Tính năng Xác thực qua điện thoại của Firebase không được hỗ trợ ở một số quốc gia. Vui lòng xem Câu hỏi thường gặp của họ để 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:
- Bật phương thức Đăng nhập bằng điện thoại trong bảng điều khiển của Firebase.
- Android: Nếu bạn chưa đặt hàm băm SHA-1 của ứng dụng trong bảng điều khiển Firebase, hãy làm như vậy. Xem phần Xác thực ứng dụng để biết thông tin về cách tìm hàm băm SHA-1 của ứng dụng.
- iOS: Trong Xcode, hãy bật thông báo đẩy cho dự án của bạn và đảm bảo rằng khoá xác thực APNs của bạn được định cấu hình bằng Giải pháp gửi thông báo qua đám mây của Firebase (FCM). Ngoài ra, bạn phải bật chế độ nền cho thông báo từ xa. Để xem nội dung giải thích chi tiết về bước này, hãy xem tài liệu về Xác thực qua điện thoại trên iOS của Firebase.
- Web: Đảm bảo rằng bạn đã thêm miền ứng dụng của mình vào bảng điều khiển Firebase, trong phần Miền chuyển hướng OAuth.
Lưu ý: Tính năng đăng nhập bằng số điện thoại chỉ dùng được trên thiết bị thực và web. Để kiểm thử quy trình xác thực trên trình mô phỏng thiết bị, vui lòng xem phần Kiểm thử.
Cách sử dụng
SDK Xác thực Firebase cho Flutter cung cấp hai cách riêng biệt để người dùng đăng nhập bằng số điện thoại. Các nền tảng gốc (ví dụ: Android và iOS) cung cấp chức năng xác thực số điện thoại khác với web, do đó, mỗi nền tảng có hai phương thức riêng biệt:
- 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, bạn phải xác minh số điện thoại của người dùng, 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 một PhoneAuthCredential.
Trước tiên, bạn phải nhắc người dùng cung cấp số điện thoại. 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 sẽ xác định cách bạn cập nhật giao diện người dùng của ứng dụng:
- verificationCompleted: Xử lý tự động mã SMS trên thiết bị Android.
- 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 việc vượt quá hạn mức SMS.
- 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ã.
- codeAutoRetrievalTimeout: Xử lý thời gian chờ khi không xử lý được mã SMS tự động.
verificationCompleted
Trình xử lý này sẽ chỉ được gọi trên các thiết bị Android hỗ trợ tính năng tự động phân giải mã SMS.
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 PhoneAuthCredential này để đăng nhập bằng hoặc liên kết với 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 nếu hạn mức SMS cho dự án đã vượt quá, 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 được kích hoạt, bạn nên cập nhật giao diện người dùng của ứng dụng để nhắc người dùng nhập mã SMS mà họ đang chờ.
Sau khi nhập mã SMS, bạn có thể kết hợp mã xác minh với mã SMS để tạo một 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 với mã thông báo gửi lại cho đối số forceResendingToken.
Nếu thành công, thông báo qua SMS sẽ được gửi lại.
codeAutoRetrievalTimeout
Trên các thiết bị Android hỗ trợ tính năng tự động phân giải mã SMS, trình xử lý này sẽ được gọi nếu thiết bị chưa tự động phân giải một tin nhắn SMS trong một khung 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 phân giải bất kỳ thư đến nào.
Theo mặc định, thiết bị sẽ chờ 30 giây, tuy nhiên, bạn có thể tuỳ chỉnh 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 một chiếc đ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 bảo mật và ngăn chặn nội dung rác, người dùng được yêu cầu chứng minh họ là con người bằng cách hoàn tất tiện ích Google reCAPTCHA. Sau khi xác nhận, hệ thống sẽ gửi mã xác minh qua SMS.
Theo mặc định, SDK Xác thực Firebase cho Flutter sẽ quản lý tiện ích reCAPTCHA ngay từ đầu. Tuy nhiên, bạn có thể 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');
Trước tiên, 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 quy trình kiểm thử trước khi hệ thống gửi mã SMS. 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 đã được phân giải:
UserCredential userCredential = await confirmationResult.confirm('123456');
Giống như các quy trình đăng nhập khác, một lần đă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 toàn bộ ứng dụng.
Cấu hình reCAPTCHA
Tiện ích reCAPTCHA là một luồng được quản lý toàn diện, giúp bảo mật cho ứ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 có thể được dùng để quản lý tiện ích. Theo mặc định, tiện ích sẽ hiển thị dưới dạng tiện ích không hiển thị khi quy trình đăng nhập được kích hoạt.
Một tiện ích "vô hình" sẽ xuất hiện dưới dạng một cửa sổ toàn trang ở đầu ứ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 để tự xác minh.
Để thêm một tiện ích cùng dòng, hãy chỉ định mã nhận dạng 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 bạn không cung cấp đối số container, tiện ích sẽ được hiển thị là "vô hình".
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ư liệu người dùng đã hoàn tất reCAPTCHA hay chưa, reCAPTCHA đã hết hạn hay đã xảy ra lỗi:
RecaptchaVerifier(
onSuccess: () => print('reCAPTCHA Completed!'),
onError: (FirebaseAuthException error) => print(error),
onExpired: () => print('reCAPTCHA Expired!'),
);
Thử nghiệm
Firebase hỗ trợ kiểm thử số điện thoại cục bộ:
- Trên Bảng điều khiển Firebase, hãy chọn nhà cung cấp 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 để thử nghiệm".
- Nhập số điện thoại mới (ví dụ:
+44 7444 555666) và mã thử nghiệm (ví dụ:123456).
Nếu bạn cung cấp số điện thoại thử nghiệm cho phương thức verifyPhoneNumber hoặc signInWithPhoneNumber, thì hệ thống sẽ không gửi tin nhắn SMS. Thay vào đó, bạn có thể cung cấp mã kiểm thử trực tiếp cho PhoneAuthProvider hoặc với trình xử lý kết quả xác nhận của signInWithPhoneNumber.