이 글에서는 OAuth 2.0을 이용 네이버 API와 연동하는 방법을 알아봅니다.

이 글에서는 네이버 아이디로 로그인 후 회원 프로필 조회 API와 연동해 프로필 정보를 불러오는 델파이 애플리케이션을 작성할 수 있습니다.

 

다음 글을 통해 OAuth 2.0을 이용 카카오 API와 연동하는 내용을 다뤘습니다.

 

OAuth2.0 연동하는 절차는 카카오, 네이버 API 뿐아니라 대부분의 서비스들이 비슷합니다.

이 글에서는 카카오 API와 네이버 API의 차이점에 대해서만 간략히 설명합니다. 이글을 읽기 전 위 링크의 내용을 먼저 숙지하시기 바랍니다.

(네이버와 카카오 OAuth 2.0의 차이점은 앱 등록하는 과정, API의 엔드포인트(URI)와 일부 파라미터 종류 및 이름 뿐입니다.)

 

[준비] 준비사항, 앱 등록

네이버 아이디로 로그인 API의 명세는 다음 링크로 확인할 수 있습니다.
 
다음 링크에서 애플리케이션을 등록해야 합니다.
 
등록 후 애플리케이션 정보에서 Client ID와 Client Secret을 확인합니다.(구현 시 사용)

 

API 설정에서 "사용 API" 항목에서 "네아로(네이버 아이디로 로그인)"항목을 선택하고, 제공 정보를 선택합니다.

 

