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

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 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 react native google signin biblioteca para alcançar isso o parse user linkwith 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 parse user , o parse armazenará uma sessão de usuário válida em seu dispositivo chamadas futuras a métodos como currentasync 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 https //github com/templates back4app/react native js login google https //github com/templates back4app/react native ts login google pré requisitos para completar este tutorial, você precisará um aplicativo react native criado e https //www back4app com/docs/react native/parse sdk/react native sdk complete os guias anteriores para que você possa ter uma melhor compreensão de https //www back4app com/docs/react native/parse sdk/working with users/react native login objetivo para construir um recurso de login de usuário usando o google sign in no parse para um aplicativo react native 1 instalando dependências a maneira mais popular de habilitar o google sign in no react native é usando react native google signin 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 https //github com/react native google signin/google signin depois disso, certifique se de que o arquivo principal do seu aplicativo ( app js app js ou app tsx app tsx ) está corretamente inicializando e configurando googlesignin googlesignin assim app tsx/app js 1 // other imports 2 import {googlesignin} from '@react native community/google signin'; 3&#x9; 4 // parse initialization configuration goes here 5 // 6&#x9; 7 // googlesignin initial configuration 8 // iosclientid is required for ios platform development and 9 // webclientid for android use only what is suitable to you 10 googlesignin configure({ 11 iosclientid 12 'google ios client id', 13 webclientid 14 'google android web client id', 15 }); 16&#x9; 17 // 2 usando o google sign in com parse agora vamos criar um novo método dentro do userlogin userlogin componente chamando o modal de autenticação do google sign in com googlesignin signin 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 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 }; depois disso, você pode usar parse user linkwith parse user linkwith em um novo parse user 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 linkwith fará o login usando a conta existente javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin parse user = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser parse user = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error object) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 }; adicione esta função ao seu usersignin usersignin componente e atribua a ao seu botão do google onpress 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 3 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 usuário (se os dados de autenticação do google não pertenciam a outro usuário), contendo os authdata 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 usuário objeto 4 vinculando um usuário existente ao google sign in outro linkwith 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 linkwith da mesma forma que você fez em userlogin userlogin para o seu hellouser 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 parse user , você o usará a partir do objeto do usuário logado javascript 1 const douserlinkgoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const authdata = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 };1 const douserlinkgoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const authdata object = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error object) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 }; atribua esta função a um botão do google onpress onpress no seu tela inicial teste sua nova função, observando que o parse user parse user objeto authdata 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 react native google signin no próximo guia, mostraremos como realizar consultas úteis de usuários