| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 |
- 참고자료 https://velog.io/@imok-_/javascript-dom-bom-%ec%9d%b4%eb%9e%80
- https://ittrue.tistory.com/90
- https://developers.kakao.com/
- Today
- Total
쿠쿠더님의 블로그
OAuth 2.0 카카오 로그인 본문
여기서는 간단하게 카카오 로그인에대해서 설명해 드리겠습니다 .
카카오 로그인 로직이란
- 카카오 로그인은 현재 2.0프로토콜을 사용해서 인증을 처리하고 있고 사용자인증을 API을 제공하고있고
APi를 활용해서 카카오 계정으로 로그인하고 동의를 받은후 인가코드를 전달받아서 코드를 가지고
정보를 요청해서 사용자 인증을 처리한다.
1. 사용자의 인증 : 유저가 어플리케이션에서 카카오로그인을 클릭하게 되면 리다이렉트로 카카오 서버의 로그인 화면으로 이동 카카오 서버에서 제공받은 로그인 화면에서 로그인을 하고 동의 화면 까지 처리하게되면 authorization code 인가 코드를 받아서 백엔드에게 전달 콜백 url 즉 리다이렉트 하는데 쿼리 스트링으로 인가코드를 전달.
> 카카오 서버에 로그인 요청을 보낼때에도 get방식으로 리다이렉트를 하는데. 쿼리 스트링으로 포함시켜서 요청을 보낸다.
1 - 1 쿼리스트링으로 담아주는 내용은
- 인증코드의 형태를 요청하는 구문 : response_type=code
- 클라이언트의 아이디 즉 우리가 만든 서비스 어플리케이션의 아이디값 고유의 값 : client_id
- 리다이렉트 될 백엔드의 경로 로그인이후 요청보낼 백엔드 경로 즉 인가 코드가 있는 상태 : redirect_uri
- 동의에 필요한 내용을 권한의 목록 : scope=profile_nickname,profile_image,friends,talk_message
2. 인가 코드 : 유저가 로그인하고 동의화면에서 동의까지 하면 카카오에서 발급해주는 인증 코드를 우리 백엔드 경로로 리다이렉트 요청을 보내서 처리한다. 이 코드는 즉 인증을 받았다는 의미 유저가 동의한 내용의 API를 사용해서 유저의 정보 또는 메시지 전송 등 친구목록의 API를 호출할수 있다.
3. 엑세스 토큰 : 인가 코드까지 받고 나면 로그인 요청을 보낸뒤 엑세스 토큰 즉 카카오 로그인을 한 유저가 얼마나 인증 권한을 유지할지.
3-1 요청에 필요한 값
- grant_type=authorization_code
- code : 인가 코드
- redirect_url : 재요청 보낼 백엔드의 주소
- client_id : 어플리케이션의 고유 아이디 값
- client_secret : 어플리케이션의 비밀키 (카카오 디밸로퍼 개발자 사이트에서 제공받는다.)
> 엑세스 토큰과 리프레시 토큰이 생성된다.
4. api 유저 정보 요청
> 유저의 정보를 요청할수 있는 권한이 생기고 엑세스 토큰값을 가지고 인증 권한을 동의한 목록에 API를 호출할수 있다. 요청보낼수 있다.
> https://kapi.kakao.com/v2/user/me이런 API에 요청을 할때 엑세스 토큰을 헤더에 포함시켜서 요청을 보내줘야한다.
> 헤더에 { Authorization : Bearer 토큰 값} : Authorization 인증 토큰이라는 내용의 헤더의 값이고 Bearer 통상적으로 알려주는것.
> Bearer는 명칭을 정해놓은것 인증 토큰의 값이라고 알려주는것. 토큰 검증을하고 API의 응답을 해준다.
아래 접속 카카오 ------------------------------------------------------------------------- 로그인 API하는 방법
## 카카오 어플리케이션 생성
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api -->
1. 개발자 사이트 접속
https://developers.kakao.co
developers.kakao.co
여기에 접속을 합니다.
2. 내 어플리케이션 탭에서 어플리케이션 생성
3. 앱 키의 사용할 키 목록을 확인해서 사용할 키의 값을 가져오고 CLIENT_ID
4. 제품 설정에 카카오 로그인 탭 클릭
5. 카카오 로그인 활성화 설정 및 OpenID Connect 활성화 설정
6. Redirect url 저장 : 로그인 후에 동의화면 이후 인가 코드 받고 난뒤에 요청할 우리 백엔드 경로
> 예) http://localhost:3000/auth/kakao/callback
7. 제품 설정 탭에 동의 항목 설정 : API 요청을 보낼때 권한을 인증받은 서비스만 요청을 처리할수 있다. 팔요한 내용들은 모두 동의항목으로 추가.
8. 제품 설정 탭에 보안 탭의 비밀키 생성 코드 생성 : 토큰의 값을 더 안전하게 암호화 하기 위해서 사용되는 값 노출되면 안된다.
9. 제품 설정 탭에 고급 탭의 Logout Redirect URI 추가 : 로그아웃 요청이후 처리할 백엔드 경로 지정 엑세스토큰과 리프레시토큰이 만료되는 요청을 logout API로 제공한다.
> 예) http://localhost:3000/auth/kakao/logout/callback
api 개발자 가이트 모든 api
> https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#req-user-info
### 어플리케이션 설정 이후
> 페이지에서 카카오 로그인 요청 하시면 됩니다.
카카오 로그인 API 사용방법입니다... 이미지가 없는점은 죄송합니다 다음에는 더열심히 해보겠습니다...
'NODEJS' 카테고리의 다른 글
| webRTC란? (0) | 2025.04.21 |
|---|---|
| 웹 소켓이란? (0) | 2025.04.21 |
| Frountend와 Backend (0) | 2025.03.10 |
| CORS란 (0) | 2025.03.10 |
| AJAX, Fetch, Axios (0) | 2025.03.10 |