React-native fbsdk 获取名称和电子邮件

Posted

技术标签:

【中文标题】React-native fbsdk 获取名称和电子邮件【英文标题】:React-native fbsdk get name and email 【发布时间】:2018-05-01 21:34:28 【问题描述】:

我正在使用 react-native-fbsdk。我想在用户注册应用程序时向用户显示用户名和电子邮件,以便为应用程序创建配置文件,但未显示任何数据。如何获取这些数据以及如何在不同的屏幕上显示它。

这是我的代码

import FBSDK from 'react-native-fbsdk'
import  LoginButton,AccessToken,GraphRequest,GraphRequestManager from 'react-native-fbsdk';


const 
  LoginManager,
 = FBSDK;

<LoginButton
        readPermissions=['public_profile']
          onLoginFinished=
            (error, result) => 
              if (error) 
                alert("login has error: " + result.error);
               else if (result.isCancelled) 
                alert("login is cancelled.");
               else 
                AccessToken.getCurrentAccessToken().then(
                  (data) => 
                    const infoRequest = new GraphRequest(
                      '/me?fields=name,picture',
                      null,
                      this._responseInfoCallback
                    );
                    // Start the graph request.
                    new GraphRequestManager().addRequest(infoRequest).start();
                  
                )
              
            
          
          onLogoutFinished=() => alert("logout.")/>
      </View>
    );
  
  _responseInfoCallback = (error, result) => 
    if (error) 
      alert('Error fetching data: ' + error.toString());
     else 
      alert('Result Name: ' + result.name);
    
  

感谢朋友

【问题讨论】:

【参考方案1】:

我在使用 firebase 时检索了 Facebook 登录信息。

    导入此文件:

    从“react-native-firebase”导入firebase; 从“react-native-fbsdk”导入 AccessToken, LoginManager ;

    Firebase 登录代码在我单击按钮时起作用:

    export const fbLogin = () =>

    LoginManager.logInWithReadPermissions(["public_profile", "email"])
      .then(result => 
        if (result.isCancelled) 
          console.log("Login was cancelled");
        
        return AccessToken.getCurrentAccessToken();
      )
      .then(data => 
        const credential = firebase.auth.FacebookAuthProvider.credential(
          data.accessToken
        );
       firebase
        .auth()
        .signInWithCredential(credential)
        .then(result => 
         Toast.show(
          text: "Sucessfully",
          position: "top"
        );
       console.log("Successfully Login", result);
     )
      .catch(error => 
       console.log("Failed", error);
         );
      )
      .catch(err => 
        console.log("fail", err);
      ); 
    

    ;

我检索我的 Facebook 登录数据

 console.log("Successfully Login", result);

结果包含用户名、电子邮件、图片和 ..ect 凭据

【讨论】:

【参考方案2】:

如果你不想使用 firebase,

const infoRequest = new GraphRequest(
        '/me?fields=name,email,picture.type(large)',
        null,
        this._responseInfoCallback
      );
      new GraphRequestManager().addRequest(infoRequest).start();


_responseInfoCallback = (error, result) => 
    if (error) 
      alert('Error fetching data: ' + error.toString());
     else 
      this.setState( userName: result.name, userEmail: result.email ,userPic:result.picture.data.url);
              AsyncStorage.setItem("UserName",this.state.userName);
                    AsyncStorage.setItem("Email", this.state.userEmail);
                    AsyncStorage.setItem("UserPic", this.state.userPic);

      //  SharedPreferences.setItem("UserName", this.state.userName);
      //       SharedPreferences.setItem("Email", this.state.userEmail);
      //       SharedPreferences.setItem("UserPic", this.state.userPic);
      console.log("Picture"+ this.state.userPic + "Name" + this.state.userName + "Email" + this.state.userEmail);
    
  

【讨论】:

以上是关于React-native fbsdk 获取名称和电子邮件的主要内容,如果未能解决你的问题,请参考以下文章

为 iOS React-Native 项目设置 Fbsdk 框架

React-Native FBSDK LoginButton 仅在 iOS 中崩溃应用程序

react-native run-android失败,出现“Task:app:compileDebugJavaWithJavac FAILED”安装后的react-native-fbsdk

如何找到与我的 react native 版本兼容的 fbsdk 版本?

React-Native 无法构建项目

FB SDK 错误:登录失败(react-native)