공통 OAuth 2.0 연동 - 카카오 API(카카오톡 프로필)

2018.12.26 16:32

험프리 조회 수:10290

업데이트 내역

 

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 키 발급

카카오 서비스를 이용하기 위해서는 사전에 앱을 등록 후 API 키를 발급받는 과정이 필요합니다.
다음 링크를 방문해 앱을 생성하고, REST API 키를 획득합니다.

 

앱 만들기

앱 이름을 입력하고 [앱 만들기] 버튼을 클릭합니다.

 

앱을 생성하면 다음 그림과 같이 키가 생성됩니다. 우리는 REST API 키를 사용할 것이므로 REST API 키를 복사해 보관해 둡니다.

하단의 설정 링크를 눌러 상세 설정화면으로 이동합니다.

 

 

플랫폼 추가

기본 정보 화면에서 [플랫폼 추가] 버튼을 누릅니다.

 

 

웹을 선택하고, 여러분들의 사이트 도메인을 입력합니다. [추가] 버튼을 누릅니다.

 

사이트 도메인과 Redirect Path를 확인 후 [저장] 버튼을 누릅니다.

사이트 도메인 + Redirect Path(저의 경우 http://hjf.pe.kr/oauth)는 실제 존재하는 페이지를 지정해야 합니다.

이 페이지는 카카오 로그인 후 리다이렉션되는 페이지로 아무 기능이 없더라도 페이지를 생성해 놔야 합니다.(페이지가 없으면 404 not found 오류가 발생합니다.)

 

운영하는 서비스가 없이 테스트 목적이라면 제 도메인을 등록하도록 합니다.(하지만 언제든 페이지를 삭제할 수 있으니 테스트 목적으로만 사용하시기 바랍니다.)

 

 

사용자 관리 활성화

사용자 관리 메뉴로 이동 후, 사용자 관리를 활성화 합니다. 

우리는 카카오 프로필 정보에 접근할 것이므로 프로필 정보 하단의 수집목적을 적절히 입력하고, [설정] 버튼을 클릭합니다.

 

 

앱 등록 및 API 키 발급 과정이 완료되었습니다.

 

[준비] 프로젝트 생성 및 화면 구성

이 예제는 델파이 10.3 리오 버전을 이용해 작성되었습니다. XE5이후 버전에서 문제가 없을것으로 생각됩니다. 다른 버전으로 진행 시 문제가 있다면 댓글을 통해 문의 주시기 바랍니다.
 
이 예제는 Multi-device Application(FMX 프레임워크)로 작성합니다. VCL Form Application으로 진행 가능하지만, 일부 속성 및 메소드, 이벤트에 차이가 있을 수 있습니다.
 
File > New > Multi-Device Application 메뉴를 선택 후 Blank Application을 선택 해 프로젝트를 생성합니다.
 
다음 화면을 참고해 화면을 구성합니다.

 

 

[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 := '';
 
  url := 'https://kauth.kakao.com';
  param := '/oauth/authorize?client_id={app_key}&redirect_uri={redirect_uri}&response_type=code';
  param := param.Replace('{app_key}', API_KEY);
  param := param.Replace('{redirect_uri}', 'http://hjf.pe.kr/oauth');
 
  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
  RESTClient1.BaseURL := 'https://kauth.kakao.com/';
 
  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('redirect_uri', 'http://hjf.pe.kr/oauth');
  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으로 요청 후 프로필 정보와 프로필 이미지 정보를 받아올 수 있습니다.
주의사항은 요청 시 Authorization 항목이 포함되어 권한 컴포넌트를 하나더 사용합니다.
 
화면에 TRESTClient, TRESTRequest, TRESTResponse, TOAuth2Authenticator 4개의 컴포넌트를 추가 합니다.

 

그리고, 프로필 이미지를 받기 위한 컴포넌트를 화면에 추가합니다.

 

[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.BaseURL := 'https://kapi.kakao.com/';
  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)로 받아 이미지 컨트롤에 표시합니다.

 

완료 및 테스트

카카오톡 프로필과 연동하는 예제 구현이 완료되었습니다.
 
작성한 프로젝트를 실행해 여러분의 카카오 계정을 이용해 테스트 진행할 수 있습니다.
 
완성된 프로젝트 파일

추가 학습할 내용

카카오 서비스 연동 및 인증(OAuth 2.0)은 REST API 기반으로 구현됩니다. 다음 글들을 통해 REST API를 이해하고 실습할 수 있습니다.
REST 클라이언트에 대한 개념을 아래 글을 통해 습득하실 수 있습니다.
OAuth 2.0 이외의 HMAC을 이용한 인증방식을 구현할 수 있습니다.
다른 서비스와 연동 시 (로그인)웹페이지가 정상동작하지 않는 경우 크로미움 기반 웹브라우저를 이용할 수도 있습니다.

 

관련/참고 링크

, 이 게시물을
Profile
목록
목록
번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 22583
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 21024
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 23071
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 28870
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 30050
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 25393
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 46347
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 182308
903 n [도서/PDF/소스코드] 시작하는 사람들을 위한 델파이 프로그래밍-모듈 1. 델파이 소개, 단순 컴포넌트들 관리자 2019.02.13 1768
902 안드로이드 9버전 대상으로 10.3 리오 앱 실행 file 험프리 2019.02.12 591
901 이 달의 기술자료 - 2019년 02월 file 험프리 2019.01.25 565
900 [업데이트][핫픽스][10.3] C++툴체인 핫픽스 험프리 2019.01.25 335
899 iOS SDK 추가 화면에서 SDK 목록이 표시되지 않을 경우 해결방안 file 험프리 2019.01.16 1076
898 CEF4Delphi(크로미움 기반 웹브라우저) 컴포넌트 설치 및 실행하기 험프리 2019.01.14 4417
897 [REST API] MAC(Message Authentication Code)/HMAC 델파이로 구현하기 험프리 2019.01.14 2777
896 이 달의 기술자료 - 2019년 01월 험프리 2018.12.28 577
» OAuth 2.0 연동 - 카카오 API(카카오톡 프로필) [9] 험프리 2018.12.26 10290
894 델파이 애플리케이션 현대화 방안 관리자 2018.12.18 1199
893 [업데이트][핫픽스][10.3] 2018년 12월 패치 험프리 2018.12.17 713
892 엠바카데로가 제안하는 가장 효율적인 비용으로 최신식 앱 개발 방법 관리자 2018.12.11 1051
891 웹 영역으로의 확장을 위한 크로스-플랫폼 웹 애플리케이션 개발 방법 - Ext JS 관리자 2018.12.11 860
890 올인원 테스트 자동화 솔루션 - 래노렉스(Ranorex) file 관리자 2018.12.11 674
889 C++빌더/델파이 개발자를 위한 최적의 데이터베이스 관리 도구 - 아쿠아 데이터 스튜디오 file 관리자 2018.12.11 719
888 [10.3 리오] 기타 컴파일러, 데이터, RTL 개선사항 험프리 2018.12.06 632
887 [10.3 리오] RAD 서버 엔드 포인트 연동이 더욱 쉽고 다양해 졌습니다. 험프리 2018.12.06 530
886 [10.3 리오] 안드로이드 권한 요청 매커니즘 변경이 반영되었습니다. file 험프리 2018.12.06 1238
885 [10.3 리오] 윈도우 스토어 연동, 최신 윈도우 API 업데이트 등 윈도우 10 지원이 강화되었습니다. file 험프리 2018.12.05 824
884 [10.3 리오] High DPI가 적용된 이미지 리스트로 다양한 해상도의 이미지를 지원할 수 있습니다. 험프리 2018.12.05 877
쓰기
태그