Login com LinkedIn usando React Native
Tags: reactnative, linkedin, login, social
Published: 2019-12-27 03:40:30


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](https://github.com/xcarpentier/react-native-linkedin)

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

```sh
$ 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](https://github.com/react-native-community/react-native-webview)
Vamos adicioná-la ao nosso projeto.  Para isso navegue até a raiz do seu projeto e digite o comando abaixo: 

```sh
$ 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:

```javascript
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:

```sh
$ 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](https://www.linkedin.com/developers)

Abaixo segue o exemplo de código do Tutorial

```javascript
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](https://thepracticaldev.s3.amazonaws.com/i/8c9lb0d0dwj15ugeqzgh.jpg)

É isso! :) até a próxima