--- title: 리액트 네이티브: Parse 서버에서 이메일 인증 구현 slug: docs-kr/react-native/parse-sdk/working-with-users/react-native-email-verification description: 리액트 네이티브 앱에서 Parse를 통해 사용자 이메일 인증을 설정 및 검증하는 방법을 배웁니다. 보안을 강화하고 스팸을 줄이세요. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-19T16:26:46.380Z --- # 리액트 네이티브를 위한 사용자 이메일 인증 ## 소개 제한 없는 사용자 등록이 가능한 모바일 앱은 보안 문제와 스팸을 초래할 수 있습니다. 이메일 인증은 귀하의 앱에 등록된 모든 사용자가 유효한 이메일 주소를 가지고 있도록 요구함으로써 이러한 상황을 방지하는 데 도움이 될 수 있습니다. 이 가이드에서는 `Back4App` 서버에서 이메일 인증을 설정하는 방법을 배우게 됩니다. 이 서버는 자동으로 이 인증을 처리합니다. 또한 귀하의 애플리케이션에서 사용자가 실제로 인증되었는지 확인하는 방법도 배우게 됩니다. ::embed[]{url="https://www.youtube.com/embed/5uR3DNymCOQ"} :::hint{type="success"} 언제든지 이 튜토리얼로 구축된 전체 Android 프로젝트에 접근할 수 있습니다. GitHub 리포지토리에서 확인하세요. - [코틀린 예제 리포지토리](https://github.com/templates-back4app/Android-Parse-Sdk-Kotlin) - [자바 예제 리포지토리](https://github.com/templates-back4app/Android-Parse-Sdk-Java) ::: ## 목표 리액트 네이티브 앱에서 Parse를 사용하여 Apple Sign-in을 통한 사용자 로그인 기능을 구축하는 것입니다. ## 전제 조건 :::hint{type="info"} **이 튜토리얼을 완료하려면 다음이 필요합니다:** - 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)를 열고 서버 설정 제어판으로 이동합니다. `인증 이메일` 기능을 찾아 `설정`: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/oTwCSbxk3Su9_KA4QnS2v_image.png) 계속 진행하여 `사용자 이메일 확인` 및 `이메일이 확인되지 않은 경우 로그인 방지` 체크박스를 확인하세요. 이 화면에서 확인 이메일 메시지 본문 및 회신 주소와 같은 설정을 자유롭게 업데이트하고 사용자 정의할 수 있습니다. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/b03A-sFGUltWeWWX2YxNJ_image.png) 이 설정을 완료한 후, 당신의 `Parse` 서버 인스턴스는 이제 사용자 이메일 확인을 자동으로 처리합니다. :::hint{type="info"} **참고:** `이메일이 확인되지 않은 경우 로그인 방지` 기능을 활성화하는 것은 필수는 아니지만, 새로운 사용자가 앱에서 어떤 작업을 수행하기 전에 확인하도록 요구하는 것이 좋은 관행입니다. ::: ## 2 - 사용자 등록 구성 요소 업데이트 이메일 확인으로 사용자를 올바르게 등록하기 위해 `UserRegistration` 구성 요소에 몇 가지 변경을 해야 합니다. 먼저, 사용자의 이메일 값을 위한 새로운 입력 필드를 추가하세요. 이제 `UserRegistration.js` (`UserRegistration.tsx` TypeScript를 사용하는 경우) 파일에서 사용자 데이터에 이메일 속성을 설정하고 있습니다: :::CodeblockTabs UserRegistration.js ```javascript 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 ```typescript 1 const doUserSignUp = async function (): Promise { 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 }; ``` ::: 사용자가 이메일을 확인하지 않고 로그인하지 않도록 되어 있으므로, 등록 후 오류를 피하기 위해 그를 로그아웃해야 합니다.`세션`을 테스트하고 이제 새 사용자를 등록한 후 다음과 같은 메시지를 볼 수 있어야 합니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/29Q1PvXvl7wb0f4So0JXY_image.png" size="50" width="355" height="727" position="center" showCaption="false"} 새 사용자를 성공적으로 등록한 후, Parse는 다음과 같은 확인 링크가 포함된 이메일을 보냅니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/AeGAA9vYGT9JAl4IQOZX6_image.png) ## 3 - UserLogIn 구성 요소 설정하기 당신의 `Parse` 서버는 이제 확인된 사용자가 아닌 경우 자동 로그인 시도를 차단하고 있습니다. 그러나 확인되지 않은 사용자가 애플리케이션에 접근할 수 있는 방법이 없도록 하는 것도 좋은 관행이므로, `UserLogIn` 구성 요소에 새로운 조건을 추가합시다. `UserLogIn.js` (`UserLogIn.tsx`를 TypeScript를 사용하는 경우) 파일에 추가합니다: :::CodeblockTabs UserLogIn.js ```javascript 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 ```typescript 1 const doUserLogIn = async function (): Promise { 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 - 이메일 인증 테스트 계속해서 애플리케이션을 테스트하고, 이전에 생성한 인증되지 않은 사용자로 로그인해 보세요. 이메일에서 인증 링크를 클릭하지 않았다면, 다음과 같은 오류 메시지를 받아야 합니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/1KPZT5QNCd02KeL14G29P_image.png" size="50" width="359" height="731" position="center" showCaption="false"} 확인 링크를 클릭한 후, 로그인할 수 있으며 홈 화면으로 리디렉션됩니다. 또한 Back4App 대시보드 내의 `사용자` 테이블을 열고 `emailVerified` 열을 수동으로 편집하여 사용자를 확인할 수 있습니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/GQAvbFIhdqQ6r5QLR8czE_image.png) ## 결론 이 가이드의 끝에서, 사용자 이메일 확인을 요구하도록 `Parse` 서버를 설정하는 방법과 React Native 애플리케이션 내에서 이 제한을 시행하는 방법을 배웠습니다. 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다.