Ngày nay, bảo mật tài khoản người dùng là ưu tiên hàng đầu. Xác thực SMS Firebase cung cấp giải pháp miễn phí và hiệu quả để xác minh danh tính người dùng thông qua tin nhắn SMS. Bài viết này sẽ hướng dẫn bạn cách tích hợp xác thực SMS Firebase vào ứng dụng của mình, giúp tăng cường bảo mật và nâng cao trải nghiệm người dùng.
Bạn muốn tăng cường bảo mật cho ứng dụng của mình? Xác thực số điện thoại người dùng là một bước quan trọng. Thay vì tự xây dựng hệ thống xác minh SMS phức tạp và tốn kém, bạn có thể sử dụng dịch vụ Xác thực điện thoại Firebase. Firebase cho phép bạn đăng nhập vào ứng dụng của mình bằng cách gửi mã xác minh đến điện thoại của người dùng qua SMS, hoàn toàn MIỄN PHÍ *.
Mục Lục
Firebase Là Gì?
Firebase là một nền tảng phát triển ứng dụng mạnh mẽ của Google, cung cấp nhiều công cụ và dịch vụ hữu ích, bao gồm cả xác thực người dùng. Nếu bạn chưa quen với Firebase, hãy tham khảo bài viết “Hướng Dẫn Đăng Nhập Bằng Tài Khoản Google, Facebook Sử Dụng Firebase Trên Website” để biết cách tạo tài khoản và cấu hình xác thực.
Giao diện trang chủ Firebase
Alt: Logo Firebase: Nền tảng phát triển ứng dụng của Google.
“Your Firebase App Verification Code Is” Nghĩa Là Gì?
Khi người dùng đăng nhập thành công vào ứng dụng của bạn (thông qua cơ chế bạn tự xây dựng hoặc sử dụng dịch vụ của bên thứ ba), Firebase sẽ gửi một mã xác minh (verification code) qua SMS hoặc Email, tùy thuộc vào cấu hình của bạn. Người dùng sẽ sử dụng mã này để xác thực, chứng minh rằng họ là chủ sở hữu tài khoản và ngăn chặn truy cập trái phép.
Lưu ý: Mã xác minh không phải là mật khẩu để đăng nhập, mà là một lớp bảo vệ bổ sung để xác thực danh tính sau khi đăng nhập thành công.
Mã Xác Thực SMS Firebase
Dưới đây là một đoạn code mẫu về “firebase sms verification code” để bạn tham khảo. Bạn có thể xem bản demo hoạt động ở cuối bài viết. Để hiểu rõ hơn, bạn cần nắm vững kiến thức về Firebase. Tìm hiểu thêm về Firebase trong bài viết: “Firebase là gì? Tips and tricks firebase.”
Để giúp bạn dễ dàng thực hành, chúng tôi chia code thành 3 phần: HTML, tích hợp Firebase và cấu hình. Bạn có thể copy/paste code này để thử nghiệm trên localhost.
1 – HTML
<!DOCTYPE html>
<html>
<head>
<title>Firebase Phone Number Auth Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.0.0/firebaseui.css" />
</head>
<body>
Loading...
You are signed out.
</body>
</html>Ở phần HTML này, hãy chú ý thêm thư viện firebaseui. FirebaseUI giúp bạn tạo giao diện người dùng (UI) một cách dễ dàng và nhanh chóng. FirebaseUI hỗ trợ đầy đủ các trình duyệt hiện đại. Đăng nhập bằng các nhà cung cấp liên kết (Google, Facebook, Twitter, GitHub, Microsoft, Yahoo, OIDC, SAML) cũng được hỗ trợ trong môi trường Cordova/Ionic.
2 – Tích Hợp Firebase và FirebaseUI
(function() {
console.log('connect to firebase');
// Initialize Firebase
var firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var uiConfig = {
callbacks: {
signInSuccessWithAuthResult: function(user, credential, redirectUrl) {
handleSignedInUser(user);
return false;
}
},
signInOptions: [
firebase.auth.PhoneAuthProvider.PROVIDER_ID
],
tosUrl: 'https://www.google.com',
privacyPolicyUrl: function() {
console.log('https://www.google.com');
}
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
var handleSignedInUser = function(user) {
document.getElementById('user-signed-in').style.display = 'block';
document.getElementById('user-signed-out').style.display = 'none';
document.getElementById('name').textContent = user.displayName;
document.getElementById('email').textContent = user.email;
document.getElementById('phone').textContent = user.phoneNumber;
if (user.photoURL) {
document.getElementById('photo').src = user.photoURL;
document.getElementById('photo').style.display = 'block';
} else {
document.getElementById('photo').style.display = 'none';
}
};
var handleSignedOutUser = function() {
document.getElementById('user-signed-in').style.display = 'none';
document.getElementById('user-signed-out').style.display = 'block';
ui.start('#firebaseui-container', uiConfig);
};
firebase.auth().onAuthStateChanged(function(user) {
console.log('user>>>>', user)
document.getElementById('loading').style.display = 'none';
document.getElementById('loaded').style.display = 'block';
user ? handleSignedInUser(user) : handleSignedOutUser();
});
var deleteAccount = function() {
firebase.auth().currentUser.delete().catch(function(error) {
if (error.code === 'auth/requires-recent-login') {
// The user’s credential is too old. She needs to sign in again.
firebase.auth().signOut().then(function() {
// The timeout allows the message to be displayed after the UI has
// changed to the signed out state.
setTimeout(function() {
alert('Please sign in again to delete your account.');
}, 1);
});
}
});
};
var initApp = function() {
document.getElementById('sign-out').addEventListener('click', function() {
firebase.auth().signOut();
});
document.getElementById('delete-account').addEventListener('click', function() {
deleteAccount();
});
};
document.addEventListener('load', initApp);
}());Giải Thích Chi Tiết
-
firebaseConfig: Chứa các thông số cấu hình cần thiết để kết nối website của bạn với Firebase. Bạn có thể lấy các thông số này từ trang project của bạn trên Firebase console.var firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", databaseURL: "YOUR_DATABASE_URL", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); -
uiConfig: Định cấu hình FirebaseUI để sử dụng trình tạo mã (code generator).var uiConfig = { callbacks: { signInSuccessWithAuthResult: function(user, credential, redirectUrl) { handleSignedInUser(user); return false; } }, signInOptions: [ firebase.auth.PhoneAuthProvider.PROVIDER_ID ], tosUrl: 'https://www.google.com', privacyPolicyUrl: function() { console.log('https://www.google.com'); } };Thuộc tính
signInOptionscho phép bạn chọn các phương thức xác thực. Trong ví dụ này, chúng ta sử dụngfirebase.auth.PhoneAuthProvider.PROVIDER_IDđể kích hoạt xác thực bằng số điện thoại.
Kết Luận
Xác thực SMS Firebase là một giải pháp tuyệt vời để tăng cường bảo mật cho ứng dụng của bạn một cách dễ dàng và miễn phí. Bằng cách làm theo hướng dẫn trong bài viết này, bạn có thể tích hợp xác thực SMS vào ứng dụng của mình và mang lại trải nghiệm an toàn hơn cho người dùng.
Bạn có thể xem demo tại đây: TEST DEMO (Thay thế bằng link demo thực tế của bạn).