공통 OAuth 2.0 연동 - 카카오 API(카카오톡 프로필)
2018.12.26 16:32
업데이트 내역
2019-10-23 : [3. 엑세스 토큰 취득] 버튼 클릭 시 Accept 속성 추가
이 글에서는 OAuth 2.0을 이용해 카카오 API와 연동하는 방법을 델파이를 통해 알아봅니다.
이 글을 통해 카카오톡 프로필 정보와 사진을 델파이 애플리케이션에서 불러오는 예제를 작성할 수 있습니다.
OAuth 2.0
API(또는 서비스) 이용 시 인증(Authentication)과 리소스(제공 서비스)에 대한 권한부여(Authorization)는 필수사항입니다. 인증과 권한부여의 대표적인 방법 중 하나가 OAuth입니다.
OAuth는 서버와 클라이언트 사이에 인증을 완료 시 권한부여의 결과로 엑세스 토큰(Access Token)을 발급하고, 이 엑세스 토큰을 이용해 클라이언트는 API(또는 서비스)에 접근 및 서비스를 요청하게 됩니다. 서버는 엑세스 토큰 기반으로 서비스와 권한에 대한 접근 여부를 판단해 데이터를 제공합니다.
OAuth는 현재 2.0 버전을 제공하며, 카카오, 구글, 페이스북에서 OAuth 2.0을 통해 서비스에 대한 인증 및 권한부여를 사용하고 있습니다.
OAuth 2.0에 대한 내용은 자세한 내용은 이 글의 하단 "관련/참고 링크"를 통해 알아볼 수 있습니다.
OAuth 2.0 사용 시 API 인증 흐름
다음 그림은 카카오 API 서비스에 접근하기 위해 OAuth 2.0 인증의 흐름을 7 단계로 나타냅니다.
0, 카카오 서비스를 이용하려면 사전에 앱을 등록 후 앱의 API 키를 발급받아야 합니다.
1, 카카오 서비스에 접근하기 위해 카카오 로그인 페이지를 웹브라우저에 표시합니다.
2, 사용자는 로그인 페이지에 ID, 비밀번호를 입력해 인증을 요청합니다.
3, 카카오 인증서버는 사용자를 인증하고 사용자 인증완료 페이지로 리다이렉션합니다. 이때 인증 코드를 함께 전달합니다.
4, 애플리케이션은 리다이렉션 URL을 분석해 인증코드를 획득합니다.
5, 애플리케이션은 카카오 인증서버에 제대로 인증된 사용자인지 확인 요청을 합니다.
6, 카카오 인증서버는 인증된 사용자임을 확인하고, 엑세스 토큰(Access Token)을 발급합니다.
7, 애플리케이션은 발급받은 엑세스 토큰을 이용해 카카오 API 서버에 접근합니다.
델파이로 OAuth 2.0 구현
위의 API 흐름을 카카오 OAuth와 카카오톡 프로필과 연동하는 과정을 델파이를 통해 구현해봅니다.
다음과 같은 데모를 구현합니다.
구현 과정은 크게 준비 + 3단계로 구분됩니다.
[준비] 카카오 서비스에 앱 등록 및 API 키 발급
[1단계] 인증페이지에 로그인 해 인증코드 취득
[2단계] 인증코드로 엑세스 토큰 취득
[3단계] 엑세스 토큰으로 서비스 접근
[준비] 앱 등록 및 API 키 발급
앱 만들기
앱을 생성하면 다음 그림과 같이 키가 생성됩니다. 우리는 REST API 키를 사용할 것이므로 REST API 키를 복사해 보관해 둡니다.
하단의 설정 링크를 눌러 상세 설정화면으로 이동합니다.
플랫폼 추가
기본 정보 화면에서 [플랫폼 추가] 버튼을 누릅니다.
웹을 선택하고, 여러분들의 사이트 도메인을 입력합니다. [추가] 버튼을 누릅니다.
사이트 도메인과 Redirect Path를 확인 후 [저장] 버튼을 누릅니다.
사이트 도메인 + Redirect Path(저의 경우 http://hjf.pe.kr/oauth)는 실제 존재하는 페이지를 지정해야 합니다.
이 페이지는 카카오 로그인 후 리다이렉션되는 페이지로 아무 기능이 없더라도 페이지를 생성해 놔야 합니다.(페이지가 없으면 404 not found 오류가 발생합니다.)
운영하는 서비스가 없이 테스트 목적이라면 제 도메인을 등록하도록 합니다.(하지만 언제든 페이지를 삭제할 수 있으니 테스트 목적으로만 사용하시기 바랍니다.)
사용자 관리 활성화
사용자 관리 메뉴로 이동 후, 사용자 관리를 활성화 합니다.
우리는 카카오 프로필 정보에 접근할 것이므로 프로필 정보 하단의 수집목적을 적절히 입력하고, [설정] 버튼을 클릭합니다.
앱 등록 및 API 키 발급 과정이 완료되었습니다.
[준비] 프로젝트 생성 및 화면 구성
[1단계] 로그인 및 인증코드 취득
카카오 인증서버에 로그인 후 인증코드를 받는 과정을 개발합니다.(위의 API 인증 흐름의 1~4 단계 과정입니다.)
[Request]
[Response]
Request와 같이 페에지를 표시 후 사용자 로그인 성공 시 Response와 같이 redirect_url로 페이지 이동됩니다. 이때 인증 코드(authorize_code)가 함께 전달됩니다.
Button1 클릭 이벤트에 다음과 같이 코드를 입력합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
procedure TForm1 . Button1Click(Sender: TObject); var url: string ; param: string ; begin Edit1 . Text := '' ; param := '/oauth/authorize?client_id={app_key}&redirect_uri={redirect_uri}&response_type=code' ; param := param . Replace( '{app_key}' , API_KEY); WebBrowser1 . URL := url + param; WebBrowser1 . Navigate; end ; |
API_KEY는 상수로 implementation 위에 등록했습니다.(앱 생성 시 등록한 REST API 키를 XXXXX 대신 입력합니다.)
1
2
3
4
5
|
const // 카카오톡 개발자 사이트에서 앱 등록 후 API키를 등록하세요. API_KEY = 'XXXXXXXXXXXXXXXXX' ; implementation |
로그인 성공 시 인증코드 수신하는 내용을 작성합니다. WebBrowser1의 OnDidFinishLoad(페이지 전환 완료) 이벤트 생성 후 다음 코드를 입력합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
procedure TForm1 . WebBrowser1DidFinishLoad(ASender: TObject); var url: string ; code: string ; begin Memo1 . Lines . Add( 'WebBrowser1DidFinishLoad' + WebBrowser1 . URL); if Edit1 . Text <> '' then Exit; url := WebBrowser1 . URL; if Pos( 'code=' , url) > 0 then begin code := Copy(url, Pos( 'code=' , url) + Length( 'code=' ), Length(url)); if Pos( '&' , code) > 0 then code := Copy(code, 1 , Pos( '&' , code)- 1 ); Edit1 . Text := code; end ; end ; |
제일 첫줄은 URL을 메모에 출력하는 로그성 기능입니다.
13~20줄에서 변경된 URL 중 인증코드 파라메터("code=")가 있는 경우 인증코드 값을 가져와 Edit1.Text에 설정합니다.
[2단계] 엑세스 토큰 취득
인증코드를 받은 다음, 이를 이용해 실제로 API를 호출할 수 있는 엑세스 토큰(Access Token)을 받아오는 내용을 구현합니다.
[Request]
[Response]
위 문서와 같이 POST로 요청 후 받은 응답 값(json 포맷)에서 access_token 값을 취득해야 합니다.
이 기능은 REST Client 프레임워크를 이용해 개발합니다.
화면에 TRESTClient, TRESTRequest, TRESTResponse 3개의 컴포넌트를 추가 합니다.
[3. 엑세스 토큰 취득] 버튼의 클릭 이벤트에 다음과 같이 구현합니다.
(아래 과정은 디자인 타임에서 컴포넌트에 직접 설정해도 무관합니다.)
(2019-10-23 추가: HTTP ERROR 406 오류 발생 해 Accept := '*/*'; 라인 추가)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
procedure TForm1 . Button2Click(Sender: TObject); var token: string ; begin RESTRequest1 . Resource := 'oauth/token' ; RESTRequest1 . Method := rmPOST; RESTRequest1 . Accept := '*/*' ; RESTRequest1 . Params . Clear; RESTRequest1 . Params . AddItem( 'grant_type' , 'authorization_code' ); RESTRequest1 . Params . AddItem( 'client_id' , API_KEY); RESTRequest1 . Params . AddItem( 'code' , Edit1 . Text); RESTRequest1 . Execute; Memo1 . Lines . Text := RESTResponse1 . Content; if RESTResponse1 . JSONValue . TryGetValue< string >( 'access_token' , token) then Edit2 . Text := token; end ; |
개발가이드와 같이 요청 정보를 RESTClient와 RESTRequest 컴포넌트의 속성과 파라메터에 설정한 후 실행(RESTRequest1.Execute;) 후 받은 응답에서 엑세스 토큰(access_token)을 받아 Edit2.Text에 설정합니다.
엑세스 토큰을 받는 과정까지 마쳤습니다. 이제 엑세스 토큰을 이용해 카카오톡 프로필 정보에 접근해 데이터를 연동 할 수 있습니다.
[3단계] 카카오톡 프로필과 연동
엑세스 토큰을 얻었다면 카카오톡 프로필 서비스와 연동해 프로필 정보를 받아올 수 있습니다.
카카오 개발가이드 중 카카오톡-프로필요청 부분의 문서를 참고해 개발합니다.
- https://developers.kakao.com/docs/restapi/kakaotalk-api#프로필-요청
[Request]
[Response]
위 문서와 같이 GET으로 요청 후 프로필 정보와 프로필 이미지 정보를 받아올 수 있습니다.
그리고, 프로필 이미지를 받기 위한 컴포넌트를 화면에 추가합니다.
[4, 카카오톡 프로필 조회] 버튼의 클릭 이벤트에 다음과 같이 구현합니다.
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
32
33
34
|
procedure TForm1 . Button3Click(Sender: TObject); var Url: string ; Stream: TMemoryStream; begin OAuth2Authenticator1 . AccessToken := Edit2 . Text; RESTClient2 . Authenticator := OAuth2Authenticator1; RESTRequest2 . Client := RESTClient2; RESTRequest2 . Response := RESTResponse2; RESTRequest2 . Resource := 'v1/api/talk/profile' ; RESTRequest2 . Execute; Memo1 . Lines . Text := RESTResponse2 . Content; Url := RESTResponse2 . JSONValue . GetValue< string >( 'profileImageURL' ); RESTClient3 . BaseURL := Url; RESTClient3 . Authenticator := OAuth2Authenticator1; RESTRequest3 . ExecuteAsync( procedure begin Stream := TMemoryStream . Create; try Stream . WriteData(RESTResponse3 . RawBytes, RESTResponse3 . ContentLength); ImageControl1 . Bitmap . LoadFromStream(Stream); finally Stream . Free; end ; end ); end ; |
6번째 라인에서 권한 컴포넌트에 엑세스 토큰을 설정합니다.
8~17 라인에서 프로필 정보를 요청하고, 응답받은 컨텐츠 내용을 메모에 출력합니다.
19번째 라인에서 프로필 이미지 URL을 추출합니다.
21~33 라인에서는 프로필 이미지를 비동기(Async)로 받아 이미지 컨트롤에 표시합니다.
완료 및 테스트
추가 학습할 내용
- REST API 이해하기
- REST API 서버 개발하기(엔드포인트 구현, RAD 서버 이용)
- REST API 클라이언트 개발하기(REST Client 이용)
- 데이터셋 기반 REST API 개발하기
관련/참고 링크
- OAuth 2.0 공식 페이지 - https://oauth.net/2/
- 카카오 서비스 관련 링크
- 카카오톡 api - https://developers.kakao.com/docs/restapi/kakaotalk-api
- 카카오 RESTAPI 사용자 관리 - https://developers.kakao.com/docs/restapi/user-management#로그인
- 참고 링크
- Naver D2: OAuth와 춤을 - https://d2.naver.com/helloworld/24942
- 이상한모임: 내 맘대로 OAuth 2.0 정리 - http://blog.weirdx.io/post/39955
댓글 9
-
Firemonkey
2018.12.28 18:13
-
험프리
2019.01.16 09:53
양병규님의 어떤 포스트인지 찾을수가 없네요^^
네이버 OAuth 2.0 샘플은 준비되어 있지 않습니다. 기회가되면 진행하고 공유하겠습니다.
또는 위 내용을 참고하셔서 직접 진행해 보시고 부족한 부분을 댓글로 달아주시면 답변 드리겠습니다. 훨씬 빠르고 정확하게 원하는 기능을 개발하실 수 있을 것입니다.
-
ILU
2019.03.21 19:22
-
-
험프리
2019.03.24 11:52
해당 게시물은 FMX 프로젝트로 진행했지만, VCL 프로젝트로 진행 가능합니다.
WebBrowser1.Navigate(URL) 형태로 VCL 웹브라우저 컴포넌트에 맞게 작성하시면 됩니다.
이벤트도 FMX와 VCL이 다르니 적절한 이벤트를 찾아서 진행하실 수 있습니다.
이미지의 경우도 단순히 이미지를 표시하는 것이기 때문에 TcxImage를 사용해도 무방할 것으로 보입니다.
한번 천천히 컴포넌트 하나씩 파악하며 진행해보시기 바랍니다.
-
델파인
2019.04.08 04:49
http://apis.map.daum.net/android/guide/#urlscheme_open_mapapp
안드로이드앱에 다움카카오맵 MApView 띄우기와 지도앱 URL Scheme 작업중
URL Scheme 이건 델파이 에서 어떤 방법으로 구현 해야 되나요?
WebBrowser URL 에 넣으니 앞에 http:// 붙으며 에러 나오고...(다움 인증코드 발급과 안드로이드앱 출시는 완료 입니다)
daummaps://open 지도앱을 실행합니다.
-
험프리
2019.04.08 10:02
안드로이드에서 외부 앱 실행은 다음 글을 참고하시기 바랍니다.
안드로이드 외부앱 실행 가능한가요? - http://tech.devgear.co.kr/delphi_qna/421550
——————
답글이 도움이 되셨는지 다른 분들도 참고할 수 있도록 결과 댓글 부탁드립니다.
(결과 댓글이 없는 경우 다른 질문에 대한 답변이 달리지 않는 불이익이 있을 수 있습니다.)
-
edeaux
2019.09.20 16:25
I got 'HTTP/1.1 406 Not Acceptable' after I clicked '3, 엑세스 토큰 취득' button. Do you have an idea why?
-
edeaux
2019.09.21 18:23
I have solved the problem. Accept property of RESTRequest must be '*/*'.
-
험프리
2019.10.23 17:02
Thank you very much.
양병규씨가 개인 블로그에 올리신 포스트랑 비슷한거 같네요~!
혹시 네이버 Oauth2.0 샘플파일이 있을까요?