kakao Developers(Oauth 2.0 설정) 설정 및 적용법

https://developers.kakao.com/

Kakao Developers

 

1. 사이트에 앱 등록 (우리 웹/앱 생성)

 

---

2. 클라이언트 키 (REST API 키)

앱>플랫폼 키> REST API 키 클릭

---

REST API키

 

 

---

3. 클라이언트 시크릿 키(REST API 키)

4. 리다이렉트 URI설정( http://localhost:8080/kakao-redirect)

---

5. 동의 항목 구성하기(닉네임, 프로필 이미지 설정)

앱->카카오로그인>동의항목>개인정보에서 닉네임, 프로필사진 필수동의로 설정 및 목적에 맞게 작성

---

---

6. 카카오 소셜 로그인 이미지 다운로드 후 이미지 파일 이름 수정
(우리 프로젝트 static/img 폴더 생성 후 파일 저장)

 

---

---

kakao_login.png

static에 img 파일 생성 후 이미지 넣기

---

7. 사전 설정 (. env 파일설정 -시크릿키, 클라이언트 키 저장)

설정>플러그인>env 설치

 

---

8.. env 파일에 클라이언트 키, 시크릿 키 저장(공백조심)

KAKAO_CLIENT_ID=13406fd2b29c4d7b2ec3920b9f9e4775
KAKAO_CLIENT_SECRET=G8jsX71pQ2T6QK0M28uj7Hl879VsSVUj

최상위 폴더에 .env파일 생성 후 카카오 RESET API 키 넣기

---

9.  gitignore에. env 파일 설정(git이 이제 이 파일을 추적하지 않음)

---

10. 팀 협업을 위해서. env.example 파일을 설정해 준다(팀원들을 위해서)

 

---

11. 초기 파라미터 설정(application.yml) 클라이언트 키, 시크릿 키 변수로 등록

 

주의점: profiles: 랑 같은 열에 config: 내용이 들어가야함

---

12. @Value("{....}") 값 확인

---

알고 있으면 좋은 내용

OAuth 2.0 권한 부여 코드 승인 흐름

 

4.1. 권한 부여 코드 승인 (Authorization Code Grant)

권한 부여 코드 승인 방식은 액세스 토큰(Access Token)과 리프레시 토큰(Refresh Token)을 모두 얻기 위해 사용되며, 기밀 클라이언트(Confidential Clients)에 최적화되어 있습니다. 이 방식은 리다이렉션 기반의 흐름이므로, 클라이언트는 리소스 소유자의 사용자 에이전트(User-Agent, 주로 웹 브라우저)와 상호작용할 수 있어야 하며, 권한 부여 서버로부터 오는 (리다이렉션을 통한) 수신 요청을 받을 수 있어야 합니다.

 

[그림 3: 권한 부여 코드 흐름]

이 다이어그램은 권한 부여 코드 승인의 단계별 절차를 보여줍니다.

• (A) 클라이언트가 사용자 에이전트를 통해 리소스 소유자에게 권한 부여를 요청합니다. 이때 클라이언트 식별자(Client ID)와 리다이렉션 URI를 포함합니다.
• (B) 리소스 소유자가 사용자 에이전트를 통해 권한 부여 서버에 인증을 진행하고 권한을 승인합니다.
• (C) 권한 부여 서버는 사용자 에이전트를 통해 클라이언트에게 권한 부여 코드(Authorization Code)를 전달합니다.
• (D) 클라이언트는 권한 부여 서버에 직접 권한 부여 코드와 리다이렉션 URI를 제시하며 액세스 토큰을 요청합니다.
• (E) 권한 부여 서버는 클라이언트를 인증하고 코드를 검증한 후, 액세스 토큰 (및 선택적으로 리프레시 토큰)을 발급합니다.

참고: 단계 (A), (B), (C)를 나타내는 선은 사용자 에이전트를 거쳐 가기 때문에 두 부분으로 나뉘어 표시되어 있습니다.

---

13. 동의항목 요청주소 설계

카카오로그인>REST API> GET의 URL 복사 후 client_id값,redirect_uri값,response_type값 넣어 주소만들기

 

GET    
https://kauth.kakao.com/oauth/authorize?client_id=13406fd2b29c4d7b2ec3920b9f9e4775
&redirect_uri=http://localhost:8080/kakao-redirect
&response_type=code

client_id= "내 클라이언트 키 (REST API 키)값 넣기"
redirect_uri= " 내 리다이렉트 URI 넣기"
response_type= " 기본 code로 고정하기"

---

14. user/login-form.mustache 파일에 추가하기

 

추가코드

<div class="mt-3">
                <a href="https://kauth.kakao.com/oauth/authorize?client_id=
13406fd2b29c4d7b2ec3920b9f9e4775&redirect_uri=http://localhost:8080/kakao-redirect&
response_type=code"><img src="/img/kakao_login.png.png" alt="소셜로그인"></a>
                
            </div>

 

전체 코드

{{> layout/header}}
<div class="container p-5 flex-grow-1">
    <div class="card">
        <div class="card-header"><b>로그인을 해주세요</b></div>
        <div class="card-body">
            <!-- 자원에 요청은 GET 방식이 맞음
                  예외적으로 로그인 요청은 Post 처리해주어야 한다.
                  보안적인 이슈 때문.
            -->
            <form action="/login" method="post">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="enter username" name="username" value="admin">
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="enter password" name="password"
                           value="1234">
                </div>
                <button type="submit" class="btn btn-primary form-control">로그인</button>
            </form>
            <div class="mt-3">
                <a href="https://kauth.kakao.com/oauth/authorize?client_id=
13406fd2b29c4d7b2ec3920b9f9e4775&redirect_uri=http://localhost:8080/kakao-redirect&
response_type=code"><img src="/img/kakao_login.png.png" alt="소셜로그인"></a>

            </div>
        </div>
    </div>
</div>
{{> layout/footer}}

---

사용 설정 켜주기(코드 문제없는데 요청화면이 안 뜰 때)