공통 OAuth 2.0 연동 - 네이버 API 연동(네이버 아이디로 로그인)
2020.07.15 11:38
이 글에서는 OAuth 2.0을 이용 네이버 API와 연동하는 방법을 알아봅니다.
이 글에서는 네이버 아이디로 로그인 후 회원 프로필 조회 API와 연동해 프로필 정보를 불러오는 델파이 애플리케이션을 작성할 수 있습니다.
다음 글을 통해 OAuth 2.0을 이용 카카오 API와 연동하는 내용을 다뤘습니다.
OAuth2.0 연동하는 절차는 카카오, 네이버 API 뿐아니라 대부분의 서비스들이 비슷합니다.
이 글에서는 카카오 API와 네이버 API의 차이점에 대해서만 간략히 설명합니다. 이글을 읽기 전 위 링크의 내용을 먼저 숙지하시기 바랍니다.
(네이버와 카카오 OAuth 2.0의 차이점은 앱 등록하는 과정, API의 엔드포인트(URI)와 일부 파라미터 종류 및 이름 뿐입니다.)
[준비] 준비사항, 앱 등록
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 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
[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 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에 접근할 수 있습니다.(단, 애플리케이션 등록 시 설정한 앱에 한함)
정상적인 요청에 대한 응답은 다음과 같습니다.
작성된 코드는 다음과 같습니다.
|
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.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
추가 학습할 내용
- REST API 이해하기
- REST API 서버 개발하기(엔드포인트 구현, RAD 서버 이용)
- REST API 클라이언트 개발하기(REST Client 이용)
- 데이터셋 기반 REST API 개발하기
관련/참고 링크
- OAuth 2.0 공식 페이지 - https://oauth.net/2/
- 네이버 API 관련 링크
- 네이버 아이디로 로그인 API 명세 -https://developers.naver.com/docs/login/api/
- 네이버 회원 프로필 조회 API 명세 - https://developers.naver.com/docs/login/profile/
