Autenticação React Native com Relay: Token e Cabeçalhos

18 min

autenticação react native usando relay introdução usando a api graphql, após se inscrever ou fazer login de um usuário, você receberá um token de sessão que pode usar para recuperar o usuário logado a qualquer momento o token de sessão vem de uma mutação relay você encontrará esses exemplos de mutação relay nos guias anteriores de https //www back4app com/docs/parse graphql/graphql sign up ou https //www back4app com/docs/parse graphql/graphql login o valor do token de sessão representa a sessão atual e controla se o usuário está autenticado ou não no momento da autenticação, esse valor precisa começar a estar nos parâmetros do cabeçalho no relay, usamos o ambiente para lidar com os parâmetros do cabeçalho, então você deve inserir o token de sessão dentro deste arquivo após adicionar a sessão aos cabeçalhos, cada solicitação será autenticada pelo back4app e, o usuário terá acesso aos recursos privados 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 graphql relay js users objetivo autenticar as solicitações do usuário no back4app usando o token de sessão nos parâmetros do cabeçalho pré requisitos um aplicativo criado no back4app usando a versão 3 10 ou superior do parse server você precisa concluir o https //www back4app com/docs/react native/graphql/relay setup você precisa concluir o https //www back4app com/docs/react native/graphql/users/react native login sample para este tutorial, vamos usar o expo como um framework react native; para este tutorial, vamos usar javascript como nossa linguagem de implementação padrão; para este tutorial, vamos usar o async storage; 1 instalar async storage após concluir os tutoriais https //www back4app com/docs/parse graphql/graphql sign up ou https //www back4app com/docs/parse graphql/graphql login , seu aplicativo receberá um token de sessão vamos armazenar o token usando o async storage siga a documentação oficial para instalar a biblioteca async storage no seu aplicativo você pode usar armazenamento assíncrono, redux ou sua solução de armazenamento local preferida você só precisa garantir que esse valor estará disponível no ambiente 2 recuperar o token vamos em frente usando o https //www back4app com/docs/parse graphql/graphql login você precisará obter o token de sessão e persistir esse valor em seu aplicativo usando o async storage comece mudando a gestão do estado do token de sessão do hook usestate para o async storage o primeiro passo é criar uma função dentro do arquivo de ambiente para recuperar o token de sessão do async storage importe o async storage 1 import asyncstorage from '@react native async storage/async storage'; agora, crie a função 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 salve o token no lado do cliente vamos agora melhorar o componente de login para persistir o token da sessão em vez de gerenciá lo usando o hook usestate o componente agora manterá o estado de logado mesmo ao recarregar o app porque tem o token da sessão persistido abra o componente de login dentro do oncompleted do onsubmit, salve o token da sessão no async storage obtendo o seguinte resultado então melhore o oncompleted 1 oncompleted async (response) => { 2 if(!response? login || response? login === null) { 3 alert('error while logging'); 4 return; 5 } 6	 7 const { viewer } = response? login; 8 const { sessiontoken, user } = viewer; 9	 10 if (sessiontoken !== null) { 11 setuserlogged(user); 12 alert(`user ${user username} successfully logged`); 13 await asyncstorage setitem('sessiontoken', sessiontoken); 14 return; 15 } 16 }, depois, dentro da declaração do componente signin, crie um novo usestate para o token de sessão 1 const \[sessiontoken, setsessiontoken] = usestate(null); adicione um useeffect que será chamado toda vez que o componente for montado e verifique se há um token de sessão (importe o getsessiontoken getsessiontoken do arquivo de ambiente 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); por último, vamos mudar novamente o oncompleted para agora lidar com o novo usestate, obtendo as novas linhas de código 1 oncompleted async (response) => { 2 if (!response? login || response? login === null) { 3 alert('error while logging'); 4 return; 5 } 6 7 const { viewer } = response? login; 8 const { sessiontoken, user } = viewer; 9 10 if (sessiontoken !== null) { 11 setsessiontoken(sessiontoken); 12 await asyncstorage setitem('sessiontoken', sessiontoken); 13 return; 14 15 } 16 }, remova o usestate para o usuário logado, as duas linhas abaixo dos respectivos lugares 1 const \[userlogged, setuserlogged] = usestate(null); e 1 setuserlogged(user); evitamos o alerta e começamos a definir as informações do usuário e o token em um usestate seguido pelo armazenamento assíncrono do token altera o if para lidar agora com o token da sessão 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 resultado final do componente signin após todas as mudanças, o componente signin será semelhante ao abaixo 1 import react, {useeffect, usestate} from 'react'; 2 import loginmutation from ' /mutations/loginmutation'; 3 import environment, { getsessiontoken } from ' / /relay/environment'; 4 import {formikprovider, useformik} from 'formik'; 5 import { button, text, textinput, view, touchableopacity } from 'react native'; 6 import asyncstorage from '@react native async storage/async storage'; 7	 8 const signin = () => { 9 const \[sessiontoken, setsessiontoken] = usestate(null); 10	 11 useeffect(() => { 12 (async () => { 13 const st = await getsessiontoken(); 14 setsessiontoken(st); 15 })(); 16 }, \[]); 17	 18 const onsubmit = async (values) = { 19 const { username, password } = values; 20 const input = { 21 username, 22 password, 23 }; 24	 25 loginmutation commit({ 26 environment, 27 input, 28 oncompleted async (response) => { 29 if (!response? login || response? login === null) { 30 alert('error while logging'); 31 return; 32 } 33	 34 const { viewer } = response? login; 35 const { sessiontoken, user } = viewer; 36	 37 if (sessiontoken !== null) { 38 setsessiontoken(sessiontoken); 39 setuserlogged(user); 40	 41 await asyncstorage setitem('sessiontoken', sessiontoken); 42 return; 43 } 44 }, 45 onerror (errors) => { 46 alert(errors\[0] message); 47 }, 48 }); 49 }; 50	 51 const formikbag = useformik({ 52 initialvalues { 53 username '', 54 password '', 55 }, 56 onsubmit, 57 }); 58	 59 const { handlesubmit, setfieldvalue } = formikbag; 60	 61 if (sessiontoken) { 62 return ( 63 \<view style={ {margintop 15, alignitems 'center'} }> 64 \<text>user logged\</text> 65 \</view> 66 ); 67 } 68	 69 return ( 70 \<formikprovider value={formikbag}> 71 \<view style={styles login wrapper}> 72 \<view style={styles form}> 73 \<text>username\</text> 74 \<textinput 75 name={"username"} 76 style={styles form input} 77 autocapitalize="none" 78 onchangetext={(text) => setfieldvalue("username", text)} 79 /> 80 \<text>password\</text> 81 \<textinput 82 style={styles form input} 83 name={"password"} 84 autocapitalize="none" 85 securetextentry 86 onchangetext={(text) => setfieldvalue("password", text)} 87 /> 88 \<touchableopacity onpress={() => handlesubmit()}> 89 \<view style={styles button}> 90 \<text style={styles button label}>{"sign in"}\</text> 91 \</view> 92 \</touchableopacity> 93 \</view> 94 \</view> 95 \</formikprovider> 96 ); 97 }; 98	 99 export default signin; 5 testando é hora de testar as novas mudanças do componente sign in para garantir que não há nenhum usuário logado, feche seu aplicativo e abra o novamente lembre se também de limpar o async storage você pode fazer isso chamando o asyncstorage clear() asyncstorage clear() método e limpar o estado atual faça login novamente e você verá a seguinte mensagem 6 defina o token de sessão no ambiente relay agora, vamos inserir o token de sessão nas requisições da aplicação para a api graphql do back4app dentro do arquivo environment, recupere o sessiontoken e adicione o ao objeto de cabeçalhos você deve passar o sessiontoken na variável x parse session token nos cabeçalhos aqui, vamos reutilizar a getsessiontoken getsessiontoken função que já criamos crie uma função antes da fetchquery fetchquery função e cole o seguinte código 1 export const gettoken = async () => { 2 const sessiontoken = await getsessiontoken(); 3	 4 if (sessiontoken) { 5 return { 6 'x parse session token' sessiontoken, 7 }; 8 } 9	 10 return {}; 11 }; a função acima recupera o token de sessão apenas se ele existir agora, adicione o ao objeto de cabeçalhos desconstruindo o 1 const headers = { 2 accept 'application/json', 3 'content type' 'application/json', 4 'x parse application id' 'your app id here', 5 'x parse client key' 'your client key here', 6 await gettoken(), 7 }; logo abaixo dos cabeçalhos, há o try catch para fazer a requisição vamos definir um if após a requisição que irá lidar com quando o status http da requisição for 401 isso significará que o token atual não é mais válido portanto, vamos limpar o armazenamento e encerrar o usuário atual 1 try { 2 const response = await fetch(`https //parseapi back4app com/graphql`, { 3 method "post", 4 headers, 5 body, 6 }); 7	 8 const data = await response json(); 9	 10 11 // this if will retrive the response when status code 401 and clear the session token 12 if (response status === 401) { 13 await asyncstorage getitem("sessiontoken"); 14 return; 15 } 16	 17 if (data errors) { 18 throw data errors; 19 } 20	 21 return data; 22 } catch (err) { 23 console log("err on fetch graphql", err); 24	 25 throw err; 26 } agora, seu aplicativo pode começar a recuperar recursos privados do backend do back4app e, se o token da sessão não existir, não quebrará porque não o passaremos não se esqueça de configurar os mecanismos de segurança para garantir o nível de acesso desejado para os usuários para entender melhor, acesse o link https //docs parseplatform org/js/guide/#security do parse conclusão neste guia, você salvou o token da sessão usando armazenamento assíncrono e, agora pode começar a recuperar recursos que precisam de um usuário logado no próximo documento, vamos preparar um componente que irá recuperar as informações sobre o usuário logado e parar de usar um usestate para mostrá las para o cadastro de usuário, você pode seguir a mesma abordagem deste tutorial para lidar com o token da sessão