Login com LinkedIn usando React Native

#reactnative #linkedin #login #social

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: