당신은 주제를 찾고 있습니까 “spring 카카오 로그인 api – 카카오계정으로 로그인하기 (카카오톡 로그인 API 사용하기)“? 다음 카테고리의 웹사이트 https://you.tfvp.org 에서 귀하의 모든 질문에 답변해 드립니다: https://you.tfvp.org/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 개발자의품격 이(가) 작성한 기사에는 조회수 35,360회 및 좋아요 411개 개의 좋아요가 있습니다.

spring 카카오 로그인 api 주제에 대한 동영상 보기

여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!

d여기에서 카카오계정으로 로그인하기 (카카오톡 로그인 API 사용하기) – spring 카카오 로그인 api 주제에 대한 세부정보를 참조하세요

[개발자의 품격] 품격있는 개발자 되기!

spring 카카오 로그인 api 주제에 대한 자세한 내용은 여기를 참조하세요.

[Spring Boot] 카카오 로그인 API 구현 (1) – Access token 발급받기

Spring Boot를 이용해서 카카오 로그인을 구현해보았다. Node.js로 구현할 때보다 복잡해보였는데, 구현하고 나니까 그래도 생각보단 덜 복잡했다!

+ 여기에 더 보기

Source: suyeoniii.tistory.com

Date Published: 2/27/2022

View: 2985

[SPRING] 카카오 로그인 스프링 Rest API 예제 및 쉬운 구현 방법

웹뷰를 앱으로 만드는 과정에 있어서, 카카오 로그인의 동작이 안돼 기존 자바스크립트 방식을 ‘REST API’ 방식으로 바꾸게 되었습니다. 카카오 로그인 …

+ 여기에 자세히 보기

Source: tyrannocoding.tistory.com

Date Published: 9/26/2021

View: 2992

[Spring] 카카오 아이디로 로그인하기 – 1

[Spring] 카카오 아이디로 로그인하기 – 1. llshl 2021. 7. 28. 23:43. 지난 네이버 아이디로 로그인하기에 이어서 다음 소셜 로그인으로 카카오를 선택했다.

+ 여기에 보기

Source: llshl.tistory.com

Date Published: 11/8/2021

View: 2374

[Spring] 스프링으로 OAuth2 로그인 구현하기3 – 카카오

2) 내 애플리케이션 > 애플리케이션 추가하기 > 앱 이름 입력 (test-project) > 사업자명 입력 (test) > 저장 · 3) REST API 키 GET.

+ 여기에 자세히 보기

Source: loosie.tistory.com

Date Published: 7/19/2021

View: 7636

[OAuth] Spring 카카오톡 Login 연동 (1) – 코딩하는헬린이

안녕하세요. 코드짜는헬창 입니다. 이전엔 자바스크립트 SDK 로 OAuth 연동하여 사용해봤는데 이번엔 Spring 사용한 REST API연동에 대하여 포스팅 …

+ 여기에 더 보기

Source: mylupin.tistory.com

Date Published: 7/5/2021

View: 5017

[Spring] 카카오 로그인 Open API – 즐기는 자

안녕하세요 코북입니다. 지난번에 네아로 Open API를 사용해 네이버 아이디로 로그인 연동을 구현해봤는데요. 카카오 Open API도 같은 방식으로 구현 …

+ 여기에 보기

Source: cobook.tistory.com

Date Published: 6/11/2021

View: 6964

SPRING MVC 카카오톡 로그인 해보기 – 꿈꾸는 자

요약정보를 눌러보면 앱키를 발급해줘요 저는 자바스크립트로 로그인을 할건데요. 여기서 2가지 앱키가 필요해요. JAVASCRIPT 키와 REST API 키가 필요 …

+ 여기에 더 보기

Source: s00741.tistory.com

Date Published: 3/1/2021

View: 3105

[Spring Boot] REST API를 이용한 카카오 로그인 구현

Spring Boot + JPA + JWT를 이용하여 백엔드에서 카카오 로그인을 시키기 위해서 어떠한 동작이 이루어지는지 알아보자.

+ 더 읽기

Source: mangchhe.github.io

Date Published: 6/16/2021

View: 3649

주제와 관련된 이미지 spring 카카오 로그인 api

주제와 관련된 더 많은 사진을 참조하십시오 카카오계정으로 로그인하기 (카카오톡 로그인 API 사용하기). 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

---

주제에 대한 기사 평가 spring 카카오 로그인 api

• Author: 개발자의품격
• Views: 조회수 35,360회
• Likes: 좋아요 411개
• Date Published: 2021. 1. 11.
• Video Url link: https://www.youtube.com/watch?v=Re2R2rid1K4

[Spring Boot] 카카오 로그인 API 구현 (1) – Access token 발급받기

반응형

Spring Boot를 이용해서 카카오 로그인을 구현해보았다.

Node.js로 구현할 때보다 복잡해보였는데, 구현하고 나니까 그래도 생각보단 덜 복잡했다!

동작 흐름

카카오를 이용한 소셜로그인 구현 Flow이다

이건 네이버도 비슷하다! Apple은 조금 다를 듯

카카오 소셜로그인

1. 클라이언트 쪽에서 로그인을 한다

2. 카카오 서버는 redirect url로 code를 전달해준다

3,4. code를 이용하여 access_token을 발급받는다

5. access_token을 서버로 전송한다

6,7. 서버에서는 받은 access_token을 이용하여 카카오 서버에서 사용자 정보를 받는다

8. 받은 사용자 정보를 이용하여 회원가입 또는 로그인을 진행한다

9. JWT등과 같이 사용자 식별 정보를 클라이언트로 보낸다

혼자 프론트, 백엔드 모두 구현한다면 1-9번 과정을 모두 수행하면 되고

프론트만 구현하면 된다면, 1-5번

백엔드만 구현하면 된다면 6-9번을 수행하면 된다.

백엔드 구현 기준으로, 프론트 없이 테스트해야한다는 가정하에 작성하겠다.

만약 클라이언트 개발자가 따로 있다면, 클라이언트에게 access token을 받아서 사용자 정보를 조회하는 것부터 진행하면 된다!!

카카오 공식문서

https://developers.kakao.com/docs/latest/ko/kakaologin/common

먼저, 카카오 개발자 페이지에서 내 애플리케이션을 추가한다

내 애플리케이션

그럼 내 애플리케이션 조회시 앱 키가 할당 된 것을 볼 수 있다.

여기서 우리가 사용할 건 REST API 키 !

왼쪽바를 보면 카카오 로그인이 있다.

내 애플리케이션 > 카카오 로그인

활성화 설정 ON을 클릭해준다.

그 아래에는 Redirect URI가 있는데, Redirect URI 등록 클릭

내 애플리케이션 > 카카오 로그인 > redirect uri

Redirect URI를 설정하면 되는데, Redirect URI는 사용자가 카카오 로그인을 수행했을 때 발급되는 code를 반환할 페이지라고 보면 된다.

나는 localhost에서 테스트만 진행할 것이므로 localhost를 추가해주었다.

클라이언트 개발자와 협업한다면, 클라이언트에서 처리할 부분이다!

내 애플리케이션 > 카카오 로그인 > 동의항목

