DEV Community

loading...

Login com LinkedIn usando React Native

mensonones profile image Emerson Vieira Updated on ・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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide
Collapse
veeravel profile image
veeravel

can you please explain how to do logout

Collapse
diogoppedro profile image
Diogo Pacheco Pedro

Muito massa Emerson . Valeu pelo post