React Native Authentifizierung mit Relay und Async Storage

react native authentifizierung mit relay einführung mit der graphql api erhalten sie nach der anmeldung oder dem einloggen eines benutzers ein sitzungstoken, das sie verwenden können, um den angemeldeten benutzer jederzeit abzurufen das sitzungstoken stammt von einer relay mutation sie finden diese relay mutationsbeispiele in den vorherigen anleitungen zu anmelden oder einloggen der wert des sitzungstokens repräsentiert die aktuelle sitzung und steuert, ob der benutzer authentifiziert ist oder nicht zum zeitpunkt der authentifizierung muss dieser wert in den header parametern vorhanden sein in relay verwenden wir die umgebung, um die header parameter zu verwalten, daher sollten sie das sitzungstoken in diese datei einfügen nachdem das sitzungstoken zu den headern hinzugefügt wurde, wird jede anfrage von back4app authentifiziert und der benutzer hat zugriff auf die privaten ressourcen jederzeit können sie auf dieses projekt über unsere github repositories zugreifen, um die stile und den vollständigen code zu überprüfen javascript beispiel repository ziel authentifizieren sie die benutzeranfragen auf back4app mit dem sitzungstoken in den header parametern voraussetzungen eine app, die bei back4app mit der parse server version 3 10 oder höher erstellt wurde sie müssen das tutorial zur einrichtung der relay umgebung sie müssen das react native login beispiel mit relay für dieses tutorial verwenden wir expo als react native framework; für dieses tutorial verwenden wir javascript als unsere standardimplementierungssprache; für dieses tutorial verwenden wir async storage; 1 installieren sie async storage nachdem sie die tutorials abgeschlossen haben, registrierung oder anmeldung , erhält ihre app ein sitzungstoken lassen sie uns das token mit async storage speichern folgen sie den offiziellen dokumenten, um die async storage bibliothek in ihrer app zu installieren sie können async storage, redux oder ihre bevorzugte lokale speicherlösung verwenden stellen sie nur sicher, dass dieser wert in der umgebung verfügbar ist 2 token abrufen lassen sie uns mit dem letzten leitfaden code sie müssen das sitzungstoken abrufen und diesen wert in ihrer anwendung mit async storage speichern beginnen sie damit, das sitzungs token statusmanagement von usestate hook auf async storage zu ändern der erste schritt besteht darin, eine funktion in der umgebungsdatei zu erstellen, um das sitzungstoken aus async storage abzurufen importiere den async storage 1 import asyncstorage from '@react native async storage/async storage'; erstelle jetzt die funktion 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 speichere das token auf der client seite lass uns jetzt die sign in komponente verbessern, um das sitzungstoken zu speichern, anstatt es mit dem usestate hook zu verwalten die komponente wird nun den angemeldeten zustand beibehalten, selbst wenn die app neu geladen wird, da das sitzungstoken gespeichert ist öffne die sign in komponente innerhalb von oncompleted von onsubmit, speichere das sitzungstoken im async storage und erhalte folgendes ergebnis verbessere dann 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 }, nachdem, innerhalb der deklaration der signin komponente, erstelle einen neuen usestate für das sitzungstoken 1 const \[sessiontoken, setsessiontoken] = usestate(null); füge einen useeffect hinzu, der jedes mal aufgerufen wird, wenn die komponente gemountet wird, und überprüfe, ob ein sitzungstoken vorhanden ist (importiere die getsessiontoken getsessiontoken aus der umgebungsdatei 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); zuletzt ändern wir das oncompleted, um jetzt den neuen usestate zu behandeln, indem wir die neuen codezeilen erhalten 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 }, entfernen sie den usestate für den angemeldeten benutzer, die beiden zeilen unten aus den jeweiligen stellen 1 const \[userlogged, setuserlogged] = usestate(null); und 1 setuserlogged(user); wir vermeiden den alert und beginnen, die informationen des benutzers und das token in einem usestate zu setzen, gefolgt von der speicherung des tokens im async storage ändern sie die if anweisung, um jetzt das sitzungstoken zu verarbeiten 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 endergebnis der signin komponente nach allen änderungen wird die signin komponente ähnlich wie unten aussehen 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 testen es ist zeit, die neuen änderungen der sign in komponente zu testen um sicherzustellen, dass kein benutzer eingeloggt ist, beenden sie ihre anwendung und öffnen sie sie erneut denke auch daran, den async storage zu leeren du kannst dies tun, indem du die asyncstorage clear() asyncstorage clear() methode aufrufst und den aktuellen zustand leerst melde dich erneut an und du wirst die folgende nachricht sehen 6 setzen sie das sitzungstoken in der relay umgebung jetzt fügen wir das sitzungstoken in die anfragen der anwendung an die back4app graphql api ein im umgebungsdatei holen sie das sessiontoken und fügen es dem header objekt hinzu sie sollten das sessiontoken in der variablen x parse session token im header übergeben hier werden wir die getsessiontoken getsessiontoken funktion wiederverwenden, die wir bereits erstellt haben erstellen sie eine funktion vor der fetchquery fetchquery funktion und fügen sie den folgenden code ein 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 }; die obige funktion ruft das sitzungstoken nur ab, wenn es existiert fügen sie es jetzt dem header objekt hinzu, indem sie es destrukturieren 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 }; direkt unter den headern gibt es den try catch, um die anfrage zu stellen lassen sie uns ein if nach der anfrage setzen, das behandelt, wenn der http status der anfrage 401 ist dies bedeutet, dass das aktuelle token nicht mehr gültig ist daher werden wir den speicher leeren und den aktuellen benutzer abmelden 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 } jetzt kann ihre anwendung beginnen, private ressourcen vom back4app backend abzurufen und wenn das sitzungstoken nicht existiert, wird es nicht brechen, da wir es nicht übergeben vergessen sie nicht, die sicherheitsmechanismen zu konfigurieren, um das gewünschte zugriffslevel für benutzer zu gewährleisten um besser zu verstehen, besuchen sie den link sicherheitsdokumente von parse fazit in diesem leitfaden haben sie das sitzungstoken mit asynchronem speicher gespeichert und können jetzt beginnen, ressourcen abzurufen, die einen angemeldeten benutzer benötigen im nächsten dokument bereiten wir eine komponente vor, die die informationen über den angemeldeten benutzer abruft und aufhört, usestate zu verwenden, um sie anzuzeigen für die benutzerregistrierung können sie denselben ansatz wie in diesem tutorial verwenden, um das sitzungstoken zu verwalten