CLASSFUNC BLOG
We Share Our Knowledge
Hướng dẫn login Facebook with Firebase
Thanh Nguyễn
12 Th10 2020 05:42

Tiếp tục phần login với Firebase hôm nay mình hướng dẫn các bạn login bằng Facebook nhé.!

Cài đặt Firebase:

Như phần cài đặt với Google trong Authentication chọn 'Sign-in method' tab và hãy chắc chắn bạn kích hoạt Facebook trong mục provider.

alt

Bây giờ, khi Enabled lên chúng ta sẽ có giao diện như thế này .

alt

tiếp theo là lấy App IDApp secret

các bạn truy cập https://developers.facebook.com/ rồi đăng nhập vào nó..! Truy cập vào Ứng dụng của tôi

alt

lúc này nếu chưa có tài khoản bạn hãy tạo tài khoản nhé. Tiếp theo trong ứng dụng của tôi bạn tạo mới ứng dụng để lấy App IDApp secret

alt

Sau khi tạo xong các bạn chọn thiết lập Đăng nhập bằng Facebook như hình nhé.

alt

tiếp theo các bạn chuyển tới Bảng điều khiển trong phần cài đặt bạn chọn Thông tin cơ bản lúc này App IDApp secret của chúng ta sẽ trông như này.

alt

ở phần mình đánh số 12 các bạn copy rồi quay trờ lại phần cài đặt Firebase dán nó vào và nhấn Save

alt

sau đó trong phần mình khoanh màu vàng bạn copy đia chỉ này rồi quay lại FACEBOOK for Developers trong Bảng điều khiển bạ chọn Đăng nhập bằng Facebook => Cài đăt

alt

rồi dán vào phần URL chuyển hướng OAuth hợp lệLưu thay đổi

Như vậy bạn đã xong phần Cài đặt

Bây giờ tới phần code

Cũng như login Google thì mình sẽ để button login facebook firebase bạn có thể tham khảo thêm tại đây

Và đây là hàm onloginFacebook nhé .

 const onloginFacebook = async () => {
    try {
      //cài đặt provider đăng nhập facebook
      const facebookProvider = new firebase.auth.FacebookAuthProvider();

      auth.signInWithPopup(facebookProvider).then(function(result) {
        const user = result.user;
        console.log('User>>Goole>>>>', user);

        // lưu thông tin user vào localStorage
        localStorage.setItem('user', JSON.stringify(user));

        //lưu thông tin user vào global
        rtn.setGlobal({ user: JSON.parse(JSON.stringify(user)) });

      }).catch(function(error) {
        console.error('Error: hande error here>>>', error.code);
      });
    } catch (e) {
      console.log(e);
    }
  };

và đây là kết quả:

alt

chúc các bạn thành công .!

Link tham khảo thêm: https://firebase.google.com/docs/auth/web/facebook-login

Link Facebook for Developers : https://developers.facebook.com/

Link tham khảo login Google: https://blog.classfunc.com/post/Huong-dan-login-Google-with-Firebase