Học Firebase qua Project - Phần 2: Xử lí đăng nhập (Đăng nhập với Facebook)
TIL
609
White

Nguyễn Hoàng Minh viết ngày 11/05/2018

Học Firebase qua Project - Phần 2: Xử lí đăng nhập

Firebase Authentication là gì ?

Chắc hẳn Authentication là 1 phần không thể thiếu đối với 1 App nhắn tin. Firebase Authentication bạn cứ tưởng tượng nó là 1 bên trung gian sẽ xử lí toàn bộ các bên thứ 3 đăng nhập alt text
Ví dụ như đây là ví dụ của Firebase Authentication. Facebook, Twitter, Github hay Google sẽ xử lí qua Firebase. Thay vì phải dùng Facebook SDK, Google SDK bla..bla.. rồi xử lí từng user của từng bên bạn chỉ cần dùng Firebase. Hay nói cách khác là chỉ cần xử lí Firebase User là đủ

Bắt đầu nào

Bắt đầu với đoạn code Front-end mình đã commit

Trong đoạn code Front-end (Code của ví dụ firebase, mình chỉ lấy về vì ngại làm front-end vch @@) có đoạn

 <button hidden id="sign-out" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
                        Sign-out
                    </button>
                    <button hidden id="sign-in" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
                        <i class="material-icons">account_circle</i>Sign-in with Facebook
                    </button>

2 button này đã được set hidden (Hoặc bạn có thể bỏ hẳn đi nhưng mình khuyên cứ cho thẳng vào rồi set hidden cũng được cho lẹ ^^
Ok trước hết thì mình sẽ kiểm tra xem đã login chưa đã nếu đã login rồi thì sẽ gán ảnh và tên của User vào

Làm gì thì làm trước hết phải import Firebase trước đã

Trước hết đương nhiên bạn phải create project trên Firebase rồi. Sau đó hãy bấm "Add Firebase to your web app" để import script vào nhé
alt text
Lưu ý là copy hết rồi để trong thẻ

nhé :3
Xong :D Ở đây mình sẽ tạo thêm 1 file tên là index.js để tiện code tránh lằng nhằng code html nhé :3

Cấu hình Firebase với Facebook đã nào

Trước hết, ta sử dụng Firebase để login bằng Facebook thì ta phải tạo 1 app Facebook đã

Tạo App Facebook

Các bạn vào api.facebook.com và tạo 1 cái app đơn giản mà :3

Cấu hình Firebase

Mình sẽ vào cái console của project Firebase của mình và chọn thẻ Authentication ở cạnh. Chọn Facebook và kéo on lên :3 Điền đầy đủ AppID và App secret vô (Nếu như lần đầu nghịch bạn hãy tìm những cái này trong Settings của app)
alt text
Kéo xuống ta sẽ thấy 1 url, Firebase yêu cầu ta phải redirect trong app của chúng ta.
alt text
Hãy chọn phần đăng nhập với Facebook.
alt text
Setup ư :3 No. Bạn hãy bấm vào cài đặt nhé
alt text
Tại đây hãy add url của Firebase vào thế là hoàn tất

Ok xong cùng nghịch xem Firebase có gì hay ho nhé.

Firebase đã hỗ trợ sẵn cho ta 1 hàm để lấy nhanh thông tin của user nếu đã đăng nhập

firebase.auth().onAuthStateChanged(function(user) {
if (user) {
  // User đã đăng nhập
const name = user.displayName
} else {
  // Chưa đăng nhập => user = null
}
}

Cái gì có rồi thì ta dùng thôi. Trước hết ta sẽ kiểm tra xem user đã được đăng nhập hay chưa

//index.js
const user = firebase.auth().currentUser;
if (user) {
   console.log("Hello")
}
else {
    console.log("Opps :D Bạn chưa đăng nhập rùi")
}

Vì mình chưa bấm signin mà kể cả có bấm cũng có được cái gì đâu vì chưa xử lí sự kiện nên là cũng dễ hiểu khi nó in ra dòng dưới :D
alt text
Ok ở đây mình sẽ làm như sau. Login rồi thì hiện nút logout và ngược lại
Vì đơn giản code mình sẽ import jQuery vào

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Mình sẽ xử lí như sau

//index.js
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
          $('#sign-out')[0].hidden = false;
  } else {
    $('#sign-in')[0].hidden=false;
  }
});

