---
title: 이온 프레임워크: 이메일 인증 사용자 등록 가이드
slug: docs-kr/js-framework/ionic/ionic-login
description: 이온 프레임워크에서 이메일 인증 사용자 등록 구현하는 방법을 배워보세요. Back4App과 Parse Server를 사용하여 효율적인 사용자 관리.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-08T13:45:08.560Z
---
## 이메일 인증을 통한 사용자 등록
### 소개
이 섹션에서는 Back4App을 사용하여 사용자 등록 및 이메일 인증이 포함된 앱을 만드는 방법을 설명합니다.[Parse Server 핵심 기능](https://www.back4app.com/product/parse-server)을 통해.
이것이 어떻게 보일지입니다:
:::hint{type="success"}
언제든지 이 튜토리얼로 구축된 전체 Ionic 프로젝트에 접근할 수 있습니다. [GItHub 저장소](https://github.com/back4app/ionic-email-verification).
:::
## 필수 조건
:::hint{type="info"}
**이 퀵스타트를 완료하려면 다음이 필요합니다:**
- [Visual Studio Code ](https://code.visualstudio.com/download)(또는 원하는 웹 IDE).
- [Ionic Framework ](https://ionicframework.com/getting-started/)
- Back4App에서 생성된 앱.
- 다음의 [새 Parse 앱 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 따라 Back4App에서 Parse 앱을 만드는 방법을 배우세요.
- 다음의 [사용자 등록](https://www.back4app.com/docs/js-framework/ionic/ionic-framework-login) 튜토리얼을 따라 back4app으로 회원가입, 로그인 및 로그아웃을 구현하는 방법을 배우세요.
:::
## 1 - 설정하기
이 튜토리얼에서는 이전의 [사용자 등록](https://www.back4app.com/docs/ionic/ionic-framework-login-screen)에서 중단한 지점부터 시작합니다.
## 2 - 이메일 인증 활성화
1. 앱에 가서 [Back4App 웹사이트 ](https://www.back4app.com/)를 클릭하세요 `서버 설정`.
2. “인증 이메일” 블록을 찾아서 `설정`. “인증 이메일” 블록은 다음과 같습니다:
3\. `사용자 이메일 인증`. 여기 있습니다:
4\. 빈 필드를 채우고 이미 채워진 필드는 선호에 따라 수정하세요.
5\. `저장` 버튼을 클릭하세요.
## 3 - 가입하기
“ParseUser” 클래스의 두 가지 기본 속성은 `ParseUser`입니다. **username**과 **password**, 그리고 **email**이라는 세 번째 특별 속성도 설정해야 합니다.
이메일 인증을 통한 회원가입을 구현하기 위해 기본 사용자 등록과 동일한 방법을 사용할 것입니다. 그러나 이번에는 사용자를 홈 페이지로 보내는 대신, 로그인하기 위해 이메일을 인증하도록 요청할 것입니다.
사용자 생성이 완료되면 자동으로 Parse `대시보드`에 추가되며, **emailVerified** 불리언 속성은 **false**로 설정됩니다. 이 시점에서 사용자는 귀하의 플랫폼에 로그인할 수 없어야 합니다. 사용자가 자신의 메일박스로 전송된 링크를 클릭하여 이메일을 인증하면 **emailVerified** 불리언은 자동으로 **true**로 설정되어, 사용자가 귀하의 플랫폼에 완전히 접근할 수 있게 됩니다.
“SignUpActivity”가 작동하도록 하려면 다음 단계를 따르세요:
“isSigningup”과 `isSigningup` 및 `email` 변수를 `login.ts`에 추가하여 이메일 입력을 토글하고 유지하세요:
:::CodeblockTabs
login.ts
```typescript
1 // Parse Dependencies
2 email: string;
3 isSigningup: boolean;
```
:::
Make the `signUp()` 메서드가 이메일 주소를 parse `User.signUp()` 함수로 전송하도록 하세요:
:::CodeblockTabs
login.ts
```typescript
1 signUp() {
2 Parse.User.signUp(this.username, this.password, {email: this.email}).then((resp) => {
3 console.log('Signed up successfully', resp);
4
5 // Clears up the form
6 this.username = '';
7 this.password = '';
8 this.email = '';
9
10 this.toastCtrl.create({
11 message: 'Account created successfully',
12 duration: 2000
13 }).present();
14
15 this.isSigningup = false;
16 }, err => {
17 console.log('Error signing in', err);
18
19 this.toastCtrl.create({
20 message: err.message,
21 duration: 2000
22 }).present();
23 });
24 }
```
:::
이제, 사용자가 가입할 때마다 HTML 요소를 보여주거나 숨기기 위해 `login.html` 에 `*ngIf`를 추가하여 **isSigningup**이 **true**일 때 또는 로그인할 때 **isSigningup**이 **false**일 때.
:::CodeblockTabs
login.html
```html
1
2 E-mail
3
4
5
6
7
10
11
14
15
16
17
20
```
:::
## 4 - 로그인
이제 사용자를 **emailVerified** 부울 검증을 추가하여 `홈` 페이지로 보내기 전에.
:::hint{type="info"}
**참고**: 사용자가 `Parse.User.logIn()` 함수를 호출할 때 로그인하지만, 이메일 검증이 완료될 때까지 앱에 접근할 수 없습니다.
또한, logIn()을 호출할 때 데이터베이스에 세션 객체가 생성되므로, 이메일을 검증하지 않은 사용자가 애플리케이션에 접근하려고 할 때마다 `Parse.User.logout()`을 호출하는 것이 중요합니다. 그렇지 않으면 `세션`이 열려 있게 됩니다.
:::
이제 사용자가 로그인할지 아니면 이메일을 확인해야 한다는 경고를 받을지를 결정하기 위해 **emailVerified ** 검증을 구현해 보겠습니다:
:::CodeblockTabs
login.ts
```typescript
1 // Parse Dependencies
2 signIn() {
3 Parse.User.logIn(this.username, this.password).then((user) => {
4 console.log('Logged in successfully', user);
5
6 if(user.get('emailVerified')) {
7 // If you app has Tabs, set root to TabsPage
8 this.navCtrl.setRoot('HomePage')
9 } else {
10 Parse.User.logOut().then((resp) => {
11 console.log('Logged out successfully', resp);
12 }, err => {
13 console.log('Error logging out', err);
14 });
15
16 this.alertCtrl.create({
17 title: 'E-mail verification needed',
18 message: 'Your e-mail address must be verified before logging in.',
19 buttons: ['Ok']
20 }).present();
21 }
22 }, err => {
23 console.log('Error logging in', err);
24
25 this.toastCtrl.create({
26 message: err.message,
27 duration: 2000
28 }).present();
29 });
30 }
```
:::
## 5 - 앱 테스트하기
1. 앱을 테스트하려면 `ionic serve`를 실행하고 몇 명의 사용자를 생성해 보세요. 또한 이메일을 확인하지 않고 등록한 후 로그인해 보아 실제로 오류가 표시되는지 확인하세요.
2. 다음에서 로그인하세요: [Back4App 웹사이트.](https://www.back4app.com/)
3. 앱을 찾아서 `대시보드` > `코어` > `브라우저` > `사용자`를 클릭하여 생성한 사용자를 확인하세요!
## 완료되었습니다!
이 단계에서 Parse Server의 핵심 기능을 통해 Back4App을 사용하여 이메일 인증으로 앱에 로그인, 등록 또는 로그아웃할 수 있습니다!