Integração Google Sign-In com Parse em React Native

9min
Entrar com o Google para React Native
Introdução
No último tutorial, você construiu um recurso de login/logout de Usuário para seu App usando a Parse.User classe. Agora você aprenderá como usar o Google Sign-in para recuperar dados do usuário do Google e fazer login, se inscrever ou vincular usuários existentes a ele. Você também instalará e configurará a react-native-google-signin biblioteca para alcançar isso.
O Parse.User.linkWith método é responsável por inscrever e fazer login de usuários usando qualquer método de autenticação de terceiros, desde que você passe os parâmetros corretos solicitados por cada provedor diferente. Após vincular os dados do usuário a um novo ou existente Parse.User, o Parse armazenará uma sessão de usuário válida em seu dispositivo. Chamadas futuras a métodos como currentAsync  recuperarão com sucesso os dados do seu Usuário, assim como em logins regulares.
A qualquer momento, você pode acessar este projeto através de nossos repositórios do GitHub para conferir os estilos e o código completo.
﻿Repositório de Exemplo em JavaScript﻿
﻿Repositório de Exemplo em TypeScript﻿
Pré-requisitos
Para completar este tutorial, você precisará:
Um aplicativo React Native criado e conectado ao Back4App.
Complete os guias anteriores para que você possa ter uma melhor compreensão de a classe Parse User.
Objetivo
Para construir um recurso de Login de Usuário usando o Google Sign-in no Parse para um aplicativo React Native.
- Instalando dependências
A maneira mais popular de habilitar o Google Sign-in no React Native é usando react-native-google-signin para gerenciá-lo. Como a configuração desta biblioteca depende do seu ambiente de desenvolvimento, plataforma alvo e preferências, configure-a seguindo a documentação oficial.
Depois disso, certifique-se de que o arquivo principal do seu aplicativo (App.js ou App.tsx) está corretamente inicializando e configurando GoogleSignin assim:
App.tsx/App.js
// Other imports
import {GoogleSignin} from '@react-native-community/google-signin';

// Parse initialization configuration goes here
// ...

// GoogleSignIn initial configuration
// iosClientId is required for iOS platform development and
// webCLientId for Android. Use only what is suitable to you
GoogleSignin.configure({
 iosClientId:
   'GOOGLE_IOS_CLIENT_ID',
 webClientId:
   'GOOGLE_ANDROID_WEB_CLIENT_ID',
});

// ...
// Other imports
import {GoogleSignin} from '@react-native-community/google-signin';

// Parse initialization configuration goes here
// ...

// GoogleSignIn initial configuration
// iosClientId is required for iOS platform development and
// webCLientId for Android. Use only what is suitable to you
GoogleSignin.configure({
 iosClientId:
   'GOOGLE_IOS_CLIENT_ID',
 webClientId:
   'GOOGLE_ANDROID_WEB_CLIENT_ID',
});

