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

업데이트 내역

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 키를 획득합니다.

• https://developers.kakao.com/docs/restapi#앱-생성

앱 만들기

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

앱을 생성하면 다음 그림과 같이 키가 생성됩니다. 우리는 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 단계 과정입니다.)

카카오 개발가이드 중 사용자 관리-로그인 부분의 문서를 참고해 개발합니다.

• https://developers.kakao.com/docs/restapi/user-management#로그인

[Request]

[Response]

Request와 같이 페에지를 표시 후 사용자 로그인 성공 시 Response와 같이 redirect_url로 페이지 이동됩니다. 이때 인증 코드(authorize_code)가 함께 전달됩니다.

Button1 클릭 이벤트에 다음과 같이 코드를 입력합니다.

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 대신 입력합니다.)

const
  // 카카오톡 개발자 사이트에서 앱 등록 후 API키를 등록하세요.
  API_KEY = 'XXXXXXXXXXXXXXXXX';

implementation

로그인 성공 시 인증코드 수신하는 내용을 작성합니다. WebBrowser1의 OnDidFinishLoad(페이지 전환 완료) 이벤트 생성 후 다음 코드를 입력합니다.

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)을 받아오는 내용을 구현합니다.

이 부분도 카카오 개발가이드 중 사용자 관리-로그인, 사용자 토큰 받기 부분의 문서를 참고해 개발합니다.

• https://developers.kakao.com/docs/restapi/user-management#로그인

[Request]

[Response]

위 문서와 같이 POST로 요청 후 받은 응답 값(json 포맷)에서 access_token 값을 취득해야 합니다.

이 기능은 REST Client 프레임워크를 이용해 개발합니다.

화면에 TRESTClient, TRESTRequest, TRESTResponse 3개의 컴포넌트를 추가 합니다.

[3. 엑세스 토큰 취득] 버튼의 클릭 이벤트에 다음과 같이 구현합니다.
(아래 과정은 디자인 타임에서 컴포넌트에 직접 설정해도 무관합니다.)

(2019-10-23 추가: HTTP ERROR 406 오류 발생 해 Accept := '*/*'; 라인 추가)

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, 카카오톡 프로필 조회] 버튼의 클릭 이벤트에 다음과 같이 구현합니다.

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)로 받아 이미지 컨트롤에 표시합니다.

완료 및 테스트

카카오톡 프로필과 연동하는 예제 구현이 완료되었습니다.

작성한 프로젝트를 실행해 여러분의 카카오 계정을 이용해 테스트 진행할 수 있습니다.

완성된 프로젝트 파일

KakaoOAuth20.zip

추가 학습할 내용

카카오 서비스 연동 및 인증(OAuth 2.0)은 REST API 기반으로 구현됩니다. 다음 글들을 통해 REST API를 이해하고 실습할 수 있습니다.

• REST API 이해하기
  
• REST API 서버 개발하기(엔드포인트 구현, RAD 서버 이용)
• REST API 클라이언트 개발하기(REST Client 이용)
• 데이터셋 기반 REST API 개발하기

REST 클라이언트에 대한 개념을 아래 글을 통해 습득하실 수 있습니다.

• RESTful 웹서비스 연동(REST 클라이언트 소개)

관련/참고 링크

---

• 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