안녕하세요. 이지이지입니다.
요즘 대다수의 앱이나 사이트에서는 네이버 아이디로 로그인(네아로), 카카오 로그인, 구글 계정으로 로그인 등
OAuth2.0 기반 인증으로 이용할 수 있는 경우가 많습니다.
사용자 입장에서는 번거로운 회원가입절차를 거치는 것 보다는 훨씬 수월하여,
그 사이트나 앱에서 바로 떠나기 보다는 최소 한 번쯤은 사용해 볼 것입니다.
그래서 앱인벤터에서도 네이버, 카카오, 구글 등으로 로그인 할 수 있는 방법을 찾아 보았으나,
결국 찾지 못하였고, 며칠 동안의 공부 끝에 초보자에게는 가장 난이도가 낮은(?) 카카오 로그인 기능을 구현할 수 있게 되었습니다.
혹시나 저처럼 이 기능을 찾으시는 분이 있으려나 싶어 이 글을 포스팅합니다.
※ 주의: 여러 번의 테스트를 통해 검증 결과 오류는 발생하지 않았으나 저도 처음 구현해보는 관계로 본 포스팅에 오류가 있을 수 있습니다. 혹시 오류를 발견하면 댓글로 달아주시면 감사하겠습니다.
| 사전 준비하기(카카오 개발자 사이트에 애플리케이션 추가하기) |
앱인벤터에서 카카오 로그인 기능을 구현하기 위해서는 카카오의 REST API를 사용해야 합니다.
그리고 카카오의 REST API를 사용하기 위해서는 카카오 개발자 사이트에 애플리케이션을 추가해야 합니다.
다음 카카오 개발자 문서를 포스팅과 함께 참고하시면 좋습니다.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
애플리케이션을 추가해야 한다고 해서, 정말로 제대로 만든 앱이 있어야 하는 건 아니구요.
그냥 간단히 몇 글자 끄적이기만 하면 됩니다.
1. 먼저 다음 카카오 개발자(kakao developers) 사이트에 접속하여 [애플리케이션 추가하기]를 클릭합니다.
카카오계정 로그인
여기를 눌러 링크를 확인하세요.
accounts.kakao.com
2. 앱 이름과 사업자명을 입력합니다. 대충 입력하면 됩니다.
※ 입력된 정보는 앱의 사용자가 카카오 로그인 버튼을 클릭했을 때, 나타나는 정보입니다. 나중에 제대로 된 앱을 만들 때에는 정확히 입력하시기 바랍니다.
※ 앱 이름에는 "카카오"나 "kakao"가 들어가서는 안됩니다.
3. 2에서 저장 후 보이는 앱의 목록에서 방금 추가한 앱을 클릭합니다.
클릭 후 나타나는 다음과 같은 화면에서 앱인벤터로 블록코딩할 때 사용하기 위해서
REST API 키를 다른 곳에 기록하여 둡니다.
4. 다음 이미지처럼 카카오 로그인을 사용하도록 설정합니다.
여기에서 카카오 로그인이 작동하는 방식에 대한 이해가 필요한데요.
살짝 복잡해서 굳이 보지 않아도 됩니다. 이해를 원하신다면 다음 이미지를 보시고,
빨리 기능을 구현해보고 싶으시다면 다음 이미지를 건너 뛰고, Redirect URI 등록하는 부분부터 보시기 바랍니다.
Redirect URI는 사용자가 정보제공에 동의하면 사용자를 이동시켜갈 주소로 이 때 인가코드를 함께 가지고 옵니다.
Redirect URI에 어떤 특별한 규칙이나 제약이 있는 것은 아닙니다.
(그런데 저는 Redirect URI를 이해하지 못하고 한참 헤매었습니다. ㅜ.ㅜ)
저는 제 블로그의 저장소에 OAuth.html이라는 파일을 올려두고 여기로 Redirect 되도록 했습니다.
ex.) https://tistory2.daumcdn.net/tistory/~~~~~~~/~~~/~~~~~/OAuth.html
이 때, 주의하셔야 할 점은 www는 쓰지 않도록 합니다. ex.) https://daum.net (O) / https://www.daum.net (X)
제가 사용한 OAuth.html의 코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<p> </p>
<P align="center">
잠시 후 어플리케이션으로 이동합니다...
</p>
</body>
</html>사용자가 Redirection URI로 이동했을 때, 짧게 나마 "잠시 후 어플리케이션으로 이동합니다..."를 화면에 띄워 주게 하였습니다. 웹페이지의 로딩속도가 빠르고 사용자의 핸드폰이 처리를 빨리할 경우 보이지 않을 수도 있습니다.
5. 다음은 사용자로부터 받을 정보에 대한 동의항목을 설정합니다. 수집할 항목에 맞게 설정하면 됩니다.
※ 이메일주소의 경우 선택 사항으로는 정보를 제공받을 수 있지만 필수 사항으로 받기 위해서는 카카오 서비스의 검수가 필요합니다.
| 화면 구성 |
카카오 로그인을 위한 예시 화면 구성입니다.
Web 컴포넌트와, WebViewer 컴포넌트가 핵심입니다.
| 블록 코딩 |
생각보다 많은 블록이 필요하지는 않습니다. 블록이 덩치가 커서 그렇지 명령 하나하나는 많지 않습니다.
다음 aia파일을 다운받아 참고하시고, 링크된 카카오 로그인 REST API 문서도 함께 참고하시면 좋습니다.
※ YOUR REST API 키 부분과, YOUR Redirect URI 부분에는 반드시 여러분의 것으로 수정하신 다음 이용하시기 바랍니다. 총 4곳이 있습니다.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
다음은 변수 블록들입니다.
① 카카오 인증 서버로부터 인가 코드를 받기 위한 정보를 보낼 주소입니다.
- Your REST API 키 부분과 Your Redirect URI 부분을 여러분의 것으로 수정합니다.
② 사용자가 정보제공에 동의하면 카카오 인증 서버로부터 받게 되는 인가 코드를 저장할 변수입니다.
③~④ 카카오 로그인 API로부터 받게 되는 Access Token과 Refresh Token을 저장할 변수입니다.
다음은 [카카오 로그인] 이미지를 클릭했을 때 실행되는 블록입니다.
① [카카오 로그인]을 클릭했을 때
② WebViewer1은 변수 getCodeURL에 저장되어 있는 주소로 이동하여 그 웹페이지의 화면을 보여줍니다.
③ WebViewer1의 높이를 스크린 전체의 높이로 합니다.
④ WebViewer1이 화면에 보이도록 합니다.
- WebViewer1의 초기값은 보이지 않게 설정해 두었습니다.
⑤ WebViewer1을 제외한 모든 요소들이 들어가 있는 Ver_AllWrap을 화면에서 보이지 않게 하여 WebViewer1에 나타나게 되는 카카오 로그인 화면만 보이게 합니다.
다음은 WebViewer1의 웹페이지가 로딩된 후 실행되는 블록입니다.
① 웹페이지가 로딩된 후에
② 만약 로딩된 웹페이지의 url이 공백이 아니라면, (공백이라면 ⑩으로)
- 예제 앱에서 WebViewer1 컴포넌트의 웹페이지는 총 3번 로딩됩니다.
1. 인가 코드를 요청할 때, (url: 변수 getCodeURL을 통해 이동한 주소)
2. 인가 코드를 받고 redirect 될 때, (url: Your Redirection URL&code=~~~~~~~~~)
3. 로그아웃 후에 redirect 될 때 (url: 공백)
※ 로그아웃 후 redirect 될 때 주소는 딱히 받아올 정보가 없어 저는 공백으로 했습니다. 여러분이 원하는 주소로 해도 됩니다.
③ 만약 url에 "code="이 포함되어 있다면
→ 인가코드를 받았다는 의미입니다.
④ 변수 code에 카카오 서비스 서버로부터 받은 인가 코드를 저장합니다.
- redirect 될 때 url주소는 redirect uri&code=~~~~~~ 이 되므로
→ =에서 url주소를 분리하면 다음과 같이 리스트 형태로 [redirect uri&code, ~~~~~~] 반환되므로,
→ 여기에서 두 번째 항목을 선택하면 인가 코드가 되는 것입니다.
⑤ WebViewer1을 화면에서 보이지 않게 합니다.
→ 인가 코드를 받았기 때문에 WebViewer1이 필요없고, 앱 화면만 보여주기 위해서입니다.
⑥~⑦ 카카오 서비스 서버로 토큰(Access Token, Refresh Token)을 요청하는 블록입니다.
- 다음 카카오 개발자 문서의 해당되는 내용입니다.
⑧ 로그인 버튼의 텍스트를 "로그아웃"으로 표시합니다.
→ 토큰이 바르게 요청되었다면 카카오 서비스 서버로 부터 정보를 받게 될 것이고, 이는 로그인 되었다는 것을 의미하므로, 버튼의 텍스트를 "로그아웃"으로 표시합니다.
⑨ 로그인(로그아웃) 버튼을 사용가능하게 설정합니다.
→ 카카오 로그인 기능만 테스트하기 위해서 초기에 로그인 기능으로는 사용하지 못하게 했다가 로그아웃을 위해 사용가능하게 한 것입니다.
⑩ 만약 WebViewer1의 url이 공백이라면(로그아웃 redirect uri) 더 이상 웹뷰가 필요없으므로 보이지 않게 설정합니다.
⑪ WebViewer의 높이를 0으로 설정합니다.
→ 웹뷰가 보이지 않더라도 그 크기는 보이지 않은 채로 남아 있어 화면이 좀 이상해져 높이 자체도 0으로 설정한 것입니다.
다음은 Web 컴포넌트 Web_Token으로부터 정보를 받았을 때 실행되는 블록입니다.
Web_Token 컴포넌트는 이 예제 앱에서는 2번 정보를 전달 받습니다.
1. WebViewer1이 페이지 로딩되어 POST 방식으로 Token을 요청할 때 (위 블록에서 ⑦과 연결됩니다.)
2. [로그아웃] 버튼을 클릭하여 Token 만료를 POST 방식으로 요청할 때
① Web_Token이 정보를 받았을 때
② Web_Token이 받은 url과 카카오 서비스 토큰 요청 url이 일치한다면,
(그렇지 않은 경우는 get url이 로그아웃 요청 url인 경우이고, ⑨으로 이동합니다.)
③ [결과 확인 창] 레이블의 텍스트를 Web_Token 컴포넌트가 받은 정보로 표시합니다.
(결과 확인 창은 수시로 바뀌게 되어 보이지 않을 수도 있습니다. 여러분이 앱을 만들면서 정보가 어떤 식으로 나오는지 확인해 볼 수 있도록 넣어 둔 것입니다.)
위의 블록은 json Text를 앱인벤터의 딕셔너리 형식으로 바꾸는 명령입니다.
카카오 인증 서비스로부터 받는 정보는 거의 json 형식으로 되어 있습니다.
④~⑤ 카카오 서비스 서버로부터 access token과 refresh token을 받아 앱인벤터 변수 accessToken, refreshToken에 각각 저장해둡니다.
※ 카카오 서비스 서버로부터 받는 정보는 다음과 같이 구성되어 있습니다.
{
"access_token":"{ACCESS_TOKEN}",
"token_type":"bearer",
"refresh_token":"{REFRESH_TOKEN}", //optional
"refresh_token_expires_in":25184000, //optional
"expires_in":43199,
}
※ 딕셔너리(Dictionary) 블록에 대한 이해가 부족하신 분은, 다음 포스팅을 참고하시기 바랍니다.
앱인벤터 강좌 #2 딕셔너리(Dictionary) 블록
안녕하세요. 이지이지입니다. 이번 포스팅에서는 딕셔너리(Dictionary) 블록에 대해 알아보도록 하겠습니다. 딕셔너리(Dictionary)란? 딕셔너리는 키(key)와 값(value)으로 이루어진 데이터 구조를 말하
egeasy.tistory.com
⑥ Web_Profile 컴포넌트의 url을 카카오 로그인 API에서 사용자 정보 가져오기 url 주소로 지정합니다.
→ ⑤에서 토큰을 받아오면 사용자가 인증되었다는 의미로 사실상 로그인은 모두 끝난 것이고, 추가로 필요한 사용자 정보를 가져오기 위한 것입니다.
⑦~⑧ 카카오 로그인 API에 request headers를 ⑦처럼,
얻고자 하는 정보를 ⑧처럼 구성하여 POST 형식으로 요청합니다.
※ 카카오 개발자 문서에서 다음 내용에 해당하는 부분입니다.
(H는 request headers를, d에는 요청할 정보를 입력합니다.)
["kakao_account.email"] 부분은 전달 받기를 원하는 사용자 정보로, 다양하게 구성할 수 있습니다. 전달받을 수 있는 정보는 카카오 개발자 문서를 참고하시기 바랍니다. 단, 동의항목 설정시에 설정된 정보만 받아올 수 있습니다.
⑨ ②에서 Web_Token이 받은 url과 카카오 서비스 토큰 요청 url이 일치하지 않는다면,
이 때 url은 로그아웃 요청 url이기 때문에(뒷 부분의 로그아웃 버튼을 눌렀을 때, 블록 참고)
[결과 화면 창]의 텍스트를 "로그아웃 되었습니다."로 표시합니다.
다음은 Web_Profile 컴포넌트가 카카오 로그인 API 서버로부터 사용자정보를 받았을 때 발생하는 블록입니다.
① Web_Profile 컴포넌트가 정보를 받았을 때
② [결과 확인 창]의 텍스트를 위의 이미지처럼 "로그인한 계정은 egeasydev@gmail.com 입니다." 처럼 표현합니다.
※ lbl_Result 컴포넌트 속성 중 HTML Format이 체크되어 있어야 html 태그(<font color 등.>를 사용할 수 있습니다.
위의 이미지는 카카오 개발자 문서에 있는 sample resonse입니다.
이 예제 앱에서는 이메일주소를 가져와 [결과 화면 확인]창에 가져오도록 하였습니다.
가져올 정보는 리스트로 리스트의 첫 번째 항목은 위의 이미지 트리구조 에서 1수준, 두 번째 항목은 2수준, ....에 있는 키를 넣으면 됩니다.
③ 이제 카카오 인증 서비스와 로그인 API에서 필요한 정보는 모두 가지고 왔으므로,
[카카오 로그인]버튼을 클릭했을 때 화면에서 사라지게 했던 앱인벤터의 컴포넌트를 모두 보일 수 있게
앱인벤터 컴포넌트들을 둘러싸고 있는 Ver_AllWrap을 화면에 표시합니다.
다음은 [로그아웃] 버튼을 클릭했을 때 실행되는 블록입니다.
① 로그아웃 버튼을 클릭했을 때
②~③ 카카오 로그인 API에 "연결 끊기"를 요청합니다.
※ 카카오 개발자 문서에 따르면 로그아웃을 요청했을 때에는
"웹 브라우저의 카카오계정 로그인 상태는 로그아웃 API를 호출해도 유지됩니다."라고 나와 있습니다.
그래서 더 확실히 "연결 끊기"를 요청하여 로그아웃과 함께 앱과 사용자 카카오계정의 연결을 끊습니다.
④ 카카오 로그인 API에 POST 방식으로 연결 끊기를 요청하는데,
Request Headers만 필요하고, 넘길 정보는 따로 없어 넘길 정보를 공백으로 합니다.
⑤ WebViewer1에는 이전에 카카오 로그인 후 redirect된 주소에 있어, 로그아웃 후에는 임의의 공백 주소로 이동시켜 둡니다.
⑥~⑨ 소소한 앱인벤터 컴포넌트의 속성을 변경합니다. 설명은 생략합니다.
이상 앱인벤터에서 카카오 로그인 기능을 구현하는 포스팅을 마치겠습니다.
서두에서도 밝혔듯이 저도 처음 시도해보는 기능이고, 관련 문서가 없어 오류가 있을 수 있습니다.
혹시 의문사항이나 오류가 발견되면 댓글로 제보해주시기 바랍니다.~~~
댓글