Implementierung des Anmeldes mit Relay in React Native

16 min

react native login beispiel mit relay einführung im letzten tutorial haben sie die benutzerregistrierung in ihre react native app mit back4app und relay implementiert in diesem leitfaden werden sie den anmelde mechanismus erstellen, um die authentifizierungsfunktion ihrer app zu ergänzen wie sie vielleicht wissen, bietet parse standardmäßig bereits eine benutzerklasse user, die bereits eine einsatzbereite graphql mutation zum anmelden von benutzern enthält, wenn dies für ihre app erforderlich ist der ablauf hier wird sehr ähnlich sein wie im tutorial zur benutzerregistrierung sie werden einen anmeldebildschirm mit formik erstellen, dann wird dieses formular die relay mutation aufrufen die relay mutation wird mit dem back4app server kommunizieren und den gesamten authentifizierungsprozess abwickeln 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 am ende dieses leitfadens werden sie eine react native anwendung mit der implementierten benutzeranmeldefunktion haben, wie unten gezeigt voraussetzungen eine app, die bei back4app mit der parse server version 3 10 oder höher erstellt wurde sie müssen den tutorial zur einrichtung der relay umgebung erwarten sie eine app mit einem einfachen anmeldeformular hier verwenden wir eine expo app mit einem formular für den benutzernamen und das passwort für dieses tutorial werden wir expo als react native framework verwenden; für dieses tutorial werden wir javascript als unsere standardimplementierungssprache verwenden; für dieses tutorial werden wir unser css stilbeispiel verwenden; 1 anmeldeformular erstellen wenn die anwendung bereits eine formular komponente hat, gehen sie zu schritt 2 andernfalls können sie gerne unserem boilerplate folgen das formular ähnelt dem formular, das im anmelde dokument verwendet wird sie können es auch als grundlage für die anmeldung verwenden bitte gehen sie zu benutzer benutzeranmeldung wenn sie lernen möchten, wie man es implementiert der code für das anmeldeformular sollte so aussehen 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; führen sie ihre anwendung aus, und sie werden einen bildschirm sehen, wie unten gezeigt bitte schauen sie sich die onsubmit funktion an beachten sie, dass die relay mutation innerhalb dieser funktion sein wird es ist erneut kein problem, wenn die anwendung formik nicht verwendet sobald sie eine formular komponente implementieren, muss die relay mutation nur innerhalb der submit funktion aufgerufen werden 2 erstellung der mutation verwenden sie das prinzip der kolokation, um einen neuen ordner namens mutations so nah wie möglich an der formular komponente zu erstellen wenn sie mehr über kolokation erfahren möchten, gehen sie bitte zu erste schritte anleitung im bild unten sehen sie das prinzip der kolokation in der praxis alles, was mit der komponente zu tun hat, ist nah bei ihr ein ordner umschließt die login komponente, und darin erstellen sie einen weiteren ordner namens mutations im ordner mutations erstellen sie die relay mutation dieses muster funktioniert perfekt bei großen projekten jedes mal, wenn sie eine neue mutation haben, platzieren sie sie in der nähe der komponente, die sie verwenden wird in diesem ordner erstellen sie eine neue datei mit dem namen loginmutation js loginmutation js laut unserem leitfaden zur arbeit mit benutzern, in dem wir die relay mutationen erklärt haben, werden sie eine commit funktion erstellen, wie unten gezeigt 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 }; bevor wir zur formular komponente zurückkehren, lassen sie uns unsere variable erstellen, die das graphql fragment empfangen wird, das die mutation darstellt das graphql fragment ist das, was der relay compiler lesen und mit schema graphql abgleichen wird vor der commitmutation kopieren sie den folgenden code und fügen ihn ein 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 `; endgültige datei 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 }; da das graphql fragment das backend repräsentiert, können sie den code der relay mutation erhalten, indem sie zum back4app graphql cookbook gehen und das fragment finden führen sie yarn relay yarn relay aus, um die neue mutation zu generieren und die dateien zu aktualisieren wenn alles in ordnung ist, werden die typen der mutation generiert und sie können fortfahren 3 implementieren sie die on submit funktion der schritt zur einreichung ist der wichtigste hier geschieht die magie der relay mutation dieser schritt erhält die werte des formulars von formik wenn die anwendung formik nicht verwendet, müssen die werte hier unabhängig von der art und weise, wie sie erhalten werden, verfügbar sein zurück zur formular komponente, lassen sie uns mit der implementierung der relay mutation beginnen importieren sie die mutation 1 import loginmutation from ' /mutations/loginmutation'; innerhalb der onsubmit funktion beginnen sie mit der erstellung der eingabevariablen 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 const input = { 4 username, 5 password, 6 }; 7 } die werte werden von formik injiziert hier, wenn sie formik nicht verwenden, kommen die werte wahrscheinlich über das native osubmit des formulars oder wie sie es bevorzugen zuletzt rufen sie die mutation auf und übergeben alle props (denken sie daran, sie zu importieren) 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 }); endergebnis von 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 }; führen sie ihr projekt aus, registrieren sie ihren benutzer und überprüfen sie es dann im back4app dashboard die mutation gibt die werte vom server zurück sobald das sitzungstoken zurückgegeben wird, kann die anwendung beginnen, es zu verwalten testen mit dem benutzer, der im letzten tutorial erstellt wurde wenn alles in ordnung ist, wird eine warnung wie unten angezeigt fehlerbehandlung bei der commit mutation kann die anwendung fehler in onerror behandeln es wird immer ein array von fehlern empfangen am häufigsten enthält dieses array nur ein objekt mit der fehlermeldung siehe das folgende beispiel basierend auf diesem beispiel können sie gerne ihre eigene fehlerbehandlung erstellen bis jetzt, wenn ein fehler zurückgegeben wird, zeigen wir ihn einfach durch einen alert an 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, fazit sie haben jetzt eine anwendung mit einer vollständig funktionierenden anmeldefunktion im nächsten leitfaden werden sie verstehen, wie sie sich mit demselben ansatz abmelden sie werden auch relay mutationen verwenden, um unser backend aufzurufen