尝试使用来自 Firebase 的 FacebookAuthProvider 进行连接，但出现错误。反应本机

Question

我正在尝试通过 Facebook 身份验证和 Firebase SDK 与 createContext 连接新用户，但我得到：new FacebookAuthProvider() 本机 Firebase SDK 不支持。

我在这里使用的是 firebase 文档：https://firebase.google.com/docs/auth/web/facebook-login 在这里：https://github.com/firebase/snippets-web/blob/1452a031ee1b7904a361b23391af8533237eab82/auth/facebook.js#L9-L9

我的代码：

import React, {createContext, useState} from 'react';

import auth from '@react-native-firebase/auth';
import firebase from '@react-native-firebase/app';

export const AuthContext = createContext({});

export const AuthProvider = ({children}) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        login: async (email, password) => {
          try {
            await auth().signInWithEmailAndPassword(email, password);
          } catch (e) {
            return handleError(e);
          }
        },
        register: async (email, password) => {
          try {
            await auth().createUserWithEmailAndPassword(email, password);
          } catch (e) {
            return handleError(e);
          }
        },
        logout: async () => {
          try {
            await auth().signOut();
          } catch (e) {
            return handleError(e);
          }
        },
        loginWithFacebook: async (processRequest) => {
          try {
            let provider = new firebase.auth.FacebookAuthProvider();
            provider.addScope('user_birthday');
            provider.setCustomParameters({
              display: 'popup',
            });
            await firebase.auth().signInWithPopup(provider);
          } catch (e) {
            console.log(e);
          }
        },
      }}>
      {children}
    </AuthContext.Provider>
  );
};

如果有人对将 facebook 连接与 firebase SDK 和 useContext 结合使用有其他想法，我也可以。

Answer 1

我以这种形式使用，将firebase和facebook连接在一起。 :)

import auth from '@react-native-firebase/auth';
import { AccessToken, LoginManager } from 'react-native-fbsdk';

async function (dispatch, getState) {
        try {
            if (Platform.OS === 'android') {
                LoginManager.setLoginBehavior('web_only');
            }
            const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);

            if (result.isCancelled) {
                throw 'User cancelled the login process';
            }

            const data = await AccessToken.getCurrentAccessToken();

            if (!data) {
                throw 'Something went wrong obtaining access token';
            }

            const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);

            return auth()
                .signInWithCredential(facebookCredential)
                .then(async (result) => {})
                .catch((error) => {
                    console.log(error);
                });
        } catch (error) {
            console.log(error);
        }
    };

Answer 2

好的，正如文档所说 here :

All Authentication features, except phone authentication and popup/redirect OAuth operations, are supported.

解决方案是here

我的 AuthProvider 现在具有上述文档中的 onFaceBookButtonPress 功能：

import React, {createContext, useState} from 'react';

import auth from '@react-native-firebase/auth';
import {LoginManager, AccessToken} from 'react-native-fbsdk';

export const AuthContext = createContext({});

export const AuthProvider = ({children}) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        login: async (email, password) => {
          try {
            await auth().signInWithEmailAndPassword(email, password);
          } catch (e) {
            return handleError(e);
          }
        },
        register: async (email, password) => {
          try {
            await auth().createUserWithEmailAndPassword(email, password);
          } catch (e) {
            return handleError(e);
          }
        },
        logout: async () => {
          try {
            await auth().signOut();
          } catch (e) {
            return handleError(e);
          }
        },
        loginWithFacebook: async (processRequest) => {
          try {
            await onFacebookButtonPress();
          } catch (e) {
            throw new Error(e);
          }
        },
      }}>
      {children}
    </AuthContext.Provider>
  );

  async function onFacebookButtonPress() {
    // Attempt login with permissions
    const result = await LoginManager.logInWithPermissions([
      'public_profile',
      'email',
    ]);

    if (result.isCancelled) {
      throw 'User cancelled the login process';
    }

    // Once signed in, get the users AccesToken
    const data = await AccessToken.getCurrentAccessToken();

    if (!data) {
      throw 'Something went wrong obtaining access token';
    }

    // Create a Firebase credential with the AccessToken
    const facebookCredential = auth.FacebookAuthProvider.credential(
      data.accessToken,
    );

    // Sign-in the user with the credential
    return auth().signInWithCredential(facebookCredential);
  }

我这样称呼它：

import {AuthContext} from '../../../navigation/auth/AuthProvider';

const {loginWithFacebook} = useContext(AuthContext);

<Button onPress={loginWithFacebook}

尝试使用来自 Firebase 的 FacebookAuthProvider 进行连接，但出现错误。反应本机

Trying to connect using FacebookAuthProvider from Firebase but get error. react native

javascript

facebook-authentication

firebase

react-native

use-context