# 구글 로그인 API 연동

***

{% hint style="warning" %}
해당 기능은 스윙투앱 **일반 프로토타입 앱에서 적용할 수 있는 연동 매뉴얼입니다.**

\*무료앱 이용 불가/ 이용권 중 확장형, 프리미엄 이용권 이용시에만 이용 가능합니다. 

\*웹사이트를 연결한 웹뷰앱, 푸시앱은 이용 불가합니다. 

(웹앱은 웹사이트 내에서 소셜 로그인 셋팅을 하여 이용해주세요.) 
{% endhint %}

***

## 1.구글 클라우드 콘솔 접속

<https://console.cloud.google.com> &#x20;

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F99MeSFvklEP1SDQmBhPG%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B81.png?alt=media&#x26;token=56ed57a2-af50-4095-97e4-112430a7a5fe" alt=""><figcaption></figcaption></figure>

구글 클라우드 접속 후 - 로그인&#x20;

**1)My First Project 선택 - 새 프로젝트 선택**

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2Fu4EnVNtg4mbOpUieOL5E%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B82.png?alt=media&#x26;token=b1b6a3b3-9a17-4aae-a143-c85666cf67a7" alt=""><figcaption></figcaption></figure></div>

2\)프로젝트 이름 입력 \*원하는 이름으로 입력해주세요, 프로젝트명으로 사용되며 공개적으로 어디에 노출되는 것은 아닙니다.&#x20;

3\)만들기 버튼 선택&#x20;

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F4pnqNdPh5EolzWZjAUJT%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B83.png?alt=media&#x26;token=3254b714-23e7-4255-ad04-c11f9ad1b205" alt=""><figcaption></figcaption></figure>

4\)프로젝트 선택 창에서 방금 만든 프로젝트를 선택해주세요.&#x20;

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FQmtmmZKCiKvfJjvI97q9%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B84.png?alt=media&#x26;token=81f08dde-d581-4f2f-b372-b5ddb3deb87e" alt=""><figcaption></figcaption></figure>

5\)아래 순서대로 이동해주세요.&#x20;

(1)왼쪽 상단 햄버거 모양 메뉴 선택

(2)모든 제품 보기 선택

(3)대시보드 화면에서 <mark style="color:blue;">**API 및 서비스**</mark> 선택합니다.&#x20;

\*만약 카테고리에 'API 및 서비스' 메뉴가 고정되어 바로 있다면 해당 경로로 선택해서 이동하셔도 됩니다.

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F9qOpKmAY7slJV2GCUEYs%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B817.png?alt=media&#x26;token=36cf6429-f9fe-4fca-b985-2b83d5a8614f" alt=""><figcaption><p>메뉴가 고정되어 있을 경우</p></figcaption></figure></div>

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F1UTaGDPJKgo2fYLO76xc%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B85.png?alt=media&#x26;token=9f536941-a8bc-4c66-a0a6-b007d5213530" alt=""><figcaption></figcaption></figure>

6\)API 및 서비스를 선택한 뒤 아래 경로로 진행해주세요.&#x20;

(1)OAuth 동의 화면 선택

(2)Usrt Type :  외부 선택

(3)만들기 버튼 선택

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FHFmDsTGOv3Oj2rJVe5yd%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B86.png?alt=media&#x26;token=b02170bd-7f4f-46e6-bf64-49c80ba05446" alt=""><figcaption></figcaption></figure>

**7)앱 정보를 입력합니다.**

(1)앱 이름 입력&#x20;

\*앱에서 구글 로그인시 표시되는 이름이오니 현재 적용하는 앱의 이름과 동일하게 기재해주시는 것이 좋습니다.&#x20;

(2)사용자 지원 메일 \*해당 메일주소는 사용자들에게 노출이 되는 이메일주소이오니 고객센터 등 오픈이 가능한 메일주소로 입력합니다.

(3)앱 로고 or 아이콘 이미지를 올려주세요. &#x20;

(4)애플리케이션 홈페이지 입력 \*스윙투앱 홈페이지 URL 입력해주세요.

<https://www.swing2app.co.kr>

(5)애플리케이션 개인정보처리방침 링크

{% hint style="info" %}
**앱 개인정보처리방침 링크은 어디서 가져 오나요?**