왼쪽에서 동의항목을 클릭

사용자로부터 어떤 항목을 받을지 설정하면 된다, 테스트 어플에서는 필수동의는 안되는 것 같다

나는 이메일만 선택동의로 받아주었다.

이제 카카오 로그인 API를 이용할 수 있다!

로그인

카카오 로그인을 위해서는 아래 url로 접속하면 된다.

kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code

REST_API_KEY는 아까 내 애플리케이션 화면에서 확인했던 값을 넣어주면 되고, redirect_uri는 아까 설정했던 uri로 하면 된다!

ex) kauth.kakao.com/oauth/authorize?client_id=e4a81d5a6acbda948310e08e23451234&redirect_uri=http://localhost:9000/oauth/kakao&response_type=code

클라이언트 쪽에서 어떻게 구현하는지는 잘 모르지만, 웹이라면 javascript에서 위 url로 redirect 해주면 될 것이고, 앱이면 웹뷰를 이용하려나…? 잘모르겠다ㅎㅎ

REST API KEY와 redirect_uri를 올바르게 입력하고 로그인 uri로 접속해보면 카카오 로그인 화면이 뜬다

에러가 난다면, 에러코드를 검색하면 어떤 원인인지 나올 것이다

카카오 로그인

동의하고 계속하기를 누르면 아까 설정했던 redirect_uri로 redirect된다.

redirect 된 uri

아까 설정한 localhost:9000/oauth/kakao로 redirect되었고, Query String으로 code를 받는다.

그럼 위 경로에 대한 Controller를 작성해주면 code추출이 가능하다.

(여러번 말하지만, 백엔드 혼자 구현하는 경우에만 적용하면 되고, 클라이언트 개발자와 협업하는 경우 이 과정을 클라이언트에서 처리하고 access token을 전달해줄 것이다!)

OAuthController.java

@RestController @AllArgsConstructor @RequestMapping(“/oauth”) public class OAuthController { /** * 카카오 callback * [GET] /oauth/kakao/callback */ @ResponseBody @GetMapping(“/kakao”) public void kakaoCallback(@RequestParam String code) { System.out.println(code); } }

code가 잘 출력되는 것을 확인할 수 있다!

Access Token 받기

이제 인가코드(code)를 받았으니, 이 코드로 카카오서버에 인가토큰(access token)을 요청할 수 있다.

POST로 요청하고, 결과를 JSON형식으로 받기 때문에 JSON파싱에 유용한 Gson라이브러리를 사용해보겠다.

(deprecated 된 것 같아서, Spring Boot에는 자동제공되는 Jackson라이브러리를 사용해도 좋은데, 나는 적용과정에 오류가 있어서 일단 Gson을 이용해보았다.)

Gson 추가

Gradle:

dependencies { implementation ‘com.google.code.gson:gson:2.8.7’ }

Maven:

com.google.code.gson gson 2.8.7

이제 code를 이용하여 access token을 발급받는 Service파일을 작성해보자

OAuthService.java

