일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- iupc
- 2022
- shake!
- expand item
- vue-google-login
- 인하대 프로그래밍 경진대회
- vue3
- dart
- 리버싱
- 레지스터
- 앳코더
- Good Bye 2022: 2023 is NEAR
- list_display
- 카카오 API
- Div. 2
- Round 866
- 밑바닥부터 시작하는 딥러닝 1
- Codeforces Round 831 (Div. 1 + Div. 2)
- 코드포스
- Flutter
- Graph Cost
- 기본키 변경
- django
- Hello 2023
- idpiframe_initialization_failed
- 카카오 로그인
- 알고리즘 대회
- E - Hanging Hearts
- 넥토리얼
- 1557
- Today
- Total
pseong
카카오 로그인 API 프론트 엔드로부터 인가코드 받아오기 본문
작년에 진행한 캘린더 앱에서는 로그인 api를 구현할 때 프론트 엔드로부터 인가 코드가 아닌
인가 코드로 카카오 서버로부터 생성한 토큰을 프론트 엔드에서 받아서 카카오 로그인을 구현했다.
원래 작동 방식은 다음과 같다.
하지만 이번 주식 프로젝트에서는 로그인 api를 구현할 때 프론트 엔드로부터 인가 코드를 받고
백엔드에서 인가코드로 토큰을 얻은 다음 그 토큰으로 사용자 정보를 얻어왔다.
일단 작년에 프론트엔드로부터 인가 코드가 아닌 토큰을 받아온 큰 이유 중 하나는
카카오 developers 계정에서 다음과 같은 4가지의 키를 이용해야 하는데
네이티브 앱 키, REST API 키, JavaScript 키, Admin 키
이 4가지의 키를 서버에서 사용 안 해도 되기 때문이었다. ( 단지 편의를 위해서 )
하지만 보안 문제도 있다고 하여 이번 기회에 한번 인가 코드를 서버에서 받아서 하는 식으로 했다.
그렇게 되면 같은 계정의 저 4가지 키를 사용해야 한다.
따라서 프론트 엔드가 kakao developers 에서 계정을 만들기로 하고
서버 측에서는 프론트 엔드가 발급받은 4가지 키 중에서 rest api 키를 프론트 엔드에게 물어봐야 한다.
이렇게 해서 시도를 했지만 문제가 있었는데 해결했다.
프론트엔드가 인가 코드를 받을 때 사용한 redirect url은 프론트엔드 측에서 인가코드를 이용하여 토큰을 발급 받을 때 넣는 redirect url에다가도 넣어준다.
그리고 그 인가코드를 서버에게 보내준 다음 서버도 그 인가코드를 사용해서 토큰을 발급받아야 하는데
이때 redirect url도 프론트엔드가 썼던 redirect url로 적어줘야 한다.
나 같은 경우는 redirect url를 서버에서 진행하고 있는 그 url를 적어줬더니 계속 에러가 났다.
꼭 프론트엔드와 백엔드가 같은 redirect url를 사용하도록 하자.
'백엔드' 카테고리의 다른 글
AWS CloudFront 사용하여 HTTPS 적용하기 (0) | 2023.04.23 |
---|---|
[데이터 베이스] mul key 중복 제거 후 primary key로 바꾸기 (0) | 2022.07.31 |