Authentification Relay React Native avec GraphQL et AsyncStorage

18 min

authentification react native utilisant relay introduction en utilisant l'api graphql, après l'inscription ou la connexion d'un utilisateur, vous recevrez un jeton de session que vous pouvez utiliser pour récupérer l'utilisateur connecté à tout moment le jeton de session provient d'une mutation relay vous trouverez ces exemples de mutation relay dans les guides précédents de inscription ou connexion la valeur du jeton de session représente la session actuelle et contrôle si l'utilisateur est authentifié ou non au moment de l'authentification, cette valeur doit commencer à être dans les paramètres d'en tête sur relay, nous utilisons l'environnement pour gérer les paramètres d'en tête, donc vous devez insérer le jeton de session dans ce fichier après avoir ajouté la session aux en têtes, chaque requête sera authentifiée par back4app et l'utilisateur pourra accéder aux ressources privées à tout moment, vous pouvez accéder à ce projet via nos dépôts github pour consulter les styles et le code complet dépôt d'exemple javascript objectif authentifier les requêtes des utilisateurs sur back4app en utilisant le jeton de session dans les paramètres d'en tête conditions préalables une application créée sur back4app utilisant la version 3 10 ou supérieure de parse server vous devez conclure le tutoriel de configuration de l'environnement relay vous devez conclure le exemple de connexion react native utilisant relay pour ce tutoriel, nous allons utiliser expo comme framework react native ; pour ce tutoriel, nous allons utiliser javascript comme notre langage d'implémentation par défaut ; pour ce tutoriel, nous allons utiliser async storage ; 1 installer async storage après avoir conclu les tutoriels s'inscrire ou se connecter , votre application recevra un jeton de session stockons le jeton en utilisant async storage suivez la documentation officielle pour installer la bibliothèque async storage sur votre application vous pouvez utiliser le stockage asynchrone, redux ou votre solution de stockage local préférée assurez vous simplement que cette valeur sera disponible dans l'environnement 2 récupérer le jeton allons y en utilisant le dernier code du guide vous devrez obtenir le jeton de session et persister cette valeur dans votre application en utilisant async storage commencez par changer la gestion de l'état du jeton de session du hook usestate à async storage la première étape consiste à créer une fonction dans le fichier d'environnement pour récupérer le jeton de session à partir d'async storage importer le stockage asynchrone 1 import asyncstorage from '@react native async storage/async storage'; maintenant, créez la fonction 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 enregistrer le jeton côté client améliorons maintenant le composant de connexion pour persister le jeton de session au lieu de le gérer en utilisant le hook usestate le composant conservera maintenant l'état connecté même lors du rechargement de l'application car il a le jeton de session persistant ouvrez le composant de connexion à l'intérieur de oncompleted de onsubmit, enregistrez le jeton de session dans le stockage asynchrone en obtenant le résultat suivant puis améliorez le 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 }, après, à l'intérieur de la déclaration du composant signin, créez un nouveau usestate pour le jeton de session 1 const \[sessiontoken, setsessiontoken] = usestate(null); ajoutez un useeffect qui sera appelé chaque fois que le composant est monté et vérifiez s'il a un jeton de session (importez le getsessiontoken getsessiontoken du fichier d'environnement 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); enfin, changeons à nouveau le oncompleted pour maintenant gérer le nouveau usestate, en obtenant les nouvelles lignes de code 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 }, supprimez l'utilisation de usestate pour l'utilisateur connecté, les deux lignes ci dessous des emplacements respectifs 1 const \[userlogged, setuserlogged] = usestate(null); et 1 setuserlogged(user); nous évitons l'alerte et commençons à définir les informations de l'utilisateur et le token dans un usestate suivi de l'enregistrement du token dans async storage changez le if pour gérer maintenant le token de session 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 résultat final du composant signin après tous les changements, le composant signin sera similaire à ce qui suit 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 test il est temps de tester les nouvelles modifications du composant sign in pour s'assurer qu'aucun utilisateur n'est connecté, fermez votre application et ouvrez la à nouveau n'oubliez pas également de vider le stockage asynchrone vous pouvez le faire en appelant le asyncstorage clear() asyncstorage clear() méthode et en vidant l'état actuel connectez vous à nouveau et vous verrez le message suivant 6 définir le jeton de session sur l'environnement relay maintenant, insérons le jeton de session dans les requêtes de l'application vers l'api graphql de back4app dans le fichier environment, récupérez le sessiontoken et ajoutez le à l'objet headers vous devez passer le sessiontoken dans la variable x parse session token dans les headers ici, nous allons réutiliser le getsessiontoken getsessiontoken fonction que nous avons déjà créée créez une fonction avant la fetchquery fetchquery fonction et collez le code suivant 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 }; la fonction ci dessus récupère le jeton de session uniquement s'il existe maintenant, ajoutez le à l'objet headers en le décomposant 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 }; juste en dessous des headers, il y a le try catch pour faire la requête définissons un if après la requête qui gérera lorsque le statut http de la requête sera 401 cela signifiera que le jeton actuel n'est plus valide donc, nous allons vider le stockage et tuer l'utilisateur actuel 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 } maintenant, votre application peut commencer à récupérer des ressources privées du backend back4app et, si le jeton de session n'existe pas, cela ne posera pas de problème car nous ne le passerons pas n'oubliez pas de configurer les mécanismes de sécurité pour garantir le niveau d'accès souhaité pour les utilisateurs pour mieux comprendre, accédez au lien documentation de sécurité de parse conclusion dans ce guide, vous avez enregistré le jeton de session en utilisant le stockage asynchrone et, maintenant, vous pouvez commencer à récupérer des ressources qui nécessitent un utilisateur connecté dans le prochain document, préparons un composant qui récupérera les informations sur l'utilisateur connecté et cessera d'utiliser un usestate pour les afficher pour l'inscription de l'utilisateur, vous pouvez suivre la même approche que ce tutoriel pour gérer le jeton de session