리액트 네이티브: Parse 서버에서 이메일 인증 구현

11 분

리액트 네이티브를 위한 사용자 이메일 인증 소개 제한 없는 사용자 등록이 가능한 모바일 앱은 보안 문제와 스팸을 초래할 수 있습니다 이메일 인증은 귀하의 앱에 등록된 모든 사용자가 유효한 이메일 주소를 가지고 있도록 요구함으로써 이러한 상황을 방지하는 데 도움이 될 수 있습니다 이 가이드에서는 \back4app\ 서버에서 이메일 인증을 설정하는 방법을 배우게 됩니다 이 서버는 자동으로 이 인증을 처리합니다 또한 귀하의 애플리케이션에서 사용자가 실제로 인증되었는지 확인하는 방법도 배우게 됩니다 언제든지 이 튜토리얼로 구축된 전체 android 프로젝트에 접근할 수 있습니다 github 리포지토리에서 확인하세요 코틀린 예제 리포지토리 https //github com/templates back4app/android parse sdk kotlin 자바 예제 리포지토리 https //github com/templates back4app/android parse sdk java 목표 리액트 네이티브 앱에서 parse를 사용하여 apple sign in을 통한 사용자 로그인 기능을 구축하는 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 react native 앱이 생성되고 back4app에 연결됨 https //www back4app com/docs/react native/parse sdk/react native sdk 이전 가이드를 완료하여 parse 사용자 클래스에 대한 더 나은 이해를 가질 수 있습니다 https //www back4app com/docs/react native/parse sdk/working with users/react native login 1 이메일 인증 구성 이제 back4app에서 parse 서버를 구성하여 사용자 이메일 인증을 요구합니다 back4app 대시보드 https //dashboard back4app com/apps 를 열고 서버 설정 제어판으로 이동합니다 \인증 이메일\ 기능을 찾아 \설정\ 계속 진행하여 \사용자 이메일 확인\ 및 \이메일이 확인되지 않은 경우 로그인 방지\ 체크박스를 확인하세요 이 화면에서 확인 이메일 메시지 본문 및 회신 주소와 같은 설정을 자유롭게 업데이트하고 사용자 정의할 수 있습니다 이 설정을 완료한 후, 당신의 \parse\ 서버 인스턴스는 이제 사용자 이메일 확인을 자동으로 처리합니다 참고 \이메일이 확인되지 않은 경우 로그인 방지\ 기능을 활성화하는 것은 필수는 아니지만, 새로운 사용자가 앱에서 어떤 작업을 수행하기 전에 확인하도록 요구하는 것이 좋은 관행입니다 2 사용자 등록 구성 요소 업데이트 이메일 확인으로 사용자를 올바르게 등록하기 위해 \userregistration\ 구성 요소에 몇 가지 변경을 해야 합니다 먼저, 사용자의 이메일 값을 위한 새로운 입력 필드를 추가하세요 이제 \userregistration js\ ( \userregistration tsx\ typescript를 사용하는 경우) 파일에서 사용자 데이터에 이메일 속성을 설정하고 있습니다 userregistration js 1 const dousersignup = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 const emailvalue = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; userregistration tsx 1 const dousersignup = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 const emailvalue string = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser parse user) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error object) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; 사용자가 이메일을 확인하지 않고 로그인하지 않도록 되어 있으므로, 등록 후 오류를 피하기 위해 그를 로그아웃해야 합니다 \세션\ 을 테스트하고 이제 새 사용자를 등록한 후 다음과 같은 메시지를 볼 수 있어야 합니다 새 사용자를 성공적으로 등록한 후, parse는 다음과 같은 확인 링크가 포함된 이메일을 보냅니다 3 userlogin 구성 요소 설정하기 당신의 \parse\ 서버는 이제 확인된 사용자가 아닌 경우 자동 로그인 시도를 차단하고 있습니다 그러나 확인되지 않은 사용자가 애플리케이션에 접근할 수 있는 방법이 없도록 하는 것도 좋은 관행이므로, \userlogin\ 구성 요소에 새로운 조건을 추가합시다 \userlogin js\ ( \userlogin tsx\ 를 typescript를 사용하는 경우) 파일에 추가합니다 userlogin js 1 const douserlogin = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; userregistration tsx 1 const douserlogin = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser parse user) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser parse user = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error object) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 4 이메일 인증 테스트 계속해서 애플리케이션을 테스트하고, 이전에 생성한 인증되지 않은 사용자로 로그인해 보세요 이메일에서 인증 링크를 클릭하지 않았다면, 다음과 같은 오류 메시지를 받아야 합니다 확인 링크를 클릭한 후, 로그인할 수 있으며 홈 화면으로 리디렉션됩니다 또한 back4app 대시보드 내의 \사용자\ 테이블을 열고 \emailverified\ 열을 수동으로 편집하여 사용자를 확인할 수 있습니다 결론 이 가이드의 끝에서, 사용자 이메일 확인을 요구하도록 \parse\ 서버를 설정하는 방법과 react native 애플리케이션 내에서 이 제한을 시행하는 방법을 배웠습니다 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다