Hướng dẫn login Facebook with Firebase

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.

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

tiếp theo là lấy App ID và App 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

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 ID và App secret

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

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 ID và App secret của chúng ta sẽ trông như này.

ở phần mình đánh số 1 và 2 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

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

rồi dán vào phần URL chuyển hướng OAuth hợp lệ và 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ả:

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