alt text
Ok của mình chưa login nên hiện nút login
Bây giờ thì phải bấm vào nút Login để login nhé

Xử lí sự kiện click nút login

Trước hết xem lại docs đã mình sẽ bắt sự kiện onclick cho cái nút login
Ok quay lại với file index.js nào. Hãy chắc chắn là bạn đã đọc xong docs rồi nhé
Ta có như sau

firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
        $('#sign-out')[0].hidden = false;
    } else {
        $('#sign-in')[0].hidden = false;
        //Mình sẽ viết trong window.onload để chắc chắn đã có cái button đó
        $('#sign-in').on('click', () => {
            var provider = new firebase.auth.FacebookAuthProvider();
            provider.setCustomParameters({
                'display': 'popup' //Login dưới dạng popup
            });
            firebase.auth().signInWithPopup(provider).then(function (result) {
                var token = result.credential.accessToken; //Token facebook của user
                var user = result.user; //Thông tin của user
                console.log(user)
            }).catch(function (error) {
                var errorCode = error.code;
                var errorMessage = error.message;
                var email = error.email;
                var credential = error.credential;
            });
        })
    }
});

alt text
Có vẻ như đã thành côngalt text
Như ta thấy User chỉ ghi ra những cái cơ bản như: Avatar, tên, email và vài cái linh tinh khác.
Nó sẽ trả về token giúp bạn có thể gọi lên graph api của facebook và get về các thông tin khác cần thiết và save lên db của nó

Login xong rồi thế còn logout thì sao?

Okay, login thì phải logout chứ nhỉ
Firebase cũng có hàm logout luôn. Ở đây mình sẽ bắt sự kiện onclick cho nút logout như sau

$('#sign-out')[0].hidden = false;
$('#sign-out').on('click',()=>{
    firebase.auth().signOut().then(function () {
           alert("Logout thành công")
    }).catch(function (error) {
           alert("Đã có lỗi xảy ra trong quá trình logout. Xin thử lại")
     });
})

Hmm nhìn thì có vẻ xong rồi đấy?

Có 1 lỗi xảy ra là nếu bạn bấm logout rồi login thì nó sẽ hiện cả 2 button :D Và xử lí đơn giản thôi. Trong file js bạn chỉ cần xử lí nếu login thì hide nút này show nút kia thôi

firebase.auth().signOut().then(function () {
                    alert("Logout thành công")
                    $('#sign-out')[0].hidden = true;
                }).catch(function (error) {
                    alert("Đã có lỗi xảy ra trong quá trình logout. Xin thử lại")
                });
        })
...
 firebase.auth().signInWithPopup(provider).then(function (result) {
                var token = result.credential.accessToken; //Token facebook của user
                var user = result.user; //Thông tin của user
                $('#sign-in')[0].hidden = true;
            })

Hmm hiện tại là có vẻ xong login rồi đó. Ở bài tiếp theo ta sẽ xử lí về quyền và nhắn tin nhé các bạn :D
Các bạn có gì hãy góp ý cho mình để bài viết có chất lượng hơn nhé !

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nguyễn Hoàng Minh

6 bài viết.
23 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
24 8
Đôi điều tâm sự Hmm đã bao giờ bạn bị nhờ là: "Mày ơi mấy hôm nữa câu lạc bộ làm cái ì ven, mày làm cái form nào đăng kí cái là chúng nó có vé/mail...
Nguyễn Hoàng Minh viết 2 tháng trước
24 8
White
6 2
Set custom domain free cho Firebase hosting Như tiêu đề, em vừa tìm ra cách set được Domain của Freenom cho Firebase Hosting để đỡ phải vất vả nhậ...
Nguyễn Hoàng Minh viết 4 tháng trước
6 2
White
2 0
Học Firebase qua Project Phần 1: Giới thiệu và tạo giao diện cho ứng dụng nhắn tin Như các bạn đã biết Firebase hiện tại là nền tảng khá phố biến ...
Nguyễn Hoàng Minh viết 3 tháng trước
2 0
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 2 tháng trước
0 2
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
19 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 1 năm trước
1 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
23 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!