[Firebase] - Hướng dẫn login bằng tài khoản Google, FaceBook sử dụng Firebase trên Website.

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ọ.

Thế nhưng vậy đối với những single developer thì sao, với những quy mô nhỏ thì sao??? 

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.

Để tạo một Firebase project thì các bạn có thể vào đây xem : Cách tạo firebase project

1 - 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. Và có một số lưu ý quan trọng.

Enable Google.

Enable Facebook 

Chú ý: link OAuth sẽ được bên app fb xác nhận.

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: 

1 - 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>


2 - js

(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é.

ở bài tiếp theo mình sẽ giới thiệu cách upload file lên FireStore và cách down xuống như thế nào nếu các bạn ủng hộ.