import com.google.gson.JsonParser; import com.google.gson.JsonElement; import org.springframework.stereotype.Service; import java.io.*; import java.net.HttpURLConnection; import java.net.URL; @Service public class OAuthService{ public String getKakaoAccessToken (String code) { String access_Token = “”; String refresh_Token = “”; String reqURL = “https://kauth.kakao.com/oauth/token”; try { URL url = new URL(reqURL); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); //POST 요청을 위해 기본값이 false인 setDoOutput을 true로 conn.setRequestMethod(“POST”); conn.setDoOutput(true); //POST 요청에 필요로 요구하는 파라미터 스트림을 통해 전송 BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream())); StringBuilder sb = new StringBuilder(); sb.append(“grant_type=authorization_code”); sb.append(“&client_id=e4a81d5a6acbda948310e08e2eafc123”); // TODO REST_API_KEY 입력 sb.append(“&redirect_uri=http://localhost:9000/oauth/kakao”); // TODO 인가코드 받은 redirect_uri 입력 sb.append(“&code=” + code); bw.write(sb.toString()); bw.flush(); //결과 코드가 200이라면 성공 int responseCode = conn.getResponseCode(); System.out.println(“responseCode : ” + responseCode); //요청을 통해 얻은 JSON타입의 Response 메세지 읽어오기 BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream())); String line = “”; String result = “”; while ((line = br.readLine()) != null) { result += line; } System.out.println(“response body : ” + result); //Gson 라이브러리에 포함된 클래스로 JSON파싱 객체 생성 JsonParser parser = new JsonParser(); JsonElement element = parser.parse(result); access_Token = element.getAsJsonObject().get(“access_token”).getAsString(); refresh_Token = element.getAsJsonObject().get(“refresh_token”).getAsString(); System.out.println(“access_token : ” + access_Token); System.out.println(“refresh_token : ” + refresh_Token); br.close(); bw.close(); } catch (IOException e) { e.printStackTrace(); } return access_Token; } }

코드는 다른 블로그를 참고했다 (출처는 맨 아래)

위 코드가 길어서 읽다가 나가버릴 수도 있는데 알고보면 그렇게 복잡하진 않다.

일단은 그대로 적용해보고, 결과가 제대로 나오는지 확인한 뒤 다시 코드를 살펴보면 이해가 좀 더 될 것이다.

connection 생성 POST로 보낼 Body 작성 받아온 결과 JSON 파싱 (Gson)

이렇게 세부분으로 나눠져 있다.

위 코드는 조금 변형하면, 다른 API 통신에도 모두 사용이 가능하니 참고를 많이했으면 좋겠다!

실행하며, 로그인 단계를 다시 수행해보면 console에 결과가 출력될텐데

responseCode가 200번대면 성공이다! 400번이 나온다면 로그인 과정을 잘 수행했는지(새로고침x) 확인하기

이제 받은 access token을 이용하여 사용자 정보를 조회하고, 그 정보를 이용하여 회원가입을 진행하면 된다.

다음 포스팅에서 계속..

카카오 로그인 API 구현 (2)

https://suyeoniii.tistory.com/81

참고 : https://antdev.tistory.com/36?category=807235

반응형

[SPRING] 카카오 로그인 스프링 Rest API 예제 및 쉬운 구현 방법 – OAuth 2.0, Javascript, Jsp

반응형

웹뷰를 앱으로 만드는 과정에 있어서, 카카오 로그인의 동작이 안돼 기존 자바스크립트 방식을 ‘REST API’ 방식으로 바꾸게 되었습니다.

카카오 로그인 API 사용을 위한 애플리케이션 설정

카카오 디벨로퍼 페이지에서 애플리케이션을 만들어 주고 활성화까지만 진행하면됩니다.

활성화까지 어려움이 있으신분들은 아래 링크에서 ‘애플리케이션 설정부분’을 참조해주세요.

https://tyrannocoding.tistory.com/49

코드 – 서버 구현 (SPRING – LEGACY)

자바스크립트를 통해 구현할 때와 동일하게 애플리케이션을 만들고 활성화해주면 앱 키를 사용하실 수 있습니다. 우리는 ‘REST API키’를 사용합니다.

pom.xml

com.googlecode.json-simple json-simple 1.1.1 com.google.code.gson gson 2.8.7

java

@Controller public class KakaoController { @RequestMapping(value = “/login/getKakaoAuthUrl”) public @ResponseBody String getKakaoAuthUrl( HttpServletRequest request) throws Exception { String reqUrl = “https://kauth.kakao.com/oauth/authorize” + “?client_id=f8071907fae4877f2a0f469e969f639f” + “&redirect_uri=http://localhost:8181/login/oauth_kakao” + “&response_type=code”; return reqUrl; } // 카카오 연동정보 조회 @RequestMapping(value = “/login/oauth_kakao”) public String oauthKakao( @RequestParam(value = “code”, required = false) String code , Model model) throws Exception { System.out.println(“#########” + code); String access_Token = getAccessToken(code); System.out.println(“###access_Token#### : ” + access_Token); HashMap userInfo = getUserInfo(access_Token); System.out.println(“###access_Token#### : ” + access_Token); System.out.println(“###userInfo#### : ” + userInfo.get(“email”)); System.out.println(“###nickname#### : ” + userInfo.get(“nickname”)); JSONObject kakaoInfo = new JSONObject(userInfo); model.addAttribute(“kakaoInfo”, kakaoInfo); return “/home”; //본인 원하는 경로 설정 } //토큰발급 public String getAccessToken (String authorize_code) { String access_Token = “”; String refresh_Token = “”; String reqURL = “https://kauth.kakao.com/oauth/token”; try { URL url = new URL(reqURL); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); // URL연결은 입출력에 사용 될 수 있고, POST 혹은 PUT 요청을 하려면 setDoOutput을 true로 설정해야함. conn.setRequestMethod(“POST”); conn.setDoOutput(true); // POST 요청에 필요로 요구하는 파라미터 스트림을 통해 전송 BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream())); StringBuilder sb = new StringBuilder(); sb.append(“grant_type=authorization_code”); sb.append(“&client_id=f8071907fae4877f2a0f469e969f639f”); //본인이 발급받은 key sb.append(“&redirect_uri=http://localhost:8181/login/oauth_kakao”); // 본인이 설정해 놓은 경로 sb.append(“&code=” + authorize_code); bw.write(sb.toString()); bw.flush(); // 결과 코드가 200이라면 성공 int responseCode = conn.getResponseCode(); System.out.println(“responseCode : ” + responseCode); // 요청을 통해 얻은 JSON타입의 Response 메세지 읽어오기 BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream())); String line = “”; String result = “”; while ((line = br.readLine()) != null) { result += line; } System.out.println(“response body : ” + result); // Gson 라이브러리에 포함된 클래스로 JSON파싱 객체 생성 JsonParser parser = new JsonParser(); JsonElement element = parser.parse(result); access_Token = element.getAsJsonObject().get(“access_token”).getAsString(); refresh_Token = element.getAsJsonObject().get(“refresh_token”).getAsString(); System.out.println(“access_token : ” + access_Token); System.out.println(“refresh_token : ” + refresh_Token); br.close(); bw.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return access_Token; } //유저정보조회 public HashMap getUserInfo (String access_Token) { // 요청하는 클라이언트마다 가진 정보가 다를 수 있기에 HashMap타입으로 선언 HashMap userInfo = new HashMap(); String reqURL = “https://kapi.kakao.com/v2/user/me”; try { URL url = new URL(reqURL); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); conn.setRequestMethod(“GET”); // 요청에 필요한 Header에 포함될 내용 conn.setRequestProperty(“Authorization”, “Bearer ” + access_Token); int responseCode = conn.getResponseCode(); System.out.println(“responseCode : ” + responseCode); BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream())); String line = “”; String result = “”; while ((line = br.readLine()) != null) { result += line; } System.out.println(“response body : ” + result); JsonParser parser = new JsonParser(); JsonElement element = parser.parse(result); JsonObject properties = element.getAsJsonObject().get(“properties”).getAsJsonObject(); JsonObject kakao_account = element.getAsJsonObject().get(“kakao_account”).getAsJsonObject(); String nickname = properties.getAsJsonObject().get(“nickname”).getAsString(); String email = kakao_account.getAsJsonObject().get(“email”).getAsString(); userInfo.put(“accessToken”, access_Token); userInfo.put(“nickname”, nickname); userInfo.put(“email”, email); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return userInfo; } }

javascript & jsp

• 카카오 로그인

요약

해당 코드를 전체 복사하고 붙여넣되, client_id는 앱 키의 REST_API 키를, redirect_uri는 내가 애플리케이션 설정에서 등록한 Redirect_uri를 등록해야 합니다.

getKakaoAuthUrl(HttpServletRequest request)를 통해 카카오 로그인 페이지로 이동합니다. 그리고 로그인이 성공하면 카카오는 토큰을 발급해주며, 해당 토큰을 통해 유저 정보를 가져올 수 있습니다.

정리

카카오 로그인은 자바스크립트로만 사용해도 정말 쉽게 훌륭한 기능을 만들 수 있지만, 저같은 경우는 Webview를 활용해 어플을 개발해야만 했습니다. 그런데 카카오 로그인을 사용하려면 native코딩을 해야 하는데, 그럴 경우 제가 구현한 개발환경인 expo를 eject 해야만 했습니다.

expo를 사용하는 이유는 정말 누구나 쉽게 어플리케이션을 만드는 것이므로 eject 하고 싶지 않았고, 그래서 약간 우회적인 방법으로 rest api로 카카오 로그인을 구현했습니다.

여러가지를 참고하여 만든 것으로 혹시라도 잘못됐거나 안 되는 점 있으면 댓글 남겨주시면 감사하겠습니다!

반응형

[Spring] 카카오 아이디로 로그인하기 – 1

지난 네이버 아이디로 로그인하기에 이어서 다음 소셜 로그인으로 카카오를 선택했다.

선택했다기보단 지금 모 코딩 교육 프로그램에서 한번 배웠기에 간단하게라도 복기하는 느낌으로 정리하는거다.

1. 소셜 로그인?

우리가 사용하는 웹 사이트들마다 전부 회원가입을 하는것은 사용자에게 너무 부담이 된다. 귀찮으니까. 또한 대부분 지키지 않겠지만 웹 사이트마다 다른 아이디와 비밀번호를 사용해야 보안적으로도 좋기에 각각 어떤 아이디였는지 외우기도 힘들다. 웹사이트를 운영하는 측면에서도 개인정보를 지켜야하는 부담이 있다.

따라서 OAuth를 사용한 소셜로그인이 등장했다.

OAuth란,

인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준 이다. 사용자가 애플리케이션에게 모든 권한을 넘기지 않고 사용자 대신 서비스를 이용할 수 있게 해주는 HTTP 기반의 보안 프로토콜 이다.

대표적으로 구글, 페이스북, 네이버, 카카오에서 서비스를 제공해주고 있다.

카카오 로그인의 큰 흐름은 다음과 같다.

2. 카카오 로그인 설정하기

1. 카카오 디벨로퍼스에 프로젝트 등록하기

https://developers.kakao.com/console/app

애플리케이션 추가하기를 눌러서 적으라는것을 다 적는다! 등록된 애플리케이션 ID는 정확히 어디에 사용되는 것인지 모르기에 일단은 모자이크 처리를 하여서 캡쳐했다.

2. 사이트 도메인 입력

좌측 메뉴에서 플랫폼에 들어간 후 Web 플랫폼을 등록해준다.

3. Callback Url 설정하기

등록하러 가기를 눌러서 카카오 로그인이 성공하면 redirect 될 url을 설정해준다.

나는 이렇게 설정했고 controller에서 저 url을 처리해 줄 예정이다.

4. 동의항목 설정

카카오로부터 받을 사용자의 정보를 선택해야한다.

닉네임과 이메일정도만 받아보자.

다음부턴 코드로 구현해야한다. 다음 포스팅에 이어 작성하겠다.

참고:

[Spring] 스프링으로 OAuth2 로그인 구현하기3 – 카카오

1. 카카오 API 서비스 등록

1) 카카오 Devlopes 사이트로 이동한다. 링크

2) 내 애플리케이션 > 애플리케이션 추가하기 > 앱 이름 입력 (test-project) > 사업자명 입력 (test) > 저장

애플리케이션 추가

3) REST API 키 GET

REST API키

4) 앱 설정 > 플랫폼 > 웹 플랫폼 등록 > 웹 URL 입력 (http://localhost:8080) > 저장

플랫폼 등록

5) 제품 설정 > 카카오 로그인 > 활성화 설정 ON > Redirect URI (http://localhost:8080/oauth2/code/kakao) 등록

활성화 설정

6) 동의 항목 > 프로필 정보(닉네임/ 프로필 사진) 설정 > 필수 동의 체크 > 동의 목적 입력 (개발 테스트) > 저장