// ...
﻿
- Usando o Google Sign-in com Parse
Agora vamos criar um novo método dentro do UserLogIn componente chamando o modal de autenticação do Google Sign-in com GoogleSignin.signIn. Se o usuário fizer login com o Google, essa chamada irá recuperar os dados do usuário do Google e você precisará armazenar o id, idToken e o e-mail do Google para mais tarde.
JavaScript
TypeScript
const doUserLogInGoogle = async function () {
 try {
   // Check if your user can sign in using Google on his phone
   await GoogleSignin.hasPlayServices({showPlayServicesUpdateDialog: true});
   // Retrieve user data from Google
   const userInfo = await GoogleSignin.signIn();
   const googleIdToken = userInfo.idToken;
   const googleUserId = userInfo.user.id;
   const googleEmail = userInfo.user.email;
 } catch (error) {
   Alert.alert('Error!', error.code);
   return false;
 }
};
const doUserLogInGoogle = async function () {
 try {
   // Check if your user can sign in using Google on his phone
   await GoogleSignin.hasPlayServices({showPlayServicesUpdateDialog: true});
   // Retrieve user data from Google
   const userInfo = await GoogleSignin.signIn();
   const googleIdToken = userInfo.idToken;
   const googleUserId = userInfo.user.id;
   const googleEmail = userInfo.user.email;
 } catch (error) {
   Alert.alert('Error!', error.code);
   return false;
 }
};
﻿
Depois disso, você pode usar Parse.User.linkWith em um novo Parse.User objeto para registrar um novo usuário e fazer login. Note que se seu usuário já tiver se inscrito usando esta autenticação do Google, linkWith fará o login usando a conta existente.
JavaScript
TypeScript
const doUserLogInGoogle = async function (): Promise<boolean> {
 try {
   // Check if your user can sign in using Google on his phone
   await GoogleSignin.hasPlayServices({showPlayServicesUpdateDialog: true});
   // Retrieve user data from Google
   const userInfo: object = await GoogleSignin.signIn();
   const googleIdToken: string = userInfo.idToken;
   const googleUserId: string = userInfo.user.id;
   const googleEmail: string = userInfo.user.email;
   // Log in on Parse using this Google id token
   const userToLogin: Parse.User = new Parse.User();
   // Set username and email to match google email
   userToLogin.set('username', googleEmail);
   userToLogin.set('email', googleEmail);
   return await user
     .linkWith('google', {
       authData: {id: googleUserId, id_token: googleIdToken},
     })
     .then(async (loggedInUser: Parse.User) => {
       // logIn returns the corresponding ParseUser object
       Alert.alert(
         'Success!',
         `User ${loggedInUser.get('username')} has successfully signed in!`,
       );
       // To verify that this is in fact the current user, currentAsync can be used
       const currentUser: Parse.User = await Parse.User.currentAsync();
       console.log(loggedInUser === currentUser);
       // Navigation.navigate takes the user to the screen named after the one
       // passed as parameter
       navigation.navigate('Home');
       return true;
     })
     .catch(async (error: object) => {
       // Error can be caused by wrong parameters or lack of Internet connection
       Alert.alert('Error!', error.message);
       return false;
     });
 } catch (error) {
   Alert.alert('Error!', error.code);
   return false;
 }
};
const doUserLogInGoogle = async function (): Promise<boolean> {
 try {
   // Check if your user can sign in using Google on his phone
   await GoogleSignin.hasPlayServices({showPlayServicesUpdateDialog: true});
   // Retrieve user data from Google
   const userInfo: object = await GoogleSignin.signIn();
   const googleIdToken: string = userInfo.idToken;
   const googleUserId: string = userInfo.user.id;
   const googleEmail: string = userInfo.user.email;
   // Log in on Parse using this Google id token
   const userToLogin: Parse.User = new Parse.User();
   // Set username and email to match google email
   userToLogin.set('username', googleEmail);
   userToLogin.set('email', googleEmail);
   return await user
     .linkWith('google', {
       authData: {id: googleUserId, id_token: googleIdToken},
     })
     .then(async (loggedInUser: Parse.User) => {
       // logIn returns the corresponding ParseUser object
       Alert.alert(
         'Success!',
         `User ${loggedInUser.get('username')} has successfully signed in!`,
       );
       // To verify that this is in fact the current user, currentAsync can be used
       const currentUser: Parse.User = await Parse.User.currentAsync();
       console.log(loggedInUser === currentUser);
       // Navigation.navigate takes the user to the screen named after the one
       // passed as parameter
       navigation.navigate('Home');
       return true;
     })
     .catch(async (error: object) => {
       // Error can be caused by wrong parameters or lack of Internet connection
       Alert.alert('Error!', error.message);
       return false;
     });
 } catch (error) {
   Alert.alert('Error!', error.code);
   return false;
 }
};
﻿
Adicione esta função ao seu UserSignIn componente e atribua-a ao seu botão do Google onPress. Vá em frente e teste sua nova função. Observe que o usuário será redirecionado para a sua tela inicial após se registrar e/ou fazer login com sucesso.
﻿
- Verificando o login do usuário e a criação de sessão
Para ter certeza de que o login do Google funcionou, você pode olhar para o seu painel do Parse e ver seu novo Usuário (se os dados de autenticação do Google não pertenciam a outro usuário), contendo os authData parâmetros.
﻿
Você também pode verificar se uma sessão válida foi criada no painel, contendo um ponteiro para aquele Usuário objeto.
﻿
- Vinculando um usuário existente ao Google Sign-in
Outro linkWith uso possível é vincular um usuário existente a outro provedor de autenticação, neste caso, o Google. Adicione esta função que chama linkWith da mesma forma que você fez em UserLogIn para o seu HelloUser componente ou diretamente para a sua tela inicial. A única diferença aqui é que, em vez de chamar o método de um Parse.User, você o usará a partir do objeto do usuário logado.
JavaScript
TypeScript
const doUserLinkGoogle = async function (): Promise<boolean> {
 try {
   // Check if your user can sign in using Google on his phone
   await GoogleSignin.hasPlayServices({showPlayServicesUpdateDialog: true});
   // Retrieve user data from Google
   const userInfo: object = await GoogleSignin.signIn();
   const googleIdToken: string = userInfo.idToken;
   const googleUserId: string = userInfo.user.id;
   const authData: object = {
     id: googleUserId,
     id_token: googleIdToken,
   };
   let currentUser: Parse.User = await Parse.User.currentAsync();
   // Link user with his Google Credentials
   return await currentUser
     .linkWith('google', {
       authData: authData,
     })
     .then(async (loggedInUser: Parse.User) => {
       // logIn returns the corresponding ParseUser object
       Alert.alert(
         'Success!',
         `User ${loggedInUser.get(
           'username',
         )} has successfully linked his Google account!`,
       );
       // To verify that this is in fact the current user, currentAsync can be used
       currentUser = await Parse.User.currentAsync();
       console.log(loggedInUser === currentUser);
       return true;
     })
     .catch(async (error: object) => {
       // Error can be caused by wrong parameters or lack of Internet connection
       Alert.alert('Error!', error.message);
       return false;
     });
 } catch (error) {
   Alert.alert('Error!', error.code);
   return false;
 }
};
const doUserLinkGoogle = async function (): Promise<boolean> {
 try {
   // Check if your user can sign in using Google on his phone
   await GoogleSignin.hasPlayServices({showPlayServicesUpdateDialog: true});
   // Retrieve user data from Google
   const userInfo: object = await GoogleSignin.signIn();
   const googleIdToken: string = userInfo.idToken;
   const googleUserId: string = userInfo.user.id;
   const authData: object = {
     id: googleUserId,
     id_token: googleIdToken,
   };
   let currentUser: Parse.User = await Parse.User.currentAsync();
   // Link user with his Google Credentials
   return await currentUser
     .linkWith('google', {
       authData: authData,
     })
     .then(async (loggedInUser: Parse.User) => {
       // logIn returns the corresponding ParseUser object
       Alert.alert(
         'Success!',
         `User ${loggedInUser.get(
           'username',
         )} has successfully linked his Google account!`,
       );
       // To verify that this is in fact the current user, currentAsync can be used
       currentUser = await Parse.User.currentAsync();
       console.log(loggedInUser === currentUser);
       return true;
     })
     .catch(async (error: object) => {
       // Error can be caused by wrong parameters or lack of Internet connection
       Alert.alert('Error!', error.message);
       return false;
     });
 } catch (error) {
   Alert.alert('Error!', error.code);
   return false;
 }
};
﻿
Atribua esta função a um botão do Google onPress no seu tela inicial. Teste sua nova função, observando que o Parse.User objeto authData será atualizado com os novos dados do provedor de autenticação. Verifique se o usuário realmente foi atualizado no seu painel do servidor Parse.
﻿
Conclusão
No final deste guia, você aprendeu como fazer login, se inscrever ou vincular usuários Parse existentes no React Native usando o Google Sign-in com react-native-google-signin. No próximo guia, mostraremos como realizar consultas úteis de usuários.
Redefina Senhas em React Native com Parse
Integração de Login com Facebook no React Native usando Parse
Integração Google Sign-In com Parse em React Native

Entrar com o Google para React Native

Introdução

Pré-requisitos

Objetivo

1 - Instalando dependências

2 - Usando o Google Sign-in com Parse

3 - Verificando o login do usuário e a criação de sessão

4 - Vinculando um usuário existente ao Google Sign-in

Conclusão