API 설정에서 "로그인 오픈 API 서비스 환경" 항목에서 "PC웹" 환경을 추가하고, 서비스 URL과 Callback URL을 등록합니다.(테스트 시에는 제 OAuth 페이지를 이용해도 좋습니다. http://hjf.pe.kr/oauth)

 

네이버 아이디로 로그인 시 사용하는 API는 다음과 같습니다.

 

[1단계] 로그인 및 인증코드 취득

"네이버 아이디로 로그인 인증 요청" 페이지의 요청 변수는 다음과 같습니다.

 

대부분 카카오 API와 같지만, 새로운 state 값이 있습니다. 해당 값은 사이트 간 요청 위조 공격을 방지하기 위한 값으로, 요청 시 입의의 값을 전달하면 응답시 동일한 값을 반환해 내가 작성한 요청에 대한 응답인지를 확인하기 위한 목적입니다. state는 임의의 값을 사용해도 됩니다. 샘플에서는 "abcdef" 값을 사용했습니다.(랜덤으로 문자열을 생성해서 사용해도 됩니다.)

 

작성된 코드는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
procedure TForm3.Button1Click(Sender: TObject);
var
  URL, Param: string;
begin
  URL := 'https://nid.naver.com';
  Param := '/oauth2.0/authorize?response_type=code&client_id={client_id}&redirect_uri={redirect_uri}&state={state}';
  Param := Param.Replace('{client_id}', CLIENT_ID);
  Param := Param.Replace('{redirect_uri}', REDIRECT_URI);
  Param := Param.Replace('{state}', 'abcdef');
 
  WebBrowser1.URL := URL + Param;
  WebBrowser1.Navigate;
end;
 
위 코드를 이용해 실행 후 로그인 및 동의 화면 후 다음과 같은 웹페이지로 리다이렉션 됩니다.
  • http://hjf.pe.kr/oauth/?code=7geMnuaVmQDsDbpoUl&state=abcdef
이동된 페이지 URL에서 code 정보를 취득 후 엑세스 토큰 취득시 사용합니다.
 

[2단계] 엑세스 토큰 취득

엑세스 토큰 취득 API의 요청 변수는 다음과 같습니다.

1단계에서 취득한 code를 포함해 요청합니다.

 

작성된 코드는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var
  token: string;
begin
  RESTClient1.BaseURL := 'https://nid.naver.com/';
 
  RESTRequest1.Resource := 'oauth2.0/token';
  RESTRequest1.Method := rmPOST;
  RESTRequest1.Params.Clear;
  RESTRequest1.Params.AddItem('grant_type',     'authorization_code');
  RESTRequest1.Params.AddItem('client_id',      CLIENT_ID);
  RESTRequest1.Params.AddItem('client_secret',  CLIENT_SECRET);
  RESTRequest1.Params.AddItem('code',           Edit1.Text);
  RESTRequest1.Params.AddItem('state',          'abcdef');
 
  RESTRequest1.Execute;
 
  Memo1.Lines.Text := RESTResponse1.Content;
 
  if RESTResponse1.JSONValue.TryGetValue<string>('access_token', token) then
    Edit2.Text := token;
end;</string>

다음과 같은 응답을 받으면, 필요한 access_token을 가져옵니다.

 

[3단계] 서비스에 접근(엑세스 토큰 이용)

엑세스 토큰으로 다양한 네이버 API에 접근할 수 있습니다.(단, 애플리케이션 등록 시 설정한 앱에 한함)

 
네이버 회원 프로필 조회 API는 다음과 같습니다.

 

정상적인 요청에 대한 응답은 다음과 같습니다.

 

작성된 코드는 다음과 같습니다.

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
35
36
37
38
39
procedure TForm3.Button3Click(Sender: TObject);
var
  nickname, name, profile_url: string;
  Stream: TMemoryStream;
begin
  OAuth2Authenticator1.AccessToken := Edit2.Text;
 
  RESTClient2.BaseURL := 'https://openapi.naver.com/';
  RESTClient2.Authenticator := OAuth2Authenticator1;
 
  RESTRequest2.Client := RESTClient2;
  RESTRequest2.Response := RESTResponse2;
 
  RESTRequest2.Resource := 'v1/nid/me';
  RESTRequest2.Execute;
 
  Memo1.Lines.Text := RESTResponse2.Content;
 
  name := RESTResponse2.JSONValue.GetValue<string>('response.name');
  nickname := RESTResponse2.JSONValue.GetValue<string>('response.nickname');
  Edit3.Text := name;
  Edit4.Text := nickname;
 
  profile_url := RESTResponse2.JSONValue.GetValue<string>('response.profile_image');
 
  RESTClient3.BaseURL := profile_url;
  RESTRequest3.Execute;
  RESTRequest3.ExecuteAsync(procedure
    begin
      Stream := TMemoryStream.Create;
      try
        Stream.WriteData(RESTResponse3.RawBytes, RESTResponse3.ContentLength);
        ImageControl1.Bitmap.LoadFromStream(Stream);
      finally
        Stream.Free;
      end;
    end
  );
end;

 

완료 및 테스트

 

완성된 화면의 테스트 결과는 다음과 같습니다.

 

완성된 프로젝트 파일

 NaverOAuth20.zip

 

추가 학습할 내용

이 글은 다음 링크의 OAuth2.0 카카오 API 연동하는 내용과의 차이점을 기술합니다. OAuth 2.0의 프로세스와 카카오 API 연동의 자세한 내용은 다음 링크에서 확인할 수 있습니다.
 
네이버, 카카오 등의 서비스 인증(OAuth 2.0) 및 API 연동은 REST API 기반으로 구현됩니다. 다음 글들을 통해 REST API를 이해하고 실습할 수 있습니다.
 

 

관련/참고 링크


번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 22495
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 20984
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 23049
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 28843
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 30024
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 25379
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 46330
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 182192
1263 이 달의 기술자료 - 2020년 09월 file 험프리 2020.08.27 291
1262 델파이/C++빌더에 TTcpClient, TTcpServer, TUdpSocket 등록하기 [1] file 험프리 2020.08.26 775
1261 [고객 사례- 델파이, 예술, 창작] 아트젠, 컴퓨터로 완성하는 미술 작품 관리자 2020.08.25 432
1260 2020 년 8 월 GM 업데이트 관리자 2020.08.24 523
1259 C++17 알고리즘 라이브러리 병렬 정렬 사용하기 관리자 2020.08.13 449
1258 [고객 사례- 의료, C++빌더, 모바일, IoT] 브루너 컨설팅, 손목 웨어러블 헬스케어 기기 관리자 2020.08.11 463
1257 [고객 사례- POS, 주문, C++빌더, 멀티플랫폼] BCPOS - 클라우드를 연동한 다양한 간편 결제 지원 POS 관리자 2020.08.04 834
1256 이 달의 기술자료 - 2020년 08월 험프리 2020.07.30 402
1255 [10.4 시드니][패치] RAD스튜디오 10.4 '세 번째 패치(Patch 3)': VCL그리드, C++Win64 디버깅, C++ 안드로이드 예외처리 핸들링 및 리소스 등 관리자 2020.07.29 716
1254 [생산성] RAD 스튜디오, 델파이, C++빌더 단축키 표 관리자 2020.07.28 473
1253 [발표자료] VCL 애플리케이션 확장하기 with RAD 서버 관리자 2020.07.22 509
1252 [발표자료] 20170623 최신OS와 멀티플랫폼 개발 전략 with RAD Studio 관리자 2020.07.22 295
1251 [무료 툴] 델파이 JSON 데이터 자동 연동 프로그램 file 관리자 2020.07.20 848
1250 델파이 개발자 관점에서 본 C++ 빌더 file 김원경 2020.07.20 1449
1249 [10.4 시드니][패치] RAD스튜디오 10.4 '두 번째 패치(Patch 2)'를 다운로드 받으세요! 관리자 2020.07.20 946
1248 안드로이드 SDK 수동 설치 방법 file 김원경 2020.07.15 5403
» OAuth 2.0 연동 - 네이버 API 연동(네이버 아이디로 로그인) 험프리 2020.07.15 1327
1246 RAD Studio의 생산성 툴링 : 탐색기 김원경 2020.07.09 383
1245 RAD Studio의 생산성 툴링 : 북마크 김원경 2020.07.09 373
1244 iOS 앱스토어 1024x1024 아이콘 문제에 대한 해결 방법 김원경 2020.07.08 545