Accesso Utente in React Native: Implementazione con Relay

16 min

esempio di login in react native utilizzando relay introduzione nell'ultimo tutorial, hai implementato la registrazione dell'utente nella tua app react native utilizzando back4app e relay in questa guida, costruirai il meccanismo di login completando la funzionalità di autenticazione della tua app come saprai, parse fornisce già di default una classe utente, che ha già una mutazione graphql pronta all'uso per effettuare il login degli utenti quando necessario per la tua app il flusso qui sarà molto simile al tutorial di registrazione dell'utente costruirai una schermata di login utilizzando formik, quindi questo modulo chiamerà la mutazione relay la mutazione relay comunicherà con il server back4app gestendo l'intero processo di autenticazione 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 alla fine di questa guida, avrai un'applicazione react native con la funzionalità di accesso utente implementata, come mostrato di seguito prerequisiti un'app creata su back4app utilizzando la versione 3 10 o superiore di parse server devi concludere il tutorial sulla configurazione dell'ambiente relay aspettati un'app con un semplice modulo di accesso qui stiamo utilizzando un'app expo con un modulo per il nome utente e la password per questo tutorial, utilizzeremo expo come framework react native; per questo tutorial, utilizzeremo javascript come nostro linguaggio di implementazione predefinito; per questo tutorial utilizzeremo il nostro campione di stile css; 1 creazione del modulo di accesso se l'applicazione ha già un componente form, vai al passaggio 2 altrimenti, sentiti libero di seguire il nostro boilerplate il modulo è simile a quello utilizzato nel documento di registrazione puoi anche usarlo come base per il login per favore, vai a user registrazione utente se vuoi imparare come implementarlo il codice del modulo di accesso dovrebbe apparire così 1 import react, {usestate} from 'react'; 2 import environment from ' / /relay/environment'; 3 import {formikprovider, useformik} from 'formik'; 4 import { button, text, textinput, view, touchableopacity } from 'react native'; 5 import styles from " / /style" 6	 7 const signin = () => { 8 const \[userlogged, setuserlogged] = usestate(null); 9	 10 const onsubmit = async (values) => { 11 // @todo the mutation will be implemented here 12 }; 13	 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21	 22 const {handlesubmit, setfieldvalue} = formikbag; 23	 24 if (userlogged? id) { 25 return ( 26 \<view style={ {margintop 15, alignitems 'center'} }> 27 \<text>user {userlogged name} logged\</text> 28 \</view> 29 ); 30 } 31	 32 return ( 33 \<formikprovider value={formikbag}> 34 \<view style={styles login wrapper}> 35 \<view style={styles form}> 36 \<text>username\</text> 37 \<textinput 38 name={"username"} 39 style={styles form input} 40 autocapitalize="none" 41 onchangetext={(text) => setfieldvalue("username", text)} 42 /> 43 \<text>password\</text> 44 \<textinput 45 style={styles form input} 46 name={"password"} 47 autocapitalize="none" 48 securetextentry 49 onchangetext={(text) => setfieldvalue("password", text)} 50 /> 51 \<touchableopacity onpress={() => handlesubmit()}> 52 \<view style={styles button}> 53 \<text style={styles button label}>{"sign in"}\</text> 54 \</view> 55 \</touchableopacity> 56 \</view> 57 \</view> 58 \</formikprovider> 59 ); 60 }; 61	 62 export default signin; esegui la tua applicazione e vedrai uno schermo come mostrato di seguito per favore, guarda la funzione onsubmit nota che la relay mutation sarà all'interno di questa funzione ancora una volta, non è un problema se l'applicazione non utilizza formik una volta che stai implementando un componente form, la relay mutation deve essere chiamata solo all'interno della funzione di invio 2 creazione della mutation utilizzando il principio di colocazione, creiamo una nuova cartella chiamata mutations il più vicino possibile al componente form se vuoi saperne di più sulla colocazione, vai alla guida all'inizio nell'immagine qui sotto, puoi vedere il principio di colocazione in pratica tutto ciò che è correlato al componente è vicino ad esso una cartella avvolge il componente login e all'interno di essa, creerai un'altra cartella chiamata mutations nella cartella mutations, creerai la relay mutation questo schema funziona perfettamente su grandi progetti ogni volta che hai una nuova mutazione, mettila vicino al componente che la utilizzerà all'interno di questa cartella, creerai un nuovo file chiamato loginmutation js loginmutation js secondo la nostra guida al lavoro con gli utenti, dove abbiamo spiegato le mutazioni relay, creerai una funzione di commit, come mostrato di seguito 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3	 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11	 12 export default { 13 commit, 14 }; prima di tornare al componente del modulo, creiamo la nostra variabile che riceverà il frammento graphql, rappresentante la mutazione il frammento graphql è ciò che il relay compiler leggerà e abbinerà con schema graphql prima della commitmutation, copia e incolla il seguente codice 1 const mutation = graphql` 2 mutation loginmutation($input logininput!) { 3 login(input $input) { 4 viewer { 5 user { 6 id 7 username 8 createdat 9 } 10 sessiontoken 11 } 12 } 13 } 14 `; file finale 1 import { commitmutation, graphql } from 'react relay'; 2	 3 const mutation = graphql` 4 mutation loginmutation($input logininput!) { 5 login(input $input) { 6 viewer { 7 user { 8 id 9 createdat 10 updatedat 11 username 12 } 13 sessiontoken 14 } 15 } 16 } 17 `; 18	 19 function commit({ environment, input, oncompleted, onerror }) { 20 const variables = { input }; 21	 22 commitmutation(environment, { 23 mutation, 24 variables, 25 oncompleted, 26 onerror, 27 }); 28 } 29	 30 export default { 31 commit, 32 }; poiché il frammento graphql rappresenta il backend, per ottenere il codice della mutazione relay, puoi andare al back4app graphql cookbook e trovare il frammento esegui yarn relay yarn relay per generare la nuova mutazione e aggiornare i file se tutto va bene, i tipi di mutazione verranno generati e potrai procedere 3 implementa la funzione on submit il passaggio di invio è il più importante qui è dove avviene la magia della mutazione relay questo passaggio ottiene i valori del modulo da formik se l'applicazione non utilizza formik, i valori devono essere disponibili qui indipendentemente dal modo in cui vengono ottenuti tornando al componente del modulo, iniziamo l'implementazione della mutazione relay importa la mutazione 1 import loginmutation from ' /mutations/loginmutation'; all'interno della funzione onsubmit, inizia a creare le variabili di input 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 const input = { 4 username, 5 password, 6 }; 7 } i valori sono iniettati da formik qui, se non stai usando formik, i valori probabilmente arriveranno tramite l'osubmit nativo del modulo o come preferisci infine, chiama la mutazione passando tutte le props (ricorda di importarle) 1 loginmutation commit({ 2 environment, 3 input, 4 oncompleted (response) => { 5 if(!response? login || response? login === null) { 6 alert('error while logging'); 7 return; 8 } 9	 10 const { viewer } = response? login; 11 const { sessiontoken, user } = viewer; 12	 13 if (sessiontoken !== null) { 14 setuserlogged(user); 15 alert(`user ${user username} successfully logged`); 16 return; 17 } 18 }, 19 onerror (errors) => { 20 alert(errors\[0] message); 21 }, 22 }); risultato finale di onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 username, 6 password, 7 }; 8	 9 loginmutation commit({ 10 environment, 11 input, 12 oncompleted (response) => { 13 if(!response? login || response? login === null) { 14 alert('error while logging'); 15 return; 16 } 17	 18 const { viewer } = response? login; 19 const { sessiontoken, user } = viewer; 20	 21 if (sessiontoken !== null) { 22 setuserlogged(user); 23 alert(`user ${user username} successfully logged`); 24 return; 25 } 26 }, 27 onerror (errors) => { 28 alert(errors\[0] message); 29 }, 30 }); 31 }; esegui il tuo progetto, registra il tuo utente e poi controllalo nel back4app dashboard la mutazione restituirà i valori dal server una volta restituito il token di sessione, l'applicazione può iniziare a gestirlo test usando l'utente creato nell'ultimo tutorial se tutto funziona correttamente, verrà mostrato un avviso come quello qui sotto gestione degli errori al momento della mutazione di commit, l'applicazione può gestire gli errori in onerror riceverà sempre un array di errori il più comune è che questo array contenga solo un oggetto con il messaggio di errore vedi l'esempio qui sotto basato su questo esempio, sentiti libero di creare la tua gestione degli errori per ora, se viene restituito un errore, lo mostriamo semplicemente tramite un avviso 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, conclusione ora hai un'applicazione con una funzionalità di accesso completamente funzionante nella prossima guida, comprenderai come disconnetterti utilizzando lo stesso approccio utilizzerai anche le mutazioni relay per chiamare il nostro backend