카카오 닉네임(profile_nickname) 설정 카카오 프로필 사진(profile_image) 설정

7) 카카오 계정(이메일) 설정 > 선택 동의 체크 > 동의 목적 입력 (개발 테스트) > 저장

이메일을 필수 입력받으려면 검수가 필요하다. 이부분은 서비스를 배포할 때 고려해줘야할 것 같다.

카카오 계정(이메일) 설정

8) 기본값 profile, account_email 정보만 설정

9) 카카오는 Secret키는 선택사항이니 패스 & Logout URL은 Spring Security가 기본으로 제공하므로 일단 연동이 목적이기 때문에 패스한다.

10) application-oauth.yml에 로그인 해당 정보 입력

스프링은 네이버,카카오는 지원이 안되기 때문에 Provider를 직접 입력해줘야 한다. 클라이언트 ID는 REST API키를 입력해주면 된다. 왜 이 값들을 넣어줘야하는지 다음 카카오 로그인 API 연동과정을 보며 살펴보자.

(스프링이 지원하는 서비스 : 구글,깃헙,페이스북,옥타)

spring: security: oauth2: client: registration: kakao: client-id: 클라이언트 ID redirect-uri: “{baseUrl}/{action}/oauth2/code/{registrationId}” # http://localhost:8080/login/oauth2/code/kakao client-authentication-method: POST authorization-grant-type: authorization_code scope: profile_nickname, profile_image, account_email client-name: Kakao provider: kakao: authorization_uri: https://kauth.kakao.com/oauth/authorize token_uri: https://kauth.kakao.com/oauth/token user-info-uri: https://kapi.kakao.com/v2/user/me user_name_attribute: id

2. 카카오 로그인 API 연동 과정

application-oauth.yml에 적은 데이터들이 어떤 역할을 하는지 API를 참고하여 알아보자.

1) redirect_uri : 인가 코드 받기 #

카카오 로그인을 시작하는 단계로써, 카카오 로그인 동의 화면을 호출하고, 사용자 동의를 거쳐 인가 코드 발급을 요청하는 API이다.

요청 URL

GET /oauth/authorize?client_id= {REST_API_KEY } &redirect_uri= {REDIRECT_URI} &response_type=code

HTTP/1.1

Host : kauth.kakao.com

응답

사용자가 [동의하고 계속하기] 선택 후 로그인 요청이 승인되면 토큰 받기 요청 필요한 인가코드를 전송해준다.

HTTP/1.1 302 Found

Content-Length: 0

Location: {REDIRECT_URI}?code={AUTHORIZE_CODE}

2) 토큰 받기 #

인가 코드를 받은 뒤, 인가 코드로 액세스 토큰과 리프레시 토큰을 발급받는 API이다. 인가 코드 받기만으로는 카카오 로그인이 완료되지 않으며, 토큰 받기까지 마쳐야 카카오 로그인을 정상적으로 완료할 수 있다.

client-authentication-method: POST

다른 서비스와는 달리 카카오는 필수 파라미터 값들을 담아 POST로만 요청이 가능하다. 그래서 yml에 client-authentication-method: POST을 명시해줘야한다.

요청 성공시, 응답은 JSON객체로 Redirect URL에 전달된다. 토큰 받기를 통해 발급받은 액세스 토큰은 사용자 정보 가져오기와 같은 카카오 로그인이 필요한 API를 호출할 때 사용한다.

요청 URL

POST /oauth/token HTTP/1.1

Host : kauth.kakao.com

Content-type: app lication/x-www-form-urlencoded;charset=utf-8

요청 Parameter

토큰을 요청할 때 grant_type, clinet_id, redirect_uri, code의 데이터는 필수로 제공해줘야 한다.

요청 Sample

curl -v -X POST “https://kauth.kakao.com/oauth/token” \

-d “grant_type=authorization_code” \

-d “client_id={REST_API_KEY}” \

-d “redirect_uri={REDIRECT_URI}” \

-d “code={AUTHORIZATION_CODE}”

3) 사용자 정보 가져오기 #

로그인한 사용자의 정보를 불러온다. 사용자 정보 요청 REST API는 사용자 액세스 토큰을 사용하는 방법, 앱 어드민 키를 사용하는 방법 두 가지로 제공되는데, 이 글에서는 전자인 사용자 액세스 토큰을 사용하는 방법을 이용한다. 어드민 키는 보안에 유의하여 사용해야 하므로 서버에서 호출할 때만 사용한다.

사용자 액세스 토큰 또는 어드민 키를 헤더(Header)에 담아 GET 또는 POST로 요청한다.

테스트 개발에서는 GET을 사용한다. (POST의 매개 변수로는 이미지 URL 값 HTTPS 여부, HTTPS 사용 여부 등을 설정할 수 있다.)

요청 URL (액세스 토큰 사용)

GET/POST /v2/user/me HTTP/1.1

Host: kapi.kakao.com

Authorization: Bearer {ACCESS_TOKEN}

Content-type: application/x-ww w-form-urlencoded;charset=utf-8

응답

카카오는 응답을 회원번호인 id로 제공한다. 사용자 로그인 정보를 획득하기 위해서는 프로필 정보 조회 API를 먼저 호출해야 한다.

user_name_attribute: id

그리고 내가 받을 데이터 email, nickname, profile_image는 해당 정보는 kakao_account라는 JSON객체로 주어진다.

