Học Firebase qua Project - Phần 2.2: Vẫn về xử lí đăng nhập
TIL
611
White

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

Học Firebase qua Project - Phần 2: Vẫn về xử lí đăng nhập (Phân quyền)

Gọi là phân quyền thì không hẳn lắm. Những thứ gì ta cần làm chỉ là khi login thì cho nhắn tin thôi còn không thì thôi.
Vẫn theo flow cũ. Khi tồn tại user.
Để đơn giản hóa code mình sẽ chia code thành các function con nhé
Ví dụ: function Login() sẽ chứa tất cả cái gì liên quan đến Login tự auth đến chỉnh các nút ra sao
Ở đây ta sẽ bắt đầu với function Login() trước

Function Login()

Okay, trước hết là khi bấm vào nút login thì sẽ là Login rồi, ta sẽ có function Login như sau

function Login(){
       var provider = new firebase.auth.FacebookAuthProvider();
       provider.setCustomParameters({
             'display': 'popup' //Login dưới dạng popup
        });
       firebase.auth().signInWithPopup(provider) //Ở code bài hôm trước mình đã dùng .then() để lấy info user nhưng ở đây mình sẽ chỉ gọi signInWithPopup để sign mà thôi
}

Function Logout()

và đương nhiên cũng cần hàm logout. Logout thì đơn giản hơn nhiều chỉ cần gọi hàm là ok

function Logout(){
    firebase.auth().signOut();
}

Okay xong 2 hàm này rồi. Ta sẽ bắt sự kiện khi click vào 2 button này. Mình sẽ dùng window.onload để chắc chắn 2 nút đã được load

window.onload=()=>{
$('#sign-in').on('click',()=>{
    Login()
})
$('#sign-out').on('click', () => {
    Logout()
})
}

Một chút về onAuthStateChanged

Ta có hàm onAuthStateChanged để bắt sự kiện mỗi khi có cái gì thay đổi về Auth nên ta sẽ sử dụng để biết khi nào có user mới.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

Ở đây nếu chưa có user thì mình sẽ hiện nút Login và ngược lại

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        $('#sign-out').removeAttr('hidden');

    } else {
        //Nếu chưa có user thì phải hiện nút :D
        $('#sign-in').removeAttr('hidden');
    }
})

Có vẻ như xong rồi, tôi sẽ thử test :D
Opps lại có 1 lỗi như hôm trước là hiện lên 2 button nên mình sẽ set khi bấm nút này thì ẩn luôn nút đó như sau

$('#sign-in').on('click',()=>{
    Login()
    $('#sign-in').attr('hidden', true);

})
$('#sign-out').on('click', () => {
    Logout()
    $('#sign-in').attr('hidden',true);
})

Như thế này code sẽ ngắn gọn hơn nhiều :D Okay ta lại quay lại cùng mobile nhé. Hẹn gặp các bạn vào tối nay

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 3 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á!