loading...

Login com LinkedIn usando React Native

mensonones profile image Emerson Vieira ・2 min read

Neste tutorial iremos fazer uso de uma lib que está sendo mantida e é a mais atual pelo visto. É a que usamos no projeto da empresa.
Link da lib: react-native-linkedin

Vamos adicionar a lib em nosso projeto. Para isso navegue até a raiz do seu projeto e digite o comando abaixo:

$ yarn add react-native-linkedin

Outra dependência importante para que a lib acima funcione é a de webview. Link da dependência: react-native-webview
Vamos adicioná-la ao nosso projeto. Para isso navegue até a raiz do seu projeto e digite o comando abaixo:

$ yarn add react-native-webview

Agora, para importar a lib ao projeto, abra o arquivo onde será usado a lib e importe usando o trecho de código a seguir:

import LinkedInModal from  'react-native-linkedin';

Nesse tutorial eu utilizo a lib axios para fazer o consumo da API do LinkedIn. Caso queria usar também, navegue até a raiz do projeto usando o terminal e digite o comando abaixo:

$ yarn add axios

E o mais importante para ser falado é que a lib usa uma webview para abrir/acessar o LinkedIn e o usuário fazer login no mesmo. Feito o login e caso tudo ocorra bem, é retornado um token, este token é usado para consumir a API do LinkedIn e então assim obter os dados do usuário.

Vale ressaltar que é preciso criar um app na página de desenvolvedores do LinkedIn para obter acesso ao clientID e ao clientSecret usados pela lib. Link da página: Página Desenvolvedor LinkedIn

Abaixo segue o exemplo de código do Tutorial

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

import {StyleSheet, View, Text, Image} from  'react-native';



import LinkedInModal from  'react-native-linkedin';



import axios from  'axios';



const styles = StyleSheet.create({

container: {

flex:  1,

backgroundColor:  '#fff',

justifyContent:  'center',

alignItems:  'center',

},

});



export  default  function  App() {

const [token, setToken] =  useState('');

const [info, setInfo] =  useState();

const [loading, setLoading] =  useState(true);



const instance = axios.create({

baseURL:  'https://api.linkedin.com/v2',

headers: {

Authorization:  'Bearer  '  + token,

},

});



async  function  getInfo() {

await instance

.get(

'/me?projection=(id,firstName,lastName,email-address,profilePicture(displayImage~:playableStreams))',

)

.then(response => {

setInfo(response.data);

setLoading(false);

})

.catch(error =>  console.log(error));

}



useEffect(() => {

getInfo();

}, [token]);



const renderData = info && (

<>

<Text>{info.firstName.localized.pt_BR}</Text>

<Text>{info.lastName.localized.pt_BR}</Text>

<Image

source={{

uri:

info.profilePicture['displayImage~'].elements[3]['identifiers'][0][

'identifier'

],

}}

style={{

width:  200,

height:  200,

left:  'auto',

right:  'auto',

justifyContent:  'center',

}}

/>

</>

);



return (

<View  style={styles.container}>

<LinkedInModal

clientID="*****"

clientSecret="*****"

redirectUri="https://api.linkedin.com/v2/me"

onSuccess={token =>  setToken(token.access_token)}

onError={error =>  console.log(error)}

areaTouchText={{top:  20, bottom:  20, left:  150, right:  150}}

/>

{loading && <Text>{'Loading...'}</Text>}

{renderData}

</View>

);

}

A propriedade redirectUri pode ser qualquer url de seu interesse, mas tem que ser a mesma redirectUri cadastrada em seu app na página de desenvolvedores.

Resultado esperado:

Alt Text

É isso! :) até a próxima

Posted on by:

mensonones profile

Emerson Vieira

@mensonones

Estudante de Eng. de Software

Discussion

pic
Editor guide