아래 구현 코드에서 필요한 데이터를 꺼내서 사용하는 모습을 보여줄 것이다.

응답 데이터 형태

HTTP/1.1 200 OK { “id”:123456789, “kakao_account”: { “profile_needs_agreement”: false, “profile”: { “nickname”: “홍길동”, “thumbnail_image_url”: “http://yyy.kakao.com/…/img_110x110.jpg”, “profile_image_url”: “http://yyy.kakao.com/dn/…/img_640x640.jpg”, “is_default_image”:false }, “email_needs_agreement”:false, “is_email_valid”: true, “is_email_verified”: true, “email”: “[email protected]”, “age_range_needs_agreement”:false, “age_range”:”20~29″, “birthday_needs_agreement”:false, “birthday”:”1130″, “gender_needs_agreement”:false, “gender”:”female” }, “properties”:{ “nickname”:”홍길동카톡”, “thumbnail_image”:”http://xxx.kakao.co.kr/…/aaa.jpg”, “profile_image”:”http://xxx.kakao.co.kr/…/bbb.jpg”, “custom_field1″:”23”, “custom_field2″:”여” … } }

3. 스프링 프로젝트 카카오 로그인 연동

[Spring] 스프링으로 OAuth2 로그인 구현하기 – 구글에서 OAuth코드 기반을 잡아줬기 때문에 해당 코드와 이어진다.

1) OAuthAttributes

OAuth2UserService를 통해 가져온 카카오 OAuth2User의 attributes를 담을 클래스이다.

package com.loosie.book.springboot.config.auth.dto; import com.loosie.book.springboot.domain.user.Role; import com.loosie.book.springboot.domain.user.User; import lombok.Builder; import lombok.Getter; import java.util.Map; @Getter public class OAuthAttributes { private Map attributes; // OAuth2 반환하는 유저 정보 Map private String nameAttributeKey; private String name; private String email; private String picture; @Builder public OAuthAttributes(Map attributes, String nameAttributeKey, String name, String email, String picture) { this.attributes = attributes; this.nameAttributeKey = nameAttributeKey; this.name = name; this.email = email; this.picture = picture; } public static OAuthAttributes of(String registrationId, String userNameAttributeName, Map attributes){ //(new!) kakao if(“kakao”.equals(registrationId)){ return ofKakao(“id”, attributes); } // naver if(“naver”.equals(registrationId)){ return ofNaver(“id”, attributes); } // google return ofGoogle(userNameAttributeName, attributes); } // (new!) private static OAuthAttributes ofKakao(String userNameAttributeName, Map attributes) { // kakao는 kakao_account에 유저정보가 있다. (email) Map kakaoAccount = (Map)attributes.get(“kakao_account”); // kakao_account안에 또 profile이라는 JSON객체가 있다. (nickname, profile_image) Map kakaoProfile = (Map)kakaoAccount.get(“profile”); return OAuthAttributes.builder() .name((String) kakaoProfile.get(“nickname”)) .email((String) kakaoAccount.get(“email”)) .picture((String) kakaoProfile.get(“profile_image_url”)) .attributes(attributes) .nameAttributeKey(userNameAttributeName) .build(); } // ofGoogle, ofNaver 로직 생략… public User toEntity(){ return User.builder() .name(name) .email(email) .picture(picture) .role(Role.GUEST) // 기본 권한 GUEST .build(); } }

2) index.mustache

홈 화면에 Kakao Login버튼을 추가해준다. url은 authorization_url로 연결시켜줘서 누르면 카카오 로그인 창으로 이동한다.

{{>layout/header}}

스프링 부트로 시작하는 웹 서비스

글 등록 {{#userName}} Logged in as: {{userName}} Logout {{/userName}} {{^userName}} Google Login Naver Login Kakao Login {{/userName}}

{{>layout/footer}}

웹 로그인 테스트

1) 카카오 로그인 버튼 클릭

authorization_url로 이동한다.

2) 카카오 로그인 창 > ID, PW입력

카카오도 마찬가지로 아이디와 비밀번호가 일치하면 로그인 인가 코드가 담긴 콜백 url값을 보낸다. 그 인가 코드로 POST: oauth2.0/token 요청을 통해 인증받는다. F12 → Network를 보면 위 과정을 확인해 볼 수 있다.

3) 동의 화면을 체크해주면 로그인 성공

인증이 성공하면 로그인이 완료된다.

[Spring] 스프링으로 OAuth2 로그인 구현하기1 – 구글

[Spring] 스프링으로 OAuth2 로그인 구현하기2 – 네이버

[Spring] 스프링으로 OAuth2 로그인 구현하기3 – 카카오

[OAuth] Spring 카카오톡 Login 연동 (1)

안녕하세요. 코드짜는헬창 입니다.

이전엔 자바스크립트 SDK 로 OAuth 연동하여 사용해봤는데

이번엔 Spring 사용한 REST API연동에 대하여 포스팅 하도록 하겠습니다!

1) 카카오 개발자 센터 접속

https://developers.kakao.com/

해당 URL에 접속하여 주시길 바랍니다! 로그인도 해주시고요!

2) kakao 로그인을 사용할 웹 등록

1. 아래 사진과 같이 대문짝만한 시작하기 버튼을 클릭합니다.

2. 애플리케이션 추가 하시면 아래와 같이 팝업이 나오는데 작성하고 싶은거 작성 하시면 됩니다~

* 앱 이름 및 회사 이름은 알아서 입력하시면 됩니다~

3) 카카오톡 로그인 활성화 및 Redirect URL 등록

1. 활성화가 “OFF” 로 되어있다면 “ON” 으로 바꿔 주세요

2. Redirect URL 등록 버튼을 눌러 주시면 아래와 같은 팝업이 나옵니다. (REST API 를 사용하기 위해선 등록 하셔야합니다.)

* ex)http://localhost:8080/login

* 로그인 맵핑 경로를 지정하시는 겁니다. ex) @RequestMapping(“/login”)

4) 로그인 대상 수집 항목 등록

1. 우측에 개인정보 보호항목에 대하여 설정하시면 이메일, 성별, 프로필 정보 등 가져 올 수 있습니다.

이로써 기본 등록은 완료했으며 연동 시키는 예제는 다음 포스팅때 하도록 하겠습니다~

[Spring] 카카오 로그인 Open API

코북

안녕하세요 코북입니다. 지난번에 네아로 Open API를 사용해 네이버 아이디로 로그인 연동을 구현해봤는데요. 카카오 Open API도 같은 방식으로 구현이 돼서 기록하러 왔습니다. API의 흐름은 앞에서 언급했던 것과 동일하니 생략하도록 하겠습니다. 참고해주시면 감사하겠습니다.

https://cobook.tistory.com/31

작업 진행순서도 똑같습니다.

1. 카카오 Open API 이용신청

2. OAuth2.0 Java OpenSource Library 설정

3. Scribe Library를 이용하여 카카오 인증 버튼 적용

4. Controller

5. jsp

1. 카카오 Open API 이용신청

https://developers.kakao.com/docs/latest/ko/kakaologin/common

