---
title: 이오닉 앱에 페이스북 로그인을 연동하는 방법 기술 가이드
slug: docs-kr/js-framework/ionic/ionic-framework-login
description: 이오닉 안드로이드 앱에 페이스북 로그인 기능을 추가하는 기술 가이드입니다.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-08T13:59:15.188Z
---

# 이오닉 앱에 페이스북 로그인을 추가하는 방법

## 소개

이 섹션에서는 페이스북 로그인을 사용하여 사용자 등록이 가능한 앱을 만드는 방법과 [Parse Server의 핵심 기능](https://www.back4app.com/product/parse-server)을 통해 Back4App을 사용하는 방법을 설명합니다.

이 튜토리얼을 따라하면 다음과 같은 작업을 수행할 수 있습니다:

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/PrNRMaA0rfyc0wtY3KPiY_image.png" size="50" width="360" height="640" position="center" showCaption="false"}

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

:::hint{type="info"}
**이 빠른 시작을 완료하려면 다음이 필요합니다:**

- [비주얼 스튜디오 코드](https://code.visualstudio.com/download)(또는 원하는 웹 IDE).
- [이오닉 프레임워크](https://ionicframework.com/getting-started/)
- Back4App에서 생성된 앱.
  - 다음 [새 파스 앱 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 따라 Back4App에서 파스 앱을 만드는 방법을 배우세요.
- 앱 생성을 위한 [페이스북](https://www.facebook.com/login/?next=https%3A%2F%2Fdevelopers.facebook.com%2F) 계정.
:::

## 1 - 페이스북 설정

페이스북 기능을 사용하려면 다음을 수행해야 합니다:

1. 웹사이트로 이동하여 [Facebook 개발자](https://developers.facebook.com/) 계정을 만들고 로그인하세요.
2. &#x20;[내 앱](https://www.facebook.com/login.php?next=https%3A%2F%2Fdevelopers.facebook.com%2Fapps%2F)으로 이동하여 <font color="#2166ae">`새 앱 추가`</font>:
3. 왼쪽 패널에서 <font color="#2166ae">`설정`</font> > <font color="#2166ae">`기본`</font>. 이 페이지에서:

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

- 당신의 <font color="#2166ae">`앱 ID`</font>
- &#x20;<font color="#2166ae">`개인정보 보호 정책 URL`</font>
- &#x20;<font color="#2166ae">`카테고리`</font>
- 아래로 스크롤하여 <font color="#2166ae">`변경 사항 저장`</font>

4\. 같은 페이지 상단에서 <font color="#2166ae">`끄기`</font> 버튼을 클릭하고 **확인**하여 앱을 활성화하세요.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/SSBOjQ0Rl5I0638Yp0xUJ_image.png" size="50" width="391" height="160" position="center" showCaption="false"}



&#x20;   5\. 같은 페이지에서 아래로 스크롤하고 <font color="#2166ae">`플랫폼 추가`</font>를 클릭하세요.

- 이 튜토리얼에서는 **안드로이드**을 선택합시다.
- 당신의 <font color="#2166ae">`구글 플레이 패키지 이름`</font>을 추가하세요. 우리 경우는 com.back4app.myapp입니다.
- 당신의 <font color="#2166ae">`키 해시`</font>를 추가하세요 (당신의 키 해시를 찾으려면 <font color="#2166ae">`keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64`</font>를 실행하세요)
- <font color="#2166ae">`변경 사항 저장`</font>

&#x20;   6\. 왼쪽 패널에서 <font color="#2166ae">`대시보드`</font>, 아래로 스크롤하고 <font color="#2166ae">`페이스북 로그인`</font>을 클릭하세요.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/6YRZiQ5uSVljKxiN8oF5y_image.png" size="80" width="548" height="299" position="center" showCaption="false"}

## 2 - Facebook 앱을 Back4App과 연결하기

1. 앱 대시보드로 이동하여 [Back4App 웹사이트](https://www.back4app.com/)를 클릭합니다.<font color="#2166ae">`서버 설정`</font>.
2. “Facebook 로그인” 블록을 찾아 <font color="#2166ae">`설정`</font>. “Facebook 로그인” 블록은 다음과 같습니다:

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

&#x20;    3\. 이전 단계에서 기록한 Facebook <font color="#2166ae">`앱 ID`</font>를 추가합니다.

## 3 - 설정하기

이 튜토리얼에서는 이전 [이메일 인증을 통한 사용자 등록](https://www.back4app.com/docs/ionic/user-registration-email-verification)에서 중단한 지점부터 시작합니다.

## 4 - Facebook 로그인

먼저 Facebook cordova 플러그인을 설치합시다:

:::BlockQuote
$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP\_ID="XXXXXXXX" --variable APP\_NAME="XXXXXXXX"
$ npm install --save @ionic-native/facebook
:::

이제 <font color="#2166ae">`facebookLogin()`</font> 메서드를 구현해 보겠습니다:

:::CodeblockTabs
login.ts

```typescript
1     async facebookLogin() {
2       try {
3         // Log in to Facebook and request user data
4         let facebookResponse = await this.facebook.login(['public_profile', 'email']);
5         let facebookAuthData = {
6           id: facebookResponse.authResponse.userID,
7           access_token: facebookResponse.authResponse.accessToken,
8         };
9
10        // Request the user from parse
11        let toLinkUser = new Parse.User();
12        let user = await toLinkUser._linkWith('facebook', {authData: facebookAuthData});
13
14        // If user did not exist, updates its data
15        if (!user.existed()) {
16          let userData = await this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture)', []);
17          user.set('username', userData.name);
18          user.set('name', userData.name);
19          user.set('email', userData.email);
20          await user.save();
21        }
22
23        this.navCtrl.setRoot('HomePage');
24      } catch (err) {
25        console.log('Error logging in', err);
26
27        this.toastCtrl.create({
28          message: err.message,
29          duration: 2000
30        }).present();
31      }
32    }
```
:::

마지막으로, <font color="#2166ae">`로그인`</font> 페이지에 버튼을 추가하고 방금 만든 메서드를 호출하도록 하겠습니다:

:::CodeblockTabs
login.html

```html
1   <div text-center>
2         <button ion-button color="facebook" (click)="facebookLogin()">
3           LOG IN WITH FACEBOOK
4         </button>
5       </div>
```
:::

## 5 - 앱 테스트하기

1. Facebook 로그인이 브라우저에서 작동하지 않으므로, <font color="#2166ae">`ionic cordova run android`</font>로 앱을 테스트하세요.
2. 다음에서 로그인하세요: [Back4App 웹사이트](https://www.back4app.com/).
3. 앱을 찾아서 <font color="#2166ae">`대시보드`</font> > <font color="#2166ae">`코어`</font> > <font color="#2166ae">`브라우저`</font> > <font color="#2166ae">`사용자`</font>를 클릭하여 생성한 사용자를 확인하세요!

## 완료되었습니다!

이 단계에서, Back4App을 통해 Parse Server의 핵심 기능을 사용하여 Facebook으로 앱에 로그인하고, 등록하고, 로그아웃할 수 있습니다!