Autenticazione React Native con Relay: Guida Tecnica

autenticazione react native utilizzando relay introduzione utilizzando l'api graphql, dopo aver registrato o effettuato il login di un utente, riceverai un token di sessione che puoi utilizzare per recuperare l'utente connesso in qualsiasi momento il token di sessione proviene da una mutazione relay troverai quegli esempi di mutazione relay nelle guide precedenti di registrazione o accesso il valore del token di sessione rappresenta la sessione corrente e controlla se l'utente è autenticato o meno al momento dell'autenticazione, questo valore deve iniziare a essere nei parametri dell'intestazione su relay, utilizziamo l'environment per gestire i parametri dell'intestazione, quindi dovresti inserire il token di sessione all'interno di questo file dopo aver aggiunto la sessione alle intestazioni, ogni richiesta sarà autenticata da back4app e, l'utente avrà accesso alle risorse private in qualsiasi momento, puoi accedere a questo progetto tramite i nostri repository github per controllare gli stili e il codice completo repository di esempio javascript obiettivo autenticare le richieste degli utenti su back4app utilizzando il token di sessione nei parametri dell'intestazione requisiti un'app creata su back4app utilizzando la parse server versione 3 10 o superiore devi concludere il tutorial sulla configurazione dell'ambiente relay devi concludere il esempio di login react native utilizzando relay per questo tutorial utilizzeremo expo come framework react native; per questo tutorial utilizzeremo javascript come nostro linguaggio di implementazione predefinito; per questo tutorial utilizzeremo async storage; 1 installa async storage dopo aver concluso i tutorial registrati o accedi , la tua app riceverà un token di sessione memorizziamo il token utilizzando async storage segui la documentazione ufficiale per installare la libreria async storage nella tua app puoi utilizzare async storage, redux o la tua soluzione di archiviazione locale preferita assicurati solo che questo valore sia disponibile nell'ambiente 2 recupera il token procediamo utilizzando il codice dell'ultima guida dovrai ottenere il token di sessione e persistere questo valore nella tua applicazione utilizzando async storage inizia cambiando la gestione dello stato del token di sessione dal hook usestate a async storage il primo passo è creare una funzione all'interno del file dell'ambiente per recuperare il token di sessione da async storage importa l'async storage 1 import asyncstorage from '@react native async storage/async storage'; ora, crea la funzione 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 salva il token sul lato client miglioriamo ora il componente di accesso per persistere il token di sessione invece di gestirlo utilizzando l'hook usestate il componente manterrà ora lo stato di accesso anche durante il riavvio dell'app perché ha il token di sessione persistente apri il componente di accesso all'interno di oncompleted da onsubmit, salva il token di sessione su async storage ottenendo il seguente risultato poi migliora oncompleted 1 oncompleted async (response) => { 2 if(!response? login || response? login === null) { 3 alert('error while logging'); 4 return; 5 } 6&#x9; 7 const { viewer } = response? login; 8 const { sessiontoken, user } = viewer; 9&#x9; 10 if (sessiontoken !== null) { 11 setuserlogged(user); 12 alert(`user ${user username} successfully logged`); 13 await asyncstorage setitem('sessiontoken', sessiontoken); 14 return; 15 } 16 }, dopo, all'interno della dichiarazione del componente signin, crea un nuovo usestate per il token di sessione 1 const \[sessiontoken, setsessiontoken] = usestate(null); aggiungi un useeffect da chiamare ogni volta che il componente viene montato e controlla se ha un token di sessione (importa il getsessiontoken getsessiontoken dal file di ambiente 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); infine, cambiamo di nuovo oncompleted per gestire il nuovo usestate, ottenendo le nuove righe di codice 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 }, rimuovi l'uso di usestate per l'utente loggato, le due righe qui sotto dai rispettivi posti 1 const \[userlogged, setuserlogged] = usestate(null); e 1 setuserlogged(user); evitiamo l'alert e iniziamo a impostare le informazioni dell'utente e il token in un usestate seguito dal salvataggio del token in async storage cambia l'if per gestire ora il token di sessione 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 risultato finale del componente signin dopo tutte le modifiche, il componente signin sarà simile a quello qui sotto 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&#x9; 8 const signin = () => { 9 const \[sessiontoken, setsessiontoken] = usestate(null); 10&#x9; 11 useeffect(() => { 12 (async () => { 13 const st = await getsessiontoken(); 14 setsessiontoken(st); 15 })(); 16 }, \[]); 17&#x9; 18 const onsubmit = async (values) = { 19 const { username, password } = values; 20 const input = { 21 username, 22 password, 23 }; 24&#x9; 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&#x9; 34 const { viewer } = response? login; 35 const { sessiontoken, user } = viewer; 36&#x9; 37 if (sessiontoken !== null) { 38 setsessiontoken(sessiontoken); 39 setuserlogged(user); 40&#x9; 41 await asyncstorage setitem('sessiontoken', sessiontoken); 42 return; 43 } 44 }, 45 onerror (errors) => { 46 alert(errors\[0] message); 47 }, 48 }); 49 }; 50&#x9; 51 const formikbag = useformik({ 52 initialvalues { 53 username '', 54 password '', 55 }, 56 onsubmit, 57 }); 58&#x9; 59 const { handlesubmit, setfieldvalue } = formikbag; 60&#x9; 61 if (sessiontoken) { 62 return ( 63 \<view style={ {margintop 15, alignitems 'center'} }> 64 \<text>user logged\</text> 65 \</view> 66 ); 67 } 68&#x9; 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&#x9; 99 export default signin; 5 test è tempo di testare le nuove modifiche del componente sign in per assicurarti che non ci sia nessun utente loggato, chiudi la tua applicazione e riaprila ricorda anche di svuotare l'async storage puoi farlo chiamando il asyncstorage clear() asyncstorage clear() metodo e svuotare lo stato attuale accedi di nuovo e vedrai il seguente messaggio 6 imposta il token di sessione nell'ambiente relay ora, inseriamo il token di sessione nelle richieste dell'applicazione all'api graphql di back4app all'interno del file environment, recupera il sessiontoken e aggiungilo all'oggetto headers dovresti passare il sessiontoken nella variabile x parse session token negli headers qui, riutilizzeremo la getsessiontoken getsessiontoken funzione che abbiamo già creato crea una funzione prima della fetchquery fetchquery funzione e incolla il seguente codice 1 export const gettoken = async () => { 2 const sessiontoken = await getsessiontoken(); 3&#x9; 4 if (sessiontoken) { 5 return { 6 'x parse session token' sessiontoken, 7 }; 8 } 9&#x9; 10 return {}; 11 }; la funzione sopra recupera il token di sessione solo se esiste ora, aggiungilo all'oggetto headers decompattandolo 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 }; subito sotto gli headers, c'è il try catch per effettuare la richiesta impostiamo un if dopo la richiesta che gestirà quando lo stato http della richiesta sarà 401 questo significherà che il token attuale non è più valido quindi, cancelleremo lo storage e termineremo l'utente corrente 1 try { 2 const response = await fetch(`https //parseapi back4app com/graphql`, { 3 method "post", 4 headers, 5 body, 6 }); 7&#x9; 8 const data = await response json(); 9&#x9; 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&#x9; 17 if (data errors) { 18 throw data errors; 19 } 20&#x9; 21 return data; 22 } catch (err) { 23 console log("err on fetch graphql", err); 24&#x9; 25 throw err; 26 } ora, la tua applicazione può iniziare a recuperare risorse private dal backend di back4app e, se il token di sessione non esiste, non si romperà perché non lo passeremo non dimenticare di configurare i meccanismi di sicurezza per garantire il livello di accesso desiderato per gli utenti per comprendere meglio, accedi al link documentazione sulla sicurezza di parse conclusione in questa guida, hai salvato il token di sessione utilizzando lo storage asincrono e ora puoi iniziare a recuperare risorse che necessitano di un utente connesso nel prossimo documento, prepariamo un componente che recupererà le informazioni sull'utente connesso e smetteremo di utilizzare un usestate per mostrarle per la registrazione dell'utente, puoi seguire lo stesso approccio di questo tutorial per gestire il token di sessione