위 사이트에 들어가셔서 “내 애플리케이션 > 애플리케이션 추가하기”를 통해 애플리케이션을 추가해주세요. 추가 후 발행되는 REST API 키가 바로 네이버에서 사용했던 Client ID입니다. 다음은 “제품 설정 > 보안”에 들어가서 Client Secret을 발급받아야 합니다.

다음은 “제품설정 > 동의 항목”에 들어가서 Resource Owner가 Client에게 제공할 정보들을 체크해줍니다.

2. OAuth 2.0 Java OpenSource Library 설정

다음은 OAuth 2.0 프로토콜을 지원하는 Scribe OpenSource OAuth Java Library를 적용합니다. 나중에 Controller에서 Json 데이터 형식인 사용자 정보를 처리하기 위해 Json Parsing Library도 추가했습니다.

■ pom.xml에 dependency 추가

com.github.scribejava scribejava-core 2.8.1 com.googlecode.json-simple json-simple 1.1.1

■ Scribe library용 Kakao Login 구현체 추가

package city.turtle.mapper; import com.github.scribejava.core.builder.api.DefaultApi20; public class KakaoOAuthApi extends DefaultApi20 { protected KakaoOAuthApi() { } private static class InstanceHolder { private static final KakaoOAuthApi INSTANCE = new KakaoOAuthApi(); } public static KakaoOAuthApi instance() { return InstanceHolder.INSTANCE; } @Override public String getAccessTokenEndpoint() { return “https://kauth.kakao.com/oauth/token”; } @Override protected String getAuthorizationBaseUrl() { return “https://kauth.kakao.com/oauth/authorize”; } }

3. Scribe Library를 이용하여 카카오 인증 버튼 적용

카카오 로그인 연동 Business logic을 처리하기 위한 BO Class 생성하여, 인증 요청문을 구성해 줍니다.

■ KakaoLoginBO

package city.turtle.mapper; import java.util.UUID; import javax.servlet.http.HttpSession; import org.springframework.util.StringUtils; import com.github.scribejava.core.builder.ServiceBuilder; import com.github.scribejava.core.model.OAuth2AccessToken; import com.github.scribejava.core.model.OAuthRequest; import com.github.scribejava.core.model.Response; import com.github.scribejava.core.model.Verb; import com.github.scribejava.core.oauth.OAuth20Service; public class KakaoLoginBO { // 카카오 로그인 정보 private final static String KAKAO_CLIENT_ID = “클라이언트 ID, REST API키”; private final static String KAKAO_CLIENT_SECRET = “클라이언트 시크릿”; private final static String KAKAO_REDIRECT_URI = “http://localhost:8081/web/callbackKakao.do”; //Redirect URL private final static String SESSION_STATE = “kakao_oauth_state”; private final static String PROFILE_API_URL = “https://kapi.kakao.com/v2/user/me”; public String getAuthorizationUrl(HttpSession session) { String state = generateRandomString(); setSession(session, state); OAuth20Service oauthService = new ServiceBuilder() .apiKey(KAKAO_CLIENT_ID) .apiSecret(KAKAO_CLIENT_SECRET) .callback(KAKAO_REDIRECT_URI) .state(state).build(KakaoOAuthApi.instance()); return oauthService.getAuthorizationUrl(); } public OAuth2AccessToken getAccessToken(HttpSession session, String code, String state) throws Exception { String sessionState = getSession(session); if (StringUtils.pathEquals(sessionState, state)) { OAuth20Service oauthService = new ServiceBuilder() .apiKey(KAKAO_CLIENT_ID) .apiSecret(KAKAO_CLIENT_SECRET) .callback(KAKAO_REDIRECT_URI) .state(state).build(KakaoOAuthApi.instance()); OAuth2AccessToken accessToken = oauthService.getAccessToken(code); return accessToken; } return null; } public String getUserProfile(OAuth2AccessToken oauthToken) throws Exception { OAuth20Service oauthService = new ServiceBuilder() .apiKey(KAKAO_CLIENT_ID) .apiSecret(KAKAO_CLIENT_SECRET) .callback(KAKAO_REDIRECT_URI) .build(KakaoOAuthApi.instance()); OAuthRequest request = new OAuthRequest(Verb.GET, PROFILE_API_URL, oauthService); oauthService.signRequest(oauthToken, request); Response response = request.send(); return response.getBody(); } private String generateRandomString() { return UUID.randomUUID().toString(); } private void setSession(HttpSession session, String state) { session.setAttribute(SESSION_STATE, state); } private String getSession(HttpSession session) { return (String) session.getAttribute(SESSION_STATE); } }

■ Controller Class에서 BO Class를 이용할 수 있도록 servlet-context.xml에 Bean으로 등록

4. Controller

이제 로그인 화면이 나타날 때 카카오 로그인 버튼에 카카오 로그인 인증 URL을 View로 보내주기 위해 Controller를 설정해줍니다. 기존에 controller에 있던 login 메소드는 사이트로 이동만을 나타내 주는 형식이었습니다.

@RequestMapping(“/login.do”) public String login() { return “login”;

package city.turtle.web; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.io.IOException; import org.json.simple.JSONObject; import org.json.simple.parser.JSONParser; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.social.google.connect.GoogleConnectionFactory; import org.springframework.social.oauth2.GrantType; import org.springframework.social.oauth2.OAuth2Operations; import org.springframework.social.oauth2.OAuth2Parameters; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import city.turtle.mapper.KakaoLoginBO; import city.turtle.mapper.MembersMapper; import city.turtle.mapper.MembersVO; import city.turtle.mapper.NaverLoginBO; import com.github.scribejava.core.model.OAuth2AccessToken; @Controller public class CityTurtleController { /* KakaoLogin */ @Autowired private KakaoLoginBO kakaoLoginBO; // 로그인페이지 //로그인 첫 화면 요청 메소드 @RequestMapping(value = “/login.do”, method = { RequestMethod.GET, RequestMethod.POST }) public String login(Model model, HttpSession session) { /* 네아로 인증 URL을 생성하기 위하여 naverLoginBO클래스의 getAuthorizationUrl메소드 호출 */ String naverAuthUrl = naverLoginBO.getAuthorizationUrl(session); System.out.println(“네이버:” + naverAuthUrl); model.addAttribute(“urlNaver”, naverAuthUrl); /* 카카오 URL */ String kakaoAuthUrl = kakaoLoginBO.getAuthorizationUrl(session); System.out.println(“카카오:” + kakaoAuthUrl); model.addAttribute(“urlKakao”, kakaoAuthUrl); /* 생성한 인증 URL을 View로 전달 */ return “login”; } // 카카오 로그인 성공시 callback @RequestMapping(value = “/callbackKakao.do”, method = { RequestMethod.GET, RequestMethod.POST }) public String callbackKakao(Model model, @RequestParam String code, @RequestParam String state, HttpSession session) throws Exception { System.out.println(“로그인 성공 callbackKako”); OAuth2AccessToken oauthToken; oauthToken = kakaoLoginBO.getAccessToken(session, code, state); // 로그인 사용자 정보를 읽어온다 apiResult = kakaoLoginBO.getUserProfile(oauthToken); JSONParser jsonParser = new JSONParser(); JSONObject jsonObj; jsonObj = (JSONObject) jsonParser.parse(apiResult); JSONObject response_obj = (JSONObject) jsonObj.get(“kakao_account”); JSONObject response_obj2 = (JSONObject) response_obj.get(“profile”); // 프로필 조회 String email = (String) response_obj.get(“email”); String name = (String) response_obj2.get(“nickname”); // 세션에 사용자 정보 등록 // session.setAttribute(“islogin_r”, “Y”); session.setAttribute(“signIn”, apiResult); session.setAttribute(“email”, email); session.setAttribute(“name”, name); return “redirect:/loginSuccess.do”; } // 소셜 로그인 성공 페이지 @RequestMapping(“/loginSuccess.do”) public String loginSuccess() { return “loginSuccess”; }

callback호출 메소드에서 Json Parsing을 하기 위해 throws Exception으로 예외처리를 해줍니다. getAccessToken 메소드를 사용해 토큰을 가져와서 Kakao에 사용자 정보를 요청합니다. 받은 정보는 Json Parsing 처리하여 세션으로 로그인 성공 페이지에 넘겨줍니다. 카카오에서 보낸 Json 파일의 형식은

카카오 json

{“id”:아이디,”connected_at”:”2021-10-26T05:41:47Z”,”properties”:{“nickname”:”이름”}

,”kakao_account”:{“profile_nickname_needs_agreement”:false

,”profile”:{“nickname”:”이름”}

,”has_email”:true

,”email_needs_agreement”:false

,”is_email_valid”:true

,”is_email_verified”:true

,”email”:”카카오계정(이메일)”

,”has_age_range”:true

,”age_range_needs_agreement”:false

,”age_range”:”20~29″

,”has_birthday”:true

,”birthday_needs_agreement”:false

,”birthday”:”생일”

,”birthday_type”:”SOLAR”

,”has_gender”:true

,”gender_needs_agreement”:false

,”gender”:”성별”}}

이었습니다. kakao_account value > profile > nickname의 value값이기 때문에 다음과 같이 두 번 get한 후에 값에 접근했습니다. apiResult는 메인 페이지에 로그인 session으로 보냈습니다. return값은 forward가 아닌 redirect 하도록 설정했습니다. forward 방식을 사용할 경우 현재 실행된 페이지와 forward에 의해 호출될 페이지는 request, response객체를 공유하게 됩니다. 사용자의 최초 요청정보가 다음 URL에서도 유효하기 때문에 사용자가 로그인 후 새로고침을 하면 동일한 요청이 여러 번 전달될 수 있고 이를 처리하는 과정에서 오류가 발생할 수 있습니다.

JSONObject response_obj = (JSONObject) jsonObj.get(“kakao_account”); JSONObject response_obj2 = (JSONObject) response_obj.get(“profile”); // 프로필 조회 String email = (String) response_obj.get(“email”); String name = (String) response_obj2.get(“nickname”);

5. jsp

■ 로그인 페이지 jsp

도시 거북

로그인 상태 유지

로그인

다른 계정으로 로그인

회원가입

아이디/비밀번호 찾기

■ 로그인 성공 페이지 jsp – EL

도시 거북

환영합니다!

${name}님의 로그인 성공
이메일 주소는 ${email}입니다.

시작하기

구현 화면

구현 화면입니다. 카카오 디벨로퍼에서는 카카오 디자인 가이드를 따르는 것을 권장합니다.

https://developers.kakao.com/docs/latest/ko/reference/design-guide

사용 기술 및 언어

Spring MVC, JAVA, Bootstrap, JavaScript, JQuery, JSP, EL

배운 점

네이버와 동일한 방식으로 카카오 로그인을 구현해봤습니다. 두 번째이다 보니 네이버 로그인 구현할 때 보다 능숙하게 구현할 수 있었던 것 같습니다. 특히 사용자의 정보를 불러오기 위해 Json Parsing을 사용한 점과 EL태그를 사용해 간편하게 화면을 구현한 점이 큰 차이였습니다. 완성 후 servlet-context 파일에서는 KakaoLoginBO를 읽지 못하는 오류가 발생했었는데 Bean 설정을 추가하여 오류를 해결했습니다. forward방식으로 로그인을 처리하여 발생한 오류를 redirect방식으로 처리해서 해결했습니다. 로그인은 시스템(session, DB)에 변화가 생기는 요청이기 때문에 redirect방식으로 처리하는 것이 바람직합니다. 반대로 시스템에 변화가 생기지 않는 단순 조회(리스트 보기, 검색)의 경우 forward방식으로 응답하는 것이 바람직합니다.

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

Kakao developer

https://developers.kakao.com/

개발가이드

https://dalili.tistory.com/171

json 파싱

https://calyfactory.github.io/%EC%A0%9C%EC%9D%B4%EC%8A%A8%ED%8C%8C%EC%8B%B1/

https://ktko.tistory.com/entry/JAVA%EC%97%90%EC%84%9C-JSON-%ED%8C%8C%EC%8B%B1%ED%95%98%EA%B8%B0

캐스팅

https://computer-science-student.tistory.com/335

예외처리

https://imasoftwareengineer.tistory.com/89

forwar vs redirect

https://doublesprogramming.tistory.com/63

https://yenbook.tistory.com/19?category=1035000https://doublesprogramming.tistory.com/63

꿈꾸는 자 :: SPRING MVC 카카오톡 로그인 해보기

SPRING MVC 카카오톡 로그인 해보기

카카오톡 로그인이라기보다 카카오톡 간편 가입이라고 제목을 붙였어야 했나 잠깐 고민이되었지만 이게 중요한게 아니니 넘어 가야겠다.

카카오톡 로그인을 하기 위해선 카카오톡 개발자 사이트에 애플리케이션을 등록해야하는데요.

developers.kakao.com/console/app

애플리케이션추가하기

애플리케이션을 추가를 합니다. 입력만 하면 되는거라 어렵지 않을것이에요 입력을 하고 나면 생성이 되는데요.

요약정보를 눌러보면 앱키를 발급해줘요 저는 자바스크립트로 로그인을 할건데요. 여기서 2가지 앱키가 필요해요.

JAVASCRIPT 키와 REST API 키가 필요합니다.

옆에 메뉴를 눌러보다가 보면 플랫폼이라고 보이는데요 거기에 WEB을 추가합니다.

WEB WEB를 추가해요. 카카오 로그인

카카오 로그인을 ON으로 활성화 시켜주세요.

동의 항목을 설정을 하시구요.

동의항목

이러면 대충 개발자 사이트에선 설정이 된거 같아요.

여기서 중요한점은 REDIRECT URI 인데요 인데요. 제가 로그인하겠다고 앱키와 넘겨주면 코드값을 받을 주소를 입력하는곳이에요. ^^

그럼 세팅이 되었다면 계속 진행해볼께요.

메뉴를 이동해야 하는데요. 문서 > 카카오로그인 > 이해하기

여기로 이동해요. developers.kakao.com/docs/latest/ko/kakaologin/common

그럼 아래쪽에 카카오 로그인 JAVASCRIPT가 보이는데요.

로그인 설명

여기에 나와 있는대로 차근차근 따라하시면 되요.

로그인 하는페이지에 카카오라이브러리를 초기화 시켜주시고요.

로그인 버튼을 만드시고 실행되게 하세요.

로그인버튼을 누르면 이렇게 실행이 될껀데요. 그럼 서버에서 코드값을 받아서 넘어와요.

코드값으로 토근을 값을 받아와야 하는데요 이건 스크립트로 지원하지 않아요 REST API를 사용해서 해야 해요.

컨트롤러 단에서 loginpage_kakao_callback이 호출될때 코드값으로 토근값을 받아와서 페이지로 넘기도록 할게요.

//카카오톡 로그인.. @RequestMapping(value = “/loginpage_kakao_callback”, method = RequestMethod.GET) public String loginpage_kakao_callback(HttpServletRequest request, HttpServletResponse response, HttpSession session, Model model) throws Exception { UrlPathHelper urlPathHelper = new UrlPathHelper(); String originalURL = urlPathHelper.getOriginatingRequestUri(request); Map paramMap = request.getParameterMap(); Iterator keyData = paramMap.keySet().iterator(); CommonData dto = new CommonData(); while (keyData.hasNext()) { String key = ((String) keyData.next()); String[] value = paramMap.get(key); dto.put(key, value[0].toString()); } String url = “https://kauth.kakao.com/oauth/token”; RestTemplate restTemplate = new RestTemplate(); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED); LinkedMultiValueMap map = new LinkedMultiValueMap(); map.add(“client_id”, “REST 앱키를 입력하세요.”); String redirect_url = “http://localhost:8080/user/loginpage_kakao_callback”; map.add(“redirect_uri”, redirect_url); map.add(“grant_type”, “authorization_code”); map.add(“code”, dto.get(“code”)); HttpEntity> request2 = new HttpEntity>( map, headers); CommonData response2 = restTemplate.postForObject(url, request2, CommonData.class); map.clear(); model.addAttribute(“access_token”, response2.get(“access_token”)); return “/user/loginpage_kakao_callback”; }

code 값으로 access_token 값을 받아와요.

그럼 이것으로 이제 사용자 정보를 받아와 볼께요.

loginpage_kakao_callback 에서 페이지 로드가 되면 발급 받은 토근으로 정보를 받아와야하는데요.

Kakao.API.request({ url: ‘/v2/user/me’ }); 를 호출 하면 되요.

로그인에 성공을 하면 닉네임과 이메일 그리고 id를 받아올수 있었어요.

이제 이걸로 제가 간편가입을 한적이 있는지 체크를 해볼텐데요. ajax로 알아봐요.

uid로 체크를 하는데요.

체크하는 컨트롤러는 이렇게 해봤어요.

@RequestMapping(value = “/userid_duplicate_check”, method = RequestMethod.POST) @ResponseBody public CommonData userid_duplicate_check(HttpServletRequest request, HttpServletResponse response, @RequestBody CommonData dto, Model model) throws Exception { Util_Message smsp = Util_Message.getInstance(); CommonData result = new CommonData(); int cnt = first_service.listSearchCount(dto, “MemberMapper.userid_duplicate_check”); if (cnt > 0) { result.put(“result”, “id_duplication”); return result; } result.put(“result”, “ok”); return result; }

간단하게 id중복체크로 가입된적이 있는지 확인을해요.

SELECT count(1) from tb2019_member and uid = #{uid}

체크가 끝났으면요.

var callback_userid_duplicate_check = function(result) { console.log(result); if(result[‘result’]==’id_duplication’) { is_userid = false; } else if(result[‘result’]==’ok’) { is_userid = true; } }

is_userid값을 확인을 하는데요. 있다면 false값을 넣어 바로 로그인으로 넘기고 없다면 가입하는 절차를 거쳐야 해요.

휴대폰 번호를 추가로 입력을 받아야해서 카카오에서 받은 이름과 이멜은 입력해주시고요 휴대폰번호만 입력하도록 해요. 이게 필요없다면 자동가입시키시면 되요.

패스워드는 제가 임의로 생성해서 넣어두었는데요 SNS로 로그인시 아디나 비번을 직접 입력할게 아니라서 임의로 넣었어요.

그리고 가입처리를 하고나서 로그인 처리를 하시면 됩니다.

DB는 기존 홈페이지 가입시 쓰는 테이블과 혼용해서 사용중이고요. JOIN_PASS 값으로 카카오 네이버 홈페이지가입 이렇게 처리를 했어요. 이후 방법은 일반적인 홈페이지 내용과 동일해서 이만 줄일게요.

[Spring Boot] REST API를 이용한 카카오 로그인 구현

@Service @RequiredArgsConstructor public class SocialService { private final KakaoService kakaoService ; private final ObjectMapper objectMapper ; public SocialDto verificationKakao ( String code ){ SocialDto socialDto = new SocialDto (); // 코드를 이용하여 accessToken 추출 String accessToken = kakaoService . getAccessTokenByCode ( code ); // accessToken을 이용하여 사용자 정보 추출 String userInfo = kakaoService . getUserInfoByAccessToken ( accessToken ); try { JsonNode jsonNode = objectMapper . readTree ( userInfo ); String email = String . valueOf ( jsonNode . get ( “kakao_account” ). get ( “email” )); socialDto . setEmail ( “kakao_” + email . substring ( 1 , email . length () – 1 )); String name = String . valueOf ( jsonNode . get ( “kakao_account” ). get ( “profile” ). get ( “nickname” )); socialDto . setName ( name . substring ( 1 , name . length () – 1 )); String imageUrl = String . valueOf ( jsonNode . get ( “kakao_account” ). get ( “profile” ). get ( “profile_image_url” )); socialDto . setImageUrl ( imageUrl . substring ( 1 , imageUrl . length () – 1 )); } catch ( JsonProcessingException e ) { e . printStackTrace (); } return socialDto ; } }

키워드에 대한 정보 spring 카카오 로그인 api

다음은 Bing에서 spring 카카오 로그인 api 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.

이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!

사람들이 주제에 대해 자주 검색하는 키워드 카카오계정으로 로그인하기 (카카오톡 로그인 API 사용하기)

• 자바스크립트
• javascript
• html
• html5
• 웹개발
• 기초
• 웹개발기초
• 자바스크립트 기초
• html 기초
• 자바스크립트 팁
• css
• vue.js
• react
• react.js
• angular
• 안드로이드
• ios
• 제주도
• 디지털노마드
• 소프트웨어
• node.js
• node js
• bootstrap
• 부트스트랩
• flutter
• 플러터
• vue
• 인공지능
• 머신러닝
• 딥러닝
• ai
• 텐서플로우
• tensorflow
• 빅데이터
• big data
• 회원가입
• sns 로그인
• 카카오톡

카카오계정으로 #로그인하기 #(카카오톡 #로그인 #API #사용하기)

---

YouTube에서 spring 카카오 로그인 api 주제의 다른 동영상 보기

주제에 대한 기사를 시청해 주셔서 감사합니다 카카오계정으로 로그인하기 (카카오톡 로그인 API 사용하기) | spring 카카오 로그인 api, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.