리액트 네이티브: Parse 서버에서 이메일 인증 구현
리액트 네이티브를 위한 사용자 이메일 인증
소개
제한 없는 사용자 등록이 가능한 모바일 앱은 보안 문제와 스팸을 초래할 수 있습니다. 이메일 인증은 귀하의 앱에 등록된 모든 사용자가 유효한 이메일 주소를 가지고 있도록 요구함으로써 이러한 상황을 방지하는 데 도움이 될 수 있습니다.
이 가이드에서는 Back4App 서버에서 이메일 인증을 설정하는 방법을 배우게 됩니다. 이 서버는 자동으로 이 인증을 처리합니다. 또한 귀하의 애플리케이션에서 사용자가 실제로 인증되었는지 확인하는 방법도 배우게 됩니다.
언제든지 이 튜토리얼로 구축된 전체 Android 프로젝트에 접근할 수 있습니다. GitHub 리포지토리에서 확인하세요.
목표
리액트 네이티브 앱에서 Parse를 사용하여 Apple Sign-in을 통한 사용자 로그인 기능을 구축하는 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
1 - 이메일 인증 구성
이제 Back4App에서 Parse 서버를 구성하여 사용자 이메일 인증을 요구합니다. Back4App 대시보드를 열고 서버 설정 제어판으로 이동합니다. 인증 이메일 기능을 찾아 설정:

계속 진행하여 사용자 이메일 확인 및 이메일이 확인되지 않은 경우 로그인 방지 체크박스를 확인하세요. 이 화면에서 확인 이메일 메시지 본문 및 회신 주소와 같은 설정을 자유롭게 업데이트하고 사용자 정의할 수 있습니다.

이 설정을 완료한 후, 당신의 Parse 서버 인스턴스는 이제 사용자 이메일 확인을 자동으로 처리합니다.
참고: 이메일이 확인되지 않은 경우 로그인 방지 기능을 활성화하는 것은 필수는 아니지만, 새로운 사용자가 앱에서 어떤 작업을 수행하기 전에 확인하도록 요구하는 것이 좋은 관행입니다.
2 - 사용자 등록 구성 요소 업데이트
이메일 확인으로 사용자를 올바르게 등록하기 위해 UserRegistration 구성 요소에 몇 가지 변경을 해야 합니다. 먼저, 사용자의 이메일 값을 위한 새로운 입력 필드를 추가하세요. 이제 UserRegistration.js (UserRegistration.tsx TypeScript를 사용하는 경우) 파일에서 사용자 데이터에 이메일 속성을 설정하고 있습니다:
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 };사용자가 이메일을 확인하지 않고 로그인하지 않도록 되어 있으므로, 등록 후 오류를 피하기 위해 그를 로그아웃해야 합니다.세션을 테스트하고 이제 새 사용자를 등록한 후 다음과 같은 메시지를 볼 수 있어야 합니다:

새 사용자를 성공적으로 등록한 후, Parse는 다음과 같은 확인 링크가 포함된 이메일을 보냅니다:

3 - UserLogIn 구성 요소 설정하기
당신의 Parse 서버는 이제 확인된 사용자가 아닌 경우 자동 로그인 시도를 차단하고 있습니다. 그러나 확인되지 않은 사용자가 애플리케이션에 접근할 수 있는 방법이 없도록 하는 것도 좋은 관행이므로, UserLogIn 구성 요소에 새로운 조건을 추가합시다. UserLogIn.js (UserLogIn.tsx를 TypeScript를 사용하는 경우) 파일에 추가합니다:
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 };4 - 이메일 인증 테스트
계속해서 애플리케이션을 테스트하고, 이전에 생성한 인증되지 않은 사용자로 로그인해 보세요. 이메일에서 인증 링크를 클릭하지 않았다면, 다음과 같은 오류 메시지를 받아야 합니다:

확인 링크를 클릭한 후, 로그인할 수 있으며 홈 화면으로 리디렉션됩니다. 또한 Back4App 대시보드 내의 사용자 테이블을 열고 emailVerified 열을 수동으로 편집하여 사용자를 확인할 수 있습니다:

결론
이 가이드의 끝에서, 사용자 이메일 확인을 요구하도록 Parse 서버를 설정하는 방법과 React Native 애플리케이션 내에서 이 제한을 시행하는 방법을 배웠습니다. 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다.