\*일반프로토타입 앱은 앱제작 후 - 앱 가입 정책 페이지에서 앱마다 개별 개인정보처리방침 링크를 제공합니다.

**경로)**

[**앱운영- 서비스관리-정책관리-앱가입 정책**](https://www.swing2app.co.kr/view/app_setting)  &#x20;

\[서비스 이용약관URL 보기]를 선택해서, 인터넷 주소란에 기재된 링크 주소를 복사해서 붙여넣습니다.
{% endhint %}

(6)애플리케이션 서비스 약관 링크&#x20;

약관 내용도 개인정보 처리방침에 기재되어 있으니, 5번에 입력한 개인정보 처리방침 링크와 동일한 URL을 입력합니다.&#x20;

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FJYHmthxtgYQdfbAEcMO4%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B87.png?alt=media&#x26;token=4be2ba8f-450c-4289-b297-5fb2463c5a7a" alt=""><figcaption></figcaption></figure></div>

+도메인 추가 버튼을 눌러서 도메인 입력란에 아래 도메인 URL 입력해주세요

(7)승인된 도메인 1 입력&#x20;

(8)승인된 도메인 2 입력

{% hint style="success" %}
도메인 1) <mark style="color:blue;">swing2app.com</mark>&#x20;

도메인2) <mark style="color:blue;">swing2app.co.kr</mark>
{% endhint %}

(9)개발자 연락처 정보&#x20;

이메일주소를 입력해주세요. \*구글에서 알림을 보내는 용도로 어디에 공개적으로 노출되는 정보는 아닙니다.&#x20;

(10)저장 후 계속 버튼 선택

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FCqG9i5BHjeIhOByGQ5KX%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B88.png?alt=media&#x26;token=825d12ba-6d0f-420d-bcc9-728b8c83da87" alt=""><figcaption></figcaption></figure>

**8)범위 추가**&#x20;

(1)\[범위 추가 또는 삭제] 버튼 선택

(2)API 범위 선택&#x20;

{% hint style="danger" %} <mark style="color:red;">\*범위 체크시 반드시 3개 항목만 체크해주세요.</mark>&#x20;

"구글 계정 이메일주소, 개인정보, 구글에서 내 개인정보를 나와 연결" 3개만 선택
{% endhint %}

(3)업데이트 선택

(4)저장 후 계속 선택

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FGPcZKlUlJBbwiiSgx9tH%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B89.png?alt=media&#x26;token=79848bcb-04f1-44ae-939d-2e50284811bb" alt=""><figcaption></figcaption></figure>

9\)\[+ADD USERS] 선택&#x20;

로그인 테스트할 사용자 계정 이메일주소를 입력한 뒤 추가해주세요.&#x20;

입력한 해당 사용자 계정만 테스트가 가능합니다. 추가 가능한 사용자 수는 100명 입니다.&#x20;

10\)저장 후 계속

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2Fz4RSrznB78sSAKSGQkxb%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B810.png?alt=media&#x26;token=1d85df95-fad9-4424-a98f-8e0a9850b004" alt=""><figcaption></figcaption></figure>

11\)왼쪽 카테고리에서 "<mark style="color:blue;">사용자 인증 정보</mark>" 선택해주세요.

12\)<mark style="color:blue;">OAuth 클라이언트</mark> ID선택

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FeXKII5mc7KJgamHxKOBw%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B811.png?alt=media&#x26;token=458c8df4-50fa-4018-b194-f7dd0786fabb" alt=""><figcaption></figcaption></figure>

**13)OAuth 클라이언트 ID 만들기 화면**

(1)애플리캐이션 유형 : 웹 애플리케이션 선택

(2)이름 입력 : 공개되거나 어디에 노출되는 정보는 아니며 콘솔에서 보여지는 이름입니다.&#x20;

(3)브라우저 URL 입력 1 **\*아래 URL 입력해주세요.**&#x20;

(4)브라우저 URL 입력 &#x32;**\*아래 URL 입력해주세요.**&#x20;

