Tutorial App Delivery – React Native + API – Part 7: Login Facebook

React Native FBSDK

https://github.com/facebook/react-native-fbsdk

Facebook Developers

Create app in facebook developers

https://developers.facebook.com/

android/app/src/main/AndroidManifest.xml

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>

android/app/src/main/res/values/strings.xml

    <string name="facebook_app_id">id_facebook</string>
    <string name="fb_login_protocol_scheme">fb[id_facebook]</string>

Hash

keytool -exportcert -alias androiddebugkey -keystore debug.keystore | openssl sha1 -binary | openssl base64

Run

sudo react-native start --reset-cache
sudo react-native run-android

React native Login

import { AccessToken, LoginManager } from 'react-native-fbsdk';
  constructor(props) {
     super(props);
     this.state = {
       id_facebook:null,
       picture:null,
       name:null,
       email:null,
       token:null
     };
  }

function onPress from Button

_AuthFB()
  {
    const dhis = this
    // Attempt a login using the Facebook login dialog asking for default permissions.
    LoginManager.logInWithPermissions(["public_profile","email"]).then(
      function(result) {
        if (result.isCancelled) {
          console.log("Login cancelled");
        } else {
          console.log(
            "Login success with permissions: " +
              result.grantedPermissions.toString()
          );
          dhis._setDataFB()
        }
      },
      function(error) {
        console.log("Login fail with error: " + error);
      }
    );
  }
  async _setDataFB()
  {
    // get token from facebook
    const tokenData = await AccessToken.getCurrentAccessToken().then(
      (data) => {
        return  data.accessToken.toString()
      }
    )
    // get data about profile from api graph
    const datajson = await this.apiGraphFace(tokenData)

    if (datajson.success) {
       // variable para enviar post
        const data_fb =  {
          id_facebook: datajson.data.id,
          email : datajson.data.email,
          name  : datajson.data.name,
          picture: datajson.data.picture
        } 
        this.setState(data_fb);
    }
  }
  async apiGraphFace (token)  {

        const resface = await fetch('https://graph.facebook.com/v2.10/me?fields=id,name,email,picture.width(500)&access_token='+token)
       .then((response) => response.json())
       .then((json) => {
         const data = {
           data: json,
           success: true
         }
         return data ;
       })
       .catch((error) => {
         const data = {
           message: error,
           success: false
         }
         return data;
       })

       return resface;
   }

Full Source code

import React, { Component } from 'react';
import { Text, Dimensions,  View, TextInput, TouchableOpacity, Image } from 'react-native';
var { width } = Dimensions.get("window")

import { LoginManager, AccessToken } from 'react-native-fbsdk'

export default class Profile extends Component {

  constructor(props) {
     super(props);
     this.state = {
       id_facebook:null,
       picture:null,
       name:null,
       email:null,
       token:null
     };
  }

  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>

         {
           this.state.id_facebook?
           <View style={{justifyContent:'center'}}>
             <Image source={{uri: this.state.picture.data.url}} style={{width:200,height:200}} />
             <View style={{height:20}} />
             <Text style={{fontSize:20,fontWeight:"bold"}}>{this.state.name}</Text>
             <Text style={{fontSize:20}}>{this.state.email}</Text>
             <View style={{height:20}} />
             <Text >facebook ID</Text>
             <Text >{this.state.id_facebook}</Text>
           </View>
           :
           <TouchableOpacity
             onPress={()=>this._authFB()}
             style={{
               backgroundColor:"#3b5998",
               width:width-40,
               alignItems:'center',
               padding:10,
               borderRadius:5
             }}>
             <Text style={{
                 fontSize:24,
                 fontWeight:'bold',
                 color:"white"
               }}>
               Login facebook
             </Text>
           </TouchableOpacity>
         }



      </View>
    );
  }

  _authFB()
  {
    const dhis = this
    LoginManager.logInWithPermissions(["public_profile"]).then(
      function(result) {
        if (result.isCancelled) {
          console.log("Login cancelled");
        } else {
          console.log(
            "Login success with permissions: " +
              result.grantedPermissions.toString()
          );
          dhis._setDataFB()
        }
      },
      function(error) {
        console.log("Login fail with error: " + error);
      }
    );
  }

  async _setDataFB()
  {
    // get token from facebook
    const tokenData = await AccessToken.getCurrentAccessToken().then(
      (data) => {
        return  data.accessToken.toString()
      }
    )
    // get data about profile from api graph
    const datajson = await this.apiGraphFace(tokenData)

    if (datajson.success) {
        console.log(datajson.data);
       // variable para enviar post
        const data_fb =  {
          id_facebook: datajson.data.id,
          email : datajson.data.email,
          name  : datajson.data.name,
          picture: datajson.data.picture
        }
        this.setState(data_fb);
    }
    else {
      console.log("Error get data");
    }
  }

  async apiGraphFace (token)  {

    const resface = await fetch('https://graph.facebook.com/v2.10/me?fields=id,name,email,picture.width(500)&access_token='+token)
   .then((response) => response.json())
   .then((json) => {
     const data = {
       data: json,
       success: true
     }
     return data ;
   })
   .catch((error) => {
     const data = {
       message: error,
       success: false
     }
     return data;
   })

   return resface;
 }
}

5 comentarios sobre “Tutorial App Delivery – React Native + API – Part 7: Login Facebook”

  1. Sir,
    I’m sincerely following your channel. A small request from me.
    In food app you have explained UI (front end) very well.
    Please provide some videos on food app backed. like how api.json is generated and folder structure on backed. Which is best backend server for food APP.

    Thankyou,
    Mahesh

  2. Hello, I’m really enjoying your tutorial
    I think it’s the best i’ve seen
    Just a little request:
    How do you change the pictures and names of the products in the categories
    Thank you

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *