Аутентификация React Native с Relay на Back4App

аутентификация react native с использованием relay введение используя graphql api, после регистрации или входа пользователя, вы получите токен сессии, который можете использовать для получения информации о вошедшем пользователе в любое время токен сессии поступает из мутации relay вы найдете примеры мутаций relay в предыдущих руководствах по https //www back4app com/docs/parse graphql/graphql sign up или https //www back4app com/docs/parse graphql/graphql login значение токена сессии представляет текущую сессию и контролирует, аутентифицирован ли пользователь или нет в момент аутентификации это значение должно быть в заголовках параметров в relay мы используем environment для обработки заголовков параметров, поэтому вы должны вставить токен сессии в этот файл после добавления сессии в заголовки каждый запрос будет аутентифицирован back4app, и пользователь получит доступ к частным ресурсам в любое время вы можете получить доступ к этому проекту через наши репозитории на github, чтобы ознакомиться со стилями и полным кодом https //github com/templates back4app/react native graphql relay js users цель аутентифицировать запросы пользователей на back4app, используя токен сессии в заголовках предварительные условия приложение, созданное на back4app с использованием parse server версии 3 10 или выше вы должны завершить https //www back4app com/docs/react native/graphql/relay setup вы должны завершить https //www back4app com/docs/react native/graphql/users/react native login sample для этого учебника мы будем использовать expo в качестве фреймворка react native; для этого учебника мы будем использовать javascript в качестве нашего языка реализации по умолчанию; для этого учебника мы будем использовать async storage; 1 установите async storage после завершения учебников https //www back4app com/docs/parse graphql/graphql sign up или https //www back4app com/docs/parse graphql/graphql login , ваше приложение получит токен сессии давайте сохраним токен, используя async storage следуйте официальной документации, чтобы установить библиотеку async storage в вашем приложении вы можете использовать async storage, redux или ваше предпочтительное решение для локального хранения вам нужно только убедиться, что это значение будет доступно в окружении 2 получите токен давайте продолжим, используя https //www back4app com/docs/parse graphql/graphql login вам нужно будет получить токен сессии и сохранить это значение в вашем приложении, используя async storage начните с изменения управления состоянием токена сессии с помощью хука usestate на async storage первый шаг создать функцию внутри файла окружения для получения токена сессии из async storage импортируйте async storage 1 import asyncstorage from '@react native async storage/async storage'; теперь создайте функцию 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 сохраните токен на стороне клиента теперь давайте улучшим компонент входа, чтобы сохранить токен сессии вместо управления им с помощью хука usestate компонент теперь будет сохранять состояние входа даже при перезагрузке приложения, потому что токен сессии сохранен откройте компонент входа внутри oncompleted из onsubmit сохраните токен сессии в async storage, получив следующий результат затем улучшите 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 }, после этого, внутри объявления компонента signin, создайте новый usestate для токена сессии 1 const \[sessiontoken, setsessiontoken] = usestate(null); добавьте useeffect, который будет вызываться каждый раз, когда компонент монтируется, и проверьте, есть ли токен сессии (импортируйте getsessiontoken getsessiontoken из файла окружения 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); наконец, давайте снова изменим oncompleted, чтобы теперь обрабатывать новый usestate, получая новые строки кода 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 }, удалите usestate для пользователя, вошедшего в систему, обе строки ниже из соответствующих мест 1 const \[userlogged, setuserlogged] = usestate(null); и 1 setuserlogged(user); мы избегаем предупреждений и начинаем устанавливать информацию о пользователе и токене в usestate, за которым следует сохранение токена в async storage измените if, чтобы теперь обрабатывать токен сессии 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 финальный результат компонента signin после всех изменений компонент signin будет похож на приведенный ниже 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 тестирование пора протестировать новые изменения компонента sign in чтобы убедиться, что ни один пользователь не вошел в систему, закройте приложение и откройте его снова также не забудьте очистить async storage вы можете сделать это, вызвав asyncstorage clear() asyncstorage clear() метод и очистить текущее состояние войдите снова, и вы увидите следующее сообщение 6 установите токен сессии в среде relay теперь давайте вставим токен сессии в запросы приложения к back4app graphql api внутри файла environment получите sessiontoken и добавьте его в объект заголовков вы должны передать sessiontoken в переменной x parse session token в заголовках здесь мы повторно используем getsessiontoken getsessiontoken функцию, которую мы уже создали создайте функцию перед fetchquery fetchquery функцией и вставьте следующий код 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 }; функция выше получает токен сессии только в том случае, если он существует теперь добавьте его в объект заголовков, деструктурируя его 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 }; сразу под заголовками есть блок try catch для выполнения запроса давайте установим условие после запроса, которое будет обрабатывать случай, когда http статус запроса будет 401 это будет означать, что текущий токен больше не действителен поэтому мы очистим хранилище и завершим текущего пользователя 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 } теперь ваше приложение может начать извлекать частные ресурсы из бэкенда back4app и если токен сессии не существует, это не приведет к ошибке, потому что мы его не передадим не забудьте настроить механизмы безопасности, чтобы гарантировать желаемый уровень доступа для пользователей чтобы лучше понять, перейдите по ссылке https //docs parseplatform org/js/guide/#security от parse заключение в этом руководстве вы сохранили токен сессии, используя асинхронное хранилище, и теперь можете начать извлекать ресурсы, которые требуют входа пользователя в следующем документе давайте подготовим компонент, который будет извлекать информацию о вошедшем пользователе и прекратим использовать usestate для ее отображения для регистрации пользователя вы можете следовать тому же подходу, что и в этом учебнике, чтобы обрабатывать токен сессии