Relay와 Back4App을 통한 React Native 인증 구현

relay를 사용한 react native 인증 소개 graphql api를 사용하여 사용자가 가입하거나 로그인한 후, 언제든지 로그인한 사용자를 검색하는 데 사용할 수 있는 세션 토큰을 받게 됩니다 세션 토큰은 relay mutation에서 생성됩니다 이러한 relay mutation 예제는 이전 가이드에서 찾을 수 있습니다 가입하기 또는 로그인하기 세션 토큰 값은 현재 세션을 나타내며 사용자가 인증되었는지 여부를 제어합니다 인증 순간에 이 값은 헤더 매개변수에 있어야 합니다 relay에서는 환경을 사용하여 헤더 매개변수를 처리하므로 이 파일에 세션 토큰을 삽입해야 합니다 헤더에 세션을 추가한 후, 각 요청은 back4app에 의해 인증되며 사용자는 개인 리소스에 접근할 수 있습니다 언제든지 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 javascript 예제 저장소 목표 헤더 매개변수에 세션 토큰을 사용하여 back4app에서 사용자 요청을 인증합니다 전제 조건 parse server 버전 3 10 이상을 사용하여 back4app에서 생성된 앱입니다 다음의 relay 환경 설정 튜토리얼 다음의 relay를 사용한 react native 로그인 샘플 이 튜토리얼에서는 expo를 react native 프레임워크로 사용할 것입니다; 이 튜토리얼에서는 javascript를 기본 구현 언어로 사용할 것입니다; 이 튜토리얼에서는 async storage를 사용할 것입니다; 1 async storage 설치 튜토리얼을 마친 후 회원가입 또는 로그인 , 앱은 세션 토큰을 받게 됩니다 async storage를 사용하여 토큰을 저장합시다 공식 문서를 따라 앱에 async storage 라이브러리를 설치하세요 async storage, redux 또는 선호하는 로컬 저장 솔루션을 사용할 수 있습니다 이 값이 환경에서 사용 가능하다는 것만 확인하세요 2 토큰 가져오기 다음의 마지막 가이드 코드 세션 토큰을 가져오고 이 값을 async storage를 사용하여 애플리케이션에 지속시켜야 합니다 세션 토큰 상태 관리를 usestate 훅에서 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 훅을 사용하여 관리하는 대신 지속하도록 로그인 컴포넌트를 개선합시다 이 컴포넌트는 세션 토큰이 지속되기 때문에 앱을 다시 로드할 때도 로그인 상태를 유지합니다 로그인 컴포넌트를 엽니다 onsubmit의 oncompleted 내부에서 세션 토큰을 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 }, \[]); 마지막으로, 이제 새로운 usestate를 처리하기 위해 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 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 릴레이 환경에 세션 토큰 설정하기 이제, back4app graphql api에 대한 애플리케이션의 요청에 세션 토큰을 삽입해 보겠습니다 환경 파일 안에서 sessiontoken을 가져와서 headers 객체에 추가합니다 headers에서 변수 x parse session token에 sessiontoken을 전달해야 합니다 여기서 우리는 이미 생성한 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 }; 위의 함수는 세션 토큰이 존재할 경우에만 이를 가져옵니다 이제 이를 headers 객체에 구조 분해하여 추가합니다 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 }; headers 바로 아래에 요청을 위한 try catch가 있습니다 요청 후 http 상태가 401일 때 처리할 if를 설정해 보겠습니다 이는 현재 토큰이 더 이상 유효하지 않음을 의미합니다 따라서, 우리는 저장소를 지우고 현재 사용자를 종료할 것입니다 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 백엔드에서 개인 리소스를 검색할 수 있습니다 그리고 세션 토큰이 존재하지 않으면, 우리는 그것을 전달하지 않기 때문에 중단되지 않을 것입니다 사용자에게 원하는 수준의 액세스를 보장하기 위해 보안 메커니즘을 구성하는 것을 잊지 마십시오 액세스를 더 잘 이해하기 위해 다음 링크를 확인하십시오 보안 문서 에서 parse 결론 이 가이드에서는 비동기 저장소를 사용하여 세션 토큰을 저장했으며, 이제 로그인한 사용자가 필요한 리소스를 검색할 수 있습니다 다음 문서에서는 로그인한 사용자에 대한 정보를 검색하고 이를 표시하기 위해 usestate를 사용하지 않는 컴포넌트를 준비해 보겠습니다 사용자 가입을 위해 이 튜토리얼의 세션 토큰을 처리하는 동일한 접근 방식을 따를 수 있습니다