React Native에서 GraphQL로 로그인 구현하기

15 분

relay를 사용한 react native 로그인 샘플 소개 지난 튜토리얼에서는 back4app과 relay를 사용하여 react native 앱에 사용자 가입 기능을 구현했습니다 이 가이드에서는 앱 인증 기능을 보완하는 로그인 메커니즘을 구축할 것입니다 아시다시피, parse는 기본적으로 사용자 클래스인 user를 제공하며, 이는 앱에 필요할 때 사용자를 로그인시키기 위한 준비된 graphql 뮤테이션을 이미 가지고 있습니다 여기서의 흐름은 사용자 가입 튜토리얼과 매우 유사할 것입니다 formik을 사용하여 로그인 화면을 구축한 다음, 이 양식이 relay 뮤테이션을 호출할 것입니다 relay 뮤테이션은 인증 프로세스를 처리하는 back4app 서버와 통신할 것입니다 언제든지 이 프로젝트에 대한 액세스는 github 리포지토리를 통해 스타일과 전체 코드를 확인할 수 있습니다 javascript 예제 리포지토리 목표 이 가이드의 끝에서, 아래와 같이 사용자 로그인 기능이 구현된 react native 애플리케이션을 갖게 될 것입니다 전제 조건 parse server 버전 3 10 이상을 사용하여 back4app에서 생성된 앱 다음의 relay 환경 설정 튜토리얼 간단한 로그인 양식이 있는 앱을 기대하세요 여기서는 사용자 이름과 비밀번호가 있는 양식을 가진 expo 앱을 사용하고 있습니다 이 튜토리얼에서는 react native 프레임워크로 expo를 사용할 것입니다; 이 튜토리얼에서는 기본 구현 언어로 javascript를 사용할 것입니다; 이 튜토리얼에서는 우리의 스타일 css 샘플을 사용할 것입니다; 1 로그인 폼 만들기 애플리케이션에 이미 form 컴포넌트가 있다면 2단계로 넘어가세요 그렇지 않다면, 우리의 보일러플레이트를 따라 하셔도 좋습니다 이 폼은 회원가입 문서에서 사용된 폼과 유사합니다 로그인용으로도 사용할 수 있습니다 구현 방법을 배우고 싶다면 사용자 사용자 가입 을 참조하세요 로그인 폼 코드는 다음과 같아야 합니다 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; 애플리케이션을 실행하면 아래와 같은 화면이 표시됩니다 onsubmit 함수에 주목하세요 relay mutation이 이 함수 안에 있을 것임을 유의하세요 애플리케이션이 formik을 사용하지 않더라도 문제는 없습니다 form component를 구현할 때, relay mutation은 submit 함수 안에서만 호출되면 됩니다 2 뮤테이션 생성하기 colocation 원칙을 사용하여 form component와 가장 가까운 mutations라는 새 폴더를 생성합시다 colocation에 대해 더 알고 싶다면 시작하기 가이드를 참조하세요 아래 이미지에서 colocation 원칙이 실제로 어떻게 적용되는지 볼 수 있습니다 컴포넌트와 관련된 모든 것이 그 근처에 있습니다 login 컴포넌트를 감싸는 폴더가 있으며, 그 안에 mutations라는 또 다른 폴더를 생성합니다 mutations 폴더 안에 relay mutation을 생성할 것입니다 이 패턴은 큰 프로젝트에서 완벽하게 작동합니다 새로운 변형이 생길 때마다 그것을 사용할 구성 요소에 가깝게 두십시오 이 폴더 안에 loginmutation js loginmutation js 라는 새 파일을 만듭니다 relay 변형을 설명한 사용자 작업 가이드에 따라, 아래와 같이 커밋 함수를 생성합니다 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 }; 양식 구성 요소로 돌아가기 전에, 변형을 나타내는 graphql 조각을 받을 변수를 생성합시다 graphql 조각은 relay 컴파일러가 읽고 schema graphql과 일치시킬 것입니다 commitmutation 전에 다음 코드를 복사하여 붙여넣으십시오 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 `; 최종 파일 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 }; graphql 프래그먼트가 백엔드를 나타내므로, relay mutation의 코드를 얻으려면 back4app graphql 요리책 으로 가서 프래그먼트를 찾을 수 있습니다 새로운 뮤테이션을 생성하고 파일을 업데이트하려면 yarn relay yarn relay 를 실행하세요 모든 것이 괜찮다면 뮤테이션의 유형이 생성되고 진행할 수 있습니다 3 제출 함수 구현 제출 단계는 가장 중요합니다 여기서 relay mutation의 마법이 일어납니다 이 단계는 formik에서 양식의 값을 가져옵니다 애플리케이션이 formik을 사용하지 않는 경우, 값은 그들이 얻는 방식과 관계없이 여기에서 사용 가능해야 합니다 폼 컴포넌트로 돌아가서, 릴레이 뮤테이션의 구현을 시작해 보겠습니다 뮤테이션 가져오기 1 import loginmutation from ' /mutations/loginmutation'; onsubmit 함수 내부에서 입력 변수를 생성하기 시작합니다 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 const input = { 4 username, 5 password, 6 }; 7 } 값은 formik에 의해 주입됩니다 여기서 formik을 사용하지 않는 경우, 값은 아마도 폼의 기본 osubmit을 통해 오거나 원하는 대로 올 것입니다 마지막으로, 모든 props를 전달하여 뮤테이션을 호출합니다(가져오는 것을 잊지 마세요) 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 }); 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 }; 프로젝트를 실행하고, 사용자를 등록한 후 back4app 대시보드에서 확인하세요 뮤테이션은 서버에서 값을 반환합니다 세션 토큰이 반환되면 애플리케이션은 이를 관리할 수 있습니다 지난 튜토리얼에서 생성한 사용자를 사용하여 테스트합니다 모든 것이 정상적으로 작동하면 아래와 같은 알림이 표시됩니다 오류 처리 커밋 변이에서 애플리케이션은 onerror에서 오류를 처리할 수 있습니다 항상 오류 배열을 수신합니다 가장 일반적인 경우는 이 배열에 오류 메시지를 포함하는 객체가 하나만 있는 것입니다 아래 예제를 참조하세요 이 예제를 바탕으로 자유롭게 오류 처리를 생성하세요 지금까지 어떤 오류가 반환되면 우리는 단순히 경고로 표시합니다 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, 결론 이제 완전히 작동하는 로그인 기능이 있는 애플리케이션을 갖게 되었습니다 다음 가이드에서는 동일한 접근 방식을 사용하여 로그아웃하는 방법을 이해하게 될 것입니다 또한 relay 변이를 사용하여 백엔드를 호출할 것입니다