{% hint style="success" %}
URL1) [**https://www.swing2app.co.kr**](https://www.swing2app.co.kr)

URL2) [**https://www.swing2app.com**](https://www.swing2app.com/)
{% endhint %}

(5)리디렉션 URL입력1 **\*아래 URL 입력해주세요.**&#x20;

(6)리디렉션 URL입력2 **\*아래 URL 입력해주세요.**&#x20;

{% hint style="success" %}
URL1) [**https://www.swing2app.com/main/google\_login\_api** <br>](https://www.swing2app.com/main/google_login_api)\
URL1) [**https://www.swing2app.co.kr/main/google\_login\_api** <br>](https://www.swing2app.co.kr/main/google_login_api)
{% endhint %}

(7)만들기 선택

**OAuth 클라이언트 생성 완료**&#x20;

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F4Czdyj2TDOdm70tyVQEC%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B813.png?alt=media&#x26;token=d01273af-71d8-4f5f-b9d1-b61b9db643ca" alt=""><figcaption></figcaption></figure></div>

14\)클라이언트 ID 값이 생성됩니다.&#x20;

오른쪽 복사 버튼을 선택해서 ID를 복사해주세요.&#x20;

<mark style="color:red;">\*복사한 키는 스윙투앱 대시보드 - 외부 연동 로그인- 카카오 아이디란에 입력해주셔야 합니다.</mark>

***

## 2.스윙투앱 대시보드- ID 입력하기

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FXvFmUbLrgn29ksSjypLY%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B814.png?alt=media&#x26;token=b4e52e9b-4c22-45b7-8f26-7f538e2b55d1" alt=""><figcaption></figcaption></figure>

[앱운영-서비스관리-정책관리-회원가입 양식](https://www.swing2app.co.kr/view/app_policy)

-아이디 형태: 일반아이디 선택

-외부연동 로그인 :  '구글'  체크

-google clientID 입력란에 복사한 ID를붙혀넣기 해주세요.

-\[정책설정하기] 선택

<mark style="color:red;">\*앱제작 이동 후 \[앱 업데이트]까지 꼭 해주세요. \*업데이트가 되어야 로그인 반영됩니다.</mark>

**\[업데이트 방법]**

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FDdmfMpHw2OjcBIAeBl9N%2F%EB%84%A4%EC%9D%B4%EB%B2%849.png?alt=media&#x26;token=a6a9d8c3-ed23-4090-804d-d76231feb6a8" alt=""><figcaption></figcaption></figure>

스토어(플레이스토어, 앱스토어 등)에 출시되어 있을 경우&#x20;

\>업데이트 유형: 하드 업데이트(재설치) 선택 , 업데이트 후 해당 스토어에도 업데이트 제출해주세요.&#x20;

무료앱 혹은 유료앱이지만 스토어 출시 전 앱 이라면&#x20;

\>소프트 업데이트(재실행) 선택

***

## 3.앱 실행화면

앱 업데이트 후, 구글 로그인이 앱에서 정상적으로 셋팅 되었는지 확인할 수 있습니다.&#x20;

<div align="left"><figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FaeitgYnfInMTFLzXAtc9%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B815.png?alt=media&#x26;token=4b8f755f-ffac-43a8-9f1f-574fac8073c3" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F9k27HipBE9W9qzCcW84L%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B816.png?alt=media&#x26;token=1a51a22d-c0ff-46e4-8e1e-fc4c45f34288" alt=""><figcaption></figcaption></figure>

스윙투앱에서 제작한 앱 - 로그인 화면에서 "구글로 로그인" 버튼이 셋팅된 것을 확인할 수 있습니다.&#x20;

**로그인 방법)**

구글로 로그인 버튼 선택 > 핸드폰에 등록된 구글 계정 리스트가 열립니다. (구글 계정이 핸드폰에 연동되어 있어야 합니다) > 로그인하고자 하는 이메일 계정 선택 > 해당 계정 확인 완료 > 앱에서 &#x20;

이름 입력이 완료되면 정상 로그인 됩니다.&#x20;

\* 앱 업데이트를 한 뒤 구글 로그인을 확인해주세요.&#x20;

***

## 4.게시하기

테스트가 완료되었으면, <mark style="color:blue;">**OAuth 동의화면: 테스트 상태를 → 앱 게시로 변경합니다.**</mark>

게시로 변경을 해야만 모든 구글 계정에서 로그인이 가능합니다.&#x20;

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FlSTrC5qvpDNQ3cKdySEx%2F%EA%B5%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B818.png?alt=media&#x26;token=c8a09bbb-478c-4537-bffa-56fb8d27d622" alt=""><figcaption></figcaption></figure>