---
title: Ionic으로 Back4App을 활용한 로그인 인터페이스 구현하기
slug: docs-kr/js-framework/ionic/ionic-framework-login-screen
description: Ionic에서 Parse SDK로 로그인 페이지 구현 및 사용자 인증 기능 추가 방법
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-08T13:12:47.635Z
---

# Ionic 프레임워크 프로젝트에 로그인 화면 추가하는 방법

## 소개

이 섹션에서는 Ionic 앱에 페이지를 생성하고, 회원가입, 로그인 및 로그아웃을 구현하는 방법을 배웁니다.

이렇게 보일 것입니다:

![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/PC-d303k9wdHVghTjEwg0_image.png)

## 전제 조건

:::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 앱을 만드는 방법을 배우세요.
:::

:::hint{type="success"}
언제든지 이 튜토리얼로 구축된 전체 Ionic 프로젝트에 접근할 수 있습니다. [GitHub 리포지토리](https://github.com/back4app/ionic-email-verification).
:::

## 1 - parse SDK 설치

기존 Ionic 프로젝트가 있다고 가정할 때, 가장 먼저 해야 할 일은 parse SDK를 설치하는 것입니다. 다음 명령어를 실행하여 설치할 수 있습니다:

:::BlockQuote
$ npm install parse
:::

## 2 - 앱의 자격 증명 설정

1. 당신의 <font color="#2166ae">`app.component.ts`</font>, <font color="#2166ae">`parse`</font>를 가져오고 Back4App Parse 서버에 대한 연결을 초기화합니다.

:::CodeblockTabs
app.component.html

```html
1   Parse.initialize("YOUR-APP-ID", "YOUR-JS-KEY");
2   Parse.serverURL = 'https://parseapi.back4app.com/';
```
:::

:::hint{type="info"}
키를 찾는 방법을 모른다면, 첫 번째 Ionic 튜토리얼을 확인하세요 [템플릿에서 시작하기](https://www.back4app.com/docs/js-framework/ionic/ionic-template#setup).
:::

## 3 - 로그인 페이지 만들기

이제 로그인 페이지를 만들어 보겠습니다. 다행히도 Ionic이 모든 것을 처리해 줍니다. 우리가 해야 할 일은 다음 명령어를 실행하는 것입니다:

:::BlockQuote
$ ionic generate page Login
:::

이 페이지 뷰에서는 <font color="#2166ae">`사용자 이름`</font>과 <font color="#2166ae">`비밀번호`</font> 입력란과 회원가입 및 로그인 버튼 두 개를 추가해야 합니다.

:::CodeblockTabs
login.html

```html
1     <h4 text-center margin-top>Insert your credentials</h4>
2
3     <ion-item>
4       <ion-label stacked>Username</ion-label>
5       <ion-input [(ngModel)]="username"></ion-input>
6     </ion-item>
7
8     <ion-item>
9       <ion-label stacked>Password</ion-label>
10      <ion-input type="password" [(ngModel)]="password"></ion-input>
11    </ion-item>
12
13    <div text-center margin-top>
14      <button ion-button margin-right (click)="signUp()">
15        SIGN UP
16      </button>
17
18      <button ion-button color="secondary" (click)="signIn()">
19        SIGN IN
20      </button>
21    </div>
```
:::

이제 <font color="#2166ae">`signIn()`</font> 및 <font color="#2166ae">`signUp()`</font> 메서드를 구현해 보겠습니다. 이는 우리의 <font color="#2166ae">`로그인`</font> 뷰에서 언급되었습니다.

:::CodeblockTabs
login.ts

```typescript
1     signUp() {
2       Parse.User.signUp(this.username, this.password).then((resp) => {
3         console.log('Logged in successfully', resp);
4
5         // Clears up the form
6         this.username = '';
7         this.password = '';
8
9         this.toastCtrl.create({
10          message: 'Account created successfully',
11          duration: 2000
12        }).present();
13      }, err => {
14        console.log('Error signing in', err);
15
16        this.toastCtrl.create({
17          message: err.message,
18          duration: 2000
19        }).present();
20      });
21    }
```
:::

:::hint{type="info"}
자세한 내용을 알아보세요 <font color="#2166ae">`signUp()`</font> 에서 [Parse 문서](https://parseplatform.org/Parse-SDK-JS/api/v1.11.1/Parse.User.html#.signUp).
:::

:::CodeblockTabs
login.ts

```typescript
1     signIn() {
2       Parse.User.logIn(this.username, this.password).then((resp) => {
3         console.log('Logged in successfully', resp);
4
5         // If you app has Tabs, set root to TabsPage
6         this.navCtrl.setRoot('HomePage')
7       }, err => {
8         console.log('Error logging in', err);
9
10        this.toastCtrl.create({
11          message: err.message,
12          duration: 2000
13        }).present();
14      });
15    }
```
:::

:::hint{type="info"}
자세한 내용을 알아보세요 <font color="#2166ae">`Parse.User.logIn()`</font> 에서 [Parse 문서](https://parseplatform.org/Parse-SDK-JS/api/v1.11.1/Parse.User.html#.signUp).
:::

이것이 어떻게 보여야 하는지입니다.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/efmW3s-Z-wu4kLeQlhUL__image.png" size="50" width="413" height="731" position="center" showCaption="false"}

## 4 - 로그아웃 구현하기

홈페이지(또는 사용자가 로그인 후 이동할 페이지)로 이동하여 로그아웃을 구현해 보겠습니다.

먼저, home.html을 열고 로그아웃을 위한 버튼을 추가하세요.

:::CodeblockTabs
login.html

```html
1     <h2 text-center>You are logged in!</h2>
2
3     <div margin-top text-center>
4       <button ion-button (click)="logOut()">
5         Log out
6       </button>
7     </div>
```
:::

이제 <font color="#2166ae">`logOut()`</font> 메서드를 구현하고 요청이 실패할 경우 <font color="#2166ae">`Toast`</font> 컴포넌트를 추가합시다.

:::CodeblockTabs
home.ts

```typescript
1     logOut() {
2       Parse.User.logOut().then((resp) => {
3         console.log('Logged out successfully', resp);
4
5         this.navCtrl.setRoot('LoginPage');
6       }, err => {
7         console.log('Error logging out', err);
8
9         this.toastCtrl.create({
10          message: 'Error logging out',
11          duration: 2000
12        }).present();
13      })
14    }
```
:::

:::hint{type="info"}
자세히 알아보세요 <font color="#2166ae">`Parse.User.logOut()`</font> 에서 [Parse 문서](https://parseplatform.org/Parse-SDK-JS/api/v1.11.1/Parse.User.html#.signUp).
:::

이렇게 보여야 합니다.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/HB337gxfN6oOM-D7B-dCl_image.png" size="50" width="417" height="737" position="center" showCaption="false"}

## 5 - 루트 페이지 설정

의 중요한 기능은 <font color="#2166ae">`parse`</font>가 장치에서 사용자가 로그인했는지 여부를 기억한다는 것입니다. 즉, 사용자가 앱을 닫더라도 앱이 열릴 때 세션을 복원할 수 있습니다.

이를 통해 앱의 초기 페이지가 우리의 <font color="#2166ae">`LoginPage`</font> 또는 <font color="#2166ae">`HomePage`</font>가 될지를 결정할 수 있습니다.

이를 위해 우리는 단지 <font color="#2166ae">`currentAsync()`</font>. 호출하면 됩니다. 이는 로그인된 사용자를 반환하거나 <font color="#2166ae">`null`</font>을 반환합니다.

:::CodeblockTabs
app.component.ts

```typescript
1     Parse.User.currentAsync().then(user => {
2       console.log('Logged user', user);
3
4       this.rootPage = user ? 'HomePage' : 'LoginPage';
5     }, err => {
6       console.log('Error getting logged user');
7
8       this.rootPage = 'LoginPage';
9     })
```
:::

:::hint{type="info"}
자세히 알아보세요 <font color="#2166ae">`Parse.User.currentAsync()`</font> 에서 [Parse 문서](https://parseplatform.org/Parse-SDK-JS/api/v1.11.1/Parse.User.html#.signUp).
:::

## 마지막으로, 모든 설정이 완료되었습니다!

이 시점에서 <font color="#2166ae">`ionic serve`</font>를 실행하면 로그인, 회원가입 및 로그아웃 기능이 작동하며, 사용자가 로그아웃할 때까지 로그인한 사용자를 기억합니다.