안녕하세요. 이지이지입니다.
지난 앱인벤터 포스팅에서는 카카오 계정으로 로그인 기능 구현하기에 대해 설명드렸는데요.
OAuth 개념이 부족하신 분께서는 포스팅 앞 부분을 참고해 보는 것이 좋습니다.
앱인벤터 카카오 계정으로 로그인 기능 구현하기
안녕하세요. 이지이지입니다. 요즘 대다수의 앱이나 사이트에서는 네이버 아이디로 로그인(네아로), 카카오 로그인, 구글 계정으로 로그인 등 OAuth2.0 기반 인증으로 이용할 수 있는 경우가 많습
egeasy.tistory.com
이번 포스팅에서는 네아로를 앱인벤터에 구현하는 방법에 대해 알아보도록 하겠습니다.
| 사전 준비하기(네이버 개발자센터에서 애플리케이션 등록하기) |
※ 애플리케이션 등록이라고 해서 대단한 것은 아닙니다. 그냥 개발중인 앱 이름과 네아로를 이용하기 위한 정보 몇 가지를 입력하면 됩니다.
1. 먼저 다음 링크를 통해 네이버 개발자센터로 이동합니다.
애플리케이션 - NAVER Developers
developers.naver.com
2. 애플리케이션 등록에 필요한 정보를 입력합니다.
- 애플리케이션 이름: 앱 이름을 입력합니다.
- 사용 API: 네아로(네이버 아이디로 로그인) 선택
--- 제공 정보 선택: 사용자에게 받고자 하는 정보 선택
- 로그인 오픈 API 서비스 환경: Mobile 웹(앱인벤터에서 웹뷰어 컴포넌트를 사용할 것이므로.)
--- 서비스 URL: 개발중에는 아무 URL이나 입력해도 됩니다. (※ www 삭제)
딱히 생각나는게 없다면 http://localhost로 입력하세요.
--- 네이버아이디로로그인 Callback URL: (가장 중요한 정보입니다.) 사용자가 네아로에서 자동으로 띄워주는 정보제공 동의화면에서 동의 후 이동해갈 URL 주소를 입력합니다. 반드시 제대로 접속가능한 주소를 입력해야하며, 저는 제 블로그의 이미지 저장소에 OAuth.html이란 파일을 만들어 두고 이 주소를 입력하였습니다. 참고로 제 OAuth.html파일을 올려드립니다.
이제 기본적인 등록은 모두 끝이 났습니다.
추가적으로 몇 가지 사항에 대해 더 알려드리겠습니다.
3. 네이버 개발자센터에서 상단의 [Application]-[내 애플리케이션]을 클릭합니다.
4. Application 목록에서 방금 등록한 애플리케이션을 선택합니다.
5. 개요 탭에서 중요한 것은 개발 상태입니다. 처음에 애플리케이션을 등록하면 개발 상태가 [개발 중]이 되며, 이 때는 네아로를 사용할 수 있는 아이디가 제한적입니다. 모든 네이버 아이디를 사용할 수 있는 것이 아니라, 네 번째 탭에 있는 [멤버관리]에서 등록한 네이버 아이디로만 테스트 할 수 있습니다. 개발자인 여러분의 아이디는 등록하지 않아도 사용가능합니다. 모든 앱 개발이 끝난 후 검수요청을 합니다.
두 번째 탭의 [API 설정]에서는 처음 등록할 때 입력한 정보를 수정할 수 있습니다.
앱인벤터에서 네아로를 적용하기 위해서는 다음 3가지가 필요합니다.
1. [개요] Client ID
2. [개요] Client Secret
3. [API 설정] Callback URL
이제 네아로를 구현하기 위한 사전 준비는 모두 끝이 났습니다.
| 화면 구성 |
네아로를 구현하기 위한 화면 구성입니다.
핵심 요소는 WebViewr 컴포넌트, Web 컴포넌트입니다.
| 블록 코딩 |
먼저 이 예제 앱의 aia 파일을 다운 받으시고, 링크된 네이버 개발자센터 개발자 문서를 함께 참고하시기 바랍니다.
네이버아이디로그인 개발가이드 - LOGIN
네이버아이디로그인 개발가이드 1. 개요 4,200만 네이버 회원을 여러분의 사용자로! 네이버 회원이라면, 여러분의 사이트를 간편하게 이용할 수 있습니다. 전 국민 모두가 가지고 있는 네이버 아
developers.naver.com
전체 블록 코딩입니다.
변수 블록들입니다.
① 네이버 인증 요청 API로부터 접근 토근을 받아 둘 변수입니다.
② 네이버 인증 요청 API로부터 갱신 토큰을 받아 둘 변수입니다.
③ Callback URL을 저장해 둘 변수로, 네이버 개발자센터에 등록한 여러분의 Callback URL을 입력합니다.
④~⑤ 여러분의 Client ID와 Client Secret를 입력합니다.
※ { }는 입력하지 않습니다.
Login with Naver 이미지를 클릭했을 때 발생하는 블록입니다.
① [Login with Naver]를 클릭했을 때
② WebViewer1의 웹페이지를 ②에서 설정한 주소로 이동시킵니다.
다음 개발자 문서의 내용에 해당합니다.
redirect_url과 state 부분에 Web_Token.UriEncode를 사용한 이유는 위의 개발자 문서에서 보듯이 URL 인코딩을 적용하라고 했기 때문입니다.
state는 보안상 중요한 개념인 것 같기는 한데, 일단 제가 초보이기도 하고 앱인벤터에는 랜덤 텍스트를 뿌려주는 블록이 없기도 해서 간단히 abcdefg로 입력했습니다.
보안지 정말 중요한 경우라면 알파벳 A~Z를 리스트에 담아두고, 6개 정도를 랜덤으로 뽑아와 구성하는 것도 한 방법이 될 수 있을 것 같습니다.
③ 웹뷰어를 제외한 모든 요소를 감싸고 있는 Ver_AllWrap을 화면에서 사라지게 함으로써 네이버에서 자동으로 보여주는 정보 제공 동의 화면만 웹뷰어에서 보이도록 합니다.
④ 초기 설정에는 웹뷰어가 보이지 않도록 되어 있는데, 이제 정보 제공 동의 화면이 보여야 하므로 화면에 보이도록 합니다.
⑤ 웹뷰어의 높이는 화면 전체 크기로 합니다.
WebViewer1의 페이지가 로딩되었을 때 발생하는 블록입니다.
이 예제 앱을 테스트해보면 아시겠지만 웹뷰어는 총 3번 주소를 이동해가면서 로딩되게 됩니다.
1. 맨 처음 앱이 실행되었을 때 (웹뷰가 컴포넌트로 포함되어 있어, HomeURL을 지정해두지 않아도 앱이 실행되면 무조건 빈 HomrURL로 로딩됩니다.)
2. Login with Naver를 클릭했을 때, 웹뷰에 지정된 URL로 이동해갈 때,
3. 사용자가 정보 제공 동의 화면에서 동의를 눌렀을 때
이 블록에서는 3번째의 경우를 처리합니다.
① WebViewer1의 웹페이지가 로딩되었을 때
② 만약 WebViewer1의 URL에 Callback URL이 포함되어 있다면
→ 사용자가 정보 제공에 동의를 했다는 의미입니다.
③ Web_Token의 Url을 네이버의 접근 토근 발급 요청 URL로 지정하고
④ 위 이미지 ④의 정보를 실어 POST 형태로 요청합니다.
다음 개발자 문서에 해당하는 내용입니다.
BuildRequestData블록은 전달할 정보가 application/x-www-form-urlencoded 유형일 때 유용하게 쓰입니다.
보통 개발자 문서에 나와 있습니다. (네이버 문서에는 찾지 못했으나, 사용해보니 되네요......)
List 부분에는 무조건 그냥 리스트를 만들고 하위 리스트의 첫 번째에는 항목 이름 두 번째에는 그 항목에 맞는 정보를 입력하는 형식입니다.
사용자가 정보를 제공한 다음에 Callback URL로 전송되는 웹페이지 주소는
여러분의 Callback URL 뒤에 네이버 인증 요청 API에서 제공하는 정보가 덧붙여져 다음과 같은 형태가 됩니다.
http://콜백URL/redirect?code={code값}&state={state값}
그래서 먼저 code=에서 분리 해주면,
[http://콜백URL/redirect?, {code값}&state={state값}] 이렇게 리스트형식으로 저장되고
여기서 2번째 항목은 {code값}&state={state값}이 됩니다.
다시 이것을 &state=에서 나누어 주게 되면,
[{code값}, {state값}] 이렇게 리스트형식으로 저장되므로
여기서 1번째 항목이 바로 code값이 되는 것입니다.
다음은 Web_Token 컴포넌트가 위에서 POST 형식으로 정보를 요청한 후, 네이버 인증 요청 API로부터 정보를 받았을 때 발생하는 블록입니다.
① Web_Token 컴포넌트가 정보를 받았을 때
②~③ 변수 access_token과 refresh_token에 네이버 API로 부터 받은 접근 토큰과 갱신 토큰을 저장합니다.
위 블록은 json형태로 되어 있는 자료를 앱인벤터의 Dictionary 형식으로 변환하는 블록입니다.
네이버 인증 요청 API는 요청한 결과를 json 형식으로 반환합니다. 반환된 결과의 예를 트리구조로 보기 쉽게 표현하면 다음과 같습니다.
{
"access_token": "AAA~~~~~",
"refresh_token": "Bzip~~~~~",
"token_type": "bearer",
"expires_in": "3600"
}
접근 토큰을 받았다는 것은 인증이 되었다는 것이므로 여기서 사실 네이버 아이디로 로그인하기는 성공한 것입니다.
④~⑥ 사용자 프로필을 가져오기 위해 접근 토큰을 이용해 네이버 프로필 API를 호출합니다.
네이버 개발자 문서의 다음 내용입니다.
④ 접근 헤더는 RequestHeaders 블록을 이용하며 리스트 아래 하위리스트 형식으로 입력합니다.
하위 리스트의 첫 번째 리스트 항목은 요청 헤더명을 입력하고, 두 번째 리스트 항목에는 요청 헤더에 해당하는 값을 입력합니다.
⑤ 네이버 프로필 API 호출 URL입니다.
⑥ 요청헤더를 제외하고는 따로 전달할 정보가 없으므로 텍스트를 공란으로 했습니다.
⑦ 웹뷰어가 할 일은 모두 끝이 났으므로 화면에서 사라지게 합니다.
⑧ 웹뷰를 제외한 요소들을 감싸고 있던 것들을 화면에서 보이게 합니다.
⑨ 로그인이 되었으므로 btn_log의 텍스트를 "로그아웃"으로 표시합니다.
⑩ btn_log를 사용가능하게 합니다.
다음은 Web_Profile 컴포넌트가 네이버 프로필 API로부터 정보를 받았을 때 실행되는 블록입니다.
① Web_Profile 컴포넌트가 네이버 프로필 API로부터 정보를 받았을 때
② [결과 확인 창]의 텍스트를 받은 정보로 표시하도록 합니다.
사용자가 로그인시 정보 제공에 동의한 항목이 표시됩니다.
다음은 로그아웃 버튼을 클릭했을 때 실행되는 블록입니다.
① [로그아웃] 버튼을 클릭했을 때
② Web_LogOut 컴포넌트의 URL을 네아로 연동 해제 API로 합니다.
③ 연동 해제에 필요한 정보를 입력합니다. 이 때 service_provider는 "NAVER"로 고정입니다.
다음 네아로 연동 해제 API 개발자 문서에 해당됩니다.
④ 로그아웃 되었으므로 btn_log의 텍스트를 "로그인"으로 합니다.
⑤ 예제 앱에서는 네이버 아이디로 로그인만 테스트할 것이므로 btn_log를 사용불가능하게 합니다.
다음은 네아로에서 연동 해제 되었을 경우 Web_LogOut 컴포넌트가 정보를 받았을 때 실행되는 블록입니다.
① Web_LogOut 컴포넌트가 네아로 연동 해제 API부터 정보를 받았을 때
② 네아로 연동 해제 API로부터 받은 정보를 [결과 확인 창]에 표시합니다.
삭제 처리 된 접근 토큰과 처리 결과가 표시됩니다.
이상 앱인벤터에서 네이버 아이디로 로그인 기능 구현하기 포스팅을 마치겠습니다.
카카오 계정으로 로그인, 네아로를 구현했으니 추후 구글 계정으로 로그인, 이런 소셜 로그인 기능을 사용했을 때 파이어베이스로 회원등록까지 할 수 있는 기능을 실험해 봐야 겠네요.
의문사항이나 오류 사항이 있으면 댓글로 남겨주세요~~~
댓글