#1 Social Login 소셜 로그인

 

1. 네이버

 

1.1. 애플리케이션 등록

아래 주소로 접속하여 회원가입 및 로그인을 한다.

https://developers.naver.com/

NAVER Developers

 

상단 메뉴에 Application을 선택한다.

 

 

처음 이용하면 이용약관 동의 화면이 나온다. 동의하고 넘어간다.

 

애플리케이션 정보를 입력한다.

애플리케이션 이름: 희망하는 애플리케이션 이름을 입력한다.

사용 API: 네이버 로그인 선택

 

제공 정보 선택에서 소셜 로그인 성공시 네이버로부터 가져오고 싶은 데이터를 필수에 체크를 한다.

 

환경추가: PC 웹 선택 (웹 서비스를 운영하는 경우)

서비스 URL: Backend 접속 URL을 입력, 개발시에는 "http://localhost:포트번호" 가능하다.

네이버 로그인 Callback URL: ${백엔드 접속 URL}/login/oauth2/code/naver 를 입력한다. (여러개 입력 가능)

 

모두 선택 및 입력 후 아래 동의에 모두 체크하고 [등록하기] 버튼으로 애플리케이션을 등록한다.

 

1.2. 필요 데이터 수집

개요 탭에서 Client ID, Client Secret 값을 Spring Boot 프로젝트의 Application.yaml에 입력할 예정이다.

 

 

2. 카카오

 

2.1. 애플리케이션 등록

아래 주소로 접속하여 회원가입 및 로그인을 한다.

Kakao Developers

Kakao Developers

 

상단 메뉴에서 "앱"을 선택한다. 

앱 아이콘: (선택사항)
앱 이름: (필수사항) 희망하는 애플리케이션 이름을 입력한다.
회사명: (필수사항) 아무거나 입력 가능
카테고리: (필수사항) 아무거나 선택 가능

입력 및 선택하고 동의 체크박스 선택 후 [저장] 버튼을 클릭한다.

 

 

2.2. 필요 데이터 수집

애플리케이션을 선택한다. 

(메뉴) 앱 설정 > 대시보드

화면에서 스크롤을 아래로 내리면 설정 박스가 나타난다. [카카오 로그인] - [설정] 버튼을 클릭한다.

 

(메뉴) 제품설정 > 카카오 로그인 >  일반 화면

사용 설정의 상태를 "ON"으로 변경

 

스크롤을 내리면 "리다이렉트 URI" 박스가 나타난다. [리다이렉트 URI 등록] 버튼을 클릭.

리다이렉트 URI:  ${백엔드 접속 URL}/login/oauth2/code/kakao 를 입력한다. (여러개 입력 가능)

 

리다이렉트 URI를 저장하면 아래 화면처럼 표시된다.

 

스크롤을 내리면 "Client Secret" 박스가 나타난다.  [클라이언트 시크릿 발급] 버튼을 클릭.

아래 화면처럼 클라이언트 시크릿이 표시된다. [상태] - [설정]을 클릭한다. Client Secret값을 구할 수 있다.

모달 창이 나타난다. 상태를 '사용함'을 선택하고 저장한다.

 

(메뉴) 앱 > 일반

스크롤을 내리면 "앱 키" 박스가 나타난다.

REST API키가 Client ID값이다.

 

스크롤을 내리면 "플랫폼" 박스가 나타난다.

[Web 플랫폼 등록] 을 클릭한다.

 

사이트 도메인: Backend 접속 URL을 입력, 개발시에는 "http://localhost:포트번호" 가능하다.

 

(메뉴) 카카오 로그인 > 동의항목

개인정보 박스에서 닉네임, 프로필 사진 [설정] 버튼을 클릭하여 상태를 "필수 동의"로 변경한다.

 

결과 화면