Nội dung bài viết
Video học lập trình mỗi ngày
Hầu hết bất kỳ ứng dụng trên app hoặc web cũng xác thực người dùng khi muốn sử dụng những chức năng trong ứng dụng. Trong thời buổi hiện nay, ngoài việc tự cho người dùng tạo tài khoản trên server của mình nghĩa là cho user đăng ký trực tiếp trên trang của mình, thì còn có việc hỗ trợ thêm việc sign up / sign in qua các nhà cung cấp authentication khác, chẳng hạn như Google, Facebook hoặc Twitter.
Việc xây dựng hệ thống login xác thực không phải là khó, nhưng... Nhưng vấn đề ở đây chình là an toàn và bảo mật thông tin người dùng như thế nào. Bất kể lý do nào cũng không thể nào sử sai cho bạn được. Với nhưng công ty lớn thì việc bảo mật thông tin của User thì sẽ được triển khai với quy mô lớn và tính kiên trì đầu tư của họ.
Firebase là gì?
Firebase là gì? Firebase là một Backend-as-a-Service - BaaS. Firebase theo nghĩa rộng là nền tảng phát triển ứng dụng trên thiết bị di động và web. Firebase giải phóng các developer để tập trung tạo ra trải nghiệm cho người dùng sử dụng sản phẩm một cách tuyệt vời. Bạn không cần quản lý máy chủ. Bạn không cần viết API. Firebase là máy chủ, API và kho dữ liệu của bạn, tất cả đều được viết một cách tổng quát đến mức bạn có thể sửa đổi nó cho phù hợp với hầu hết nhu cầu. Vâng, đôi khi bạn sẽ cần phải sử dụng các dịch vụ khác của Google Cloud cho các ứng dụng nâng cao của mình.
Chính vì vậy với Firebase team at Google cung cấp cho chúng ta một giải pháp (solution) rất dễ dàng và an toàn, đó chính là Firebase Authentication.
Để bắt đầu bài hướng dẫn hôm nay, thì việc đâu tiên các bạn cần một Firebase project, và liên kết project đó với ứng dụng Website của bạn. Nhưng trước tiên bạn phải biết Cách tạo firebase project với dịch vụ cung cấp của Google.
Firebase Authentication là gì?
Hầu hết các ứng dụng hay một website đều cần biết danh tính của người dùng. Biết danh tính của người dùng cho phép ứng dụng lưu dữ liệu người dùng trên đám mây một cách an toàn và cung cấp trải nghiệm được cá nhân hóa giống nhau trên tất cả các thiết bị của người dùng.
Firebase Authentication hay còn gọi là xác thực firebase cung cấp dịch vụ phụ trợ cho developers, SDK dễ sử dụng và thư viện UI được tạo sẵn để xác thực người dùng với ứng dụng của bạn. Nó hỗ trợ xác thực bằng mật khẩu, số điện thoại, nhà cung cấp nhận dạng liên kết phổ biến như Google, Facebook và Twitter, v.v. Xác thực Firebase tích hợp chặt chẽ với các dịch vụ Firebase khác và nó thúc đẩy các tiêu chuẩn công nghiệp như OAuth 2.0 và OpenID Connect, do đó có thể dễ dàng tích hợp với phụ trợ tùy chỉnh của bạn.
Sau khi bạn đã tạo xong một project sử dụng dịch vụ firebase app thì bạn có thể làm những hướng dẫn dưới đây để "Your Firebase app verification code is là gì"
### 1 - Enable dịch vụ của firebase cho phép login qua những phương thức nào
Như hình dưới đây, ban phải Enable tất cả các dịch vụ mà firebase cung cấp. Ở đây tôi mở 3 phần mà tôi cần. Authentication -> Sing-in Method
Khi Enable Google và FB thì lần lượt như các hình dưới đây. Enable Google.
Enable Facebook
Như hình ảnh này . Điền đúng nhé các bạn.
Như vậy các bước trên đã xong việc cấu hình cho firebase và gg + fb. Giờ thì tiến hành code như thế nào:
Đăng nhập và xác thực firebase
### index.html
<div class="form-group text-center"> <button class="btn btn-block btn-social btn-google" id="btnGoogle" type="button"> <span class="fa fa-google"></span>Login with Google</button> </div> <div class="form-group text-center"> <button class="btn btn-block btn-social btn-facebook" id="btnFacebook" type="button"> <span class="fa fa-facebook"></span>Login with Facebook</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
### javascript
(function() {
console.log('Start file login with firebase');
// Initialize Firebase
var config = {
apiKey: "xxxxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "xxxx.firebaseio.com",
projectId: "xxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
var database = firebase.database();
//Google singin provider
var ggProvider = new firebase.auth.GoogleAuthProvider();
//Facebook singin provider
var fbProvider = new firebase.auth.FacebookAuthProvider();
//Login in variables
const btnGoogle = document.getElementById('btnGoogle');
const btnFaceBook = document.getElementById('btnFacebook');
//Sing in with Google
btnGoogle.addEventListener('click', e => {
firebase.auth().signInWithPopup(ggProvider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
console.log('User>>Goole>>>>', user);
userId = user.uid;
}).catch(function(error) {
console.error('Error: hande error here>>>', error.code)
})
}, false)
//Sing in with Facebook
btnFaceBook.addEventListener('click', e => {
firebase.auth().signInWithPopup(fbProvider).then(function(result) {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
console.log('User>>Facebook>', user);
// ...
userId = user.uid;
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
console.error('Error: hande error here>Facebook>>', error.code)
});
}, false)
//jquery
}())
Vậy là xong, như vậy là các bạn có thể lấy được info của User khi user login qua fb or gg. Bạn nào chưa làm được khi có thể pm mình nhé.
