웹에서 javascript로 카카오톡 로그인 구현하기
사용자를 위한 간편 로그인 기능을 구현하고 있다.
자바스크립트 Rest API 등등 배워본적이 없는 나로서는 막힘의 연속이었다.
일단은 카카오 개발자 사이트에 있는 javascript 개발 가이드와 레퍼런스를 꼼꼼히 보았다.
https://developers.kakao.com 개발자 사이트
https://developers.kakao.com/docs/js - javascript 개발가이드
https://developers.kakao.com/docs/js-reference - javascript 레퍼런스
그리고 일단 따라해 보았다.
먼저 테스트를 하려면 개발자 아이디와 개발자용 앱(?) 을 만들어 주어야 하고
거기서 받은 key값을 사용하여야 하고 사이트 도메인도 지정해 주어야 한다.
개발자 앱 만들기 및 키 발급받기
1. 로그인을 한 뒤 1번 박스인 내 애플리케이션을 누른후 앱만들기를 눌러준다.
2. 이름을 적고 앱만들기 버튼을 눌러서 키를 발급받는다. 아이콘은 안해도 된다.
3. 그럼 이렇게 키값들이 나오고 앱이 생성됩니다. 여기서 설정을 눌러줍니다.
4. 이런 화면이 나오는데 거기서 플랫폼 추가 버튼 누르시고 저는 웹에서만들거라서 웹 선택하고
사이트 도메인은 로컬로 해놓았습니다.
5. 이렇게 하시면 준비 완료!
카카오톡 로그인 간편예제 javascript로 구현해보기
index.html 파일을 만들어서 다음 코드를 작성하였다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/> <title>Login Demo - Kakao JavaScript SDK</title> <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script> </head> <body> <a id="kakao-login-btn"></a> <a href="http://developers.kakao.com/logout"></a> <script type='text/javascript'> //<![CDATA[ // 사용할 앱의 JavaScript 키를 설정해 주세요. Kakao.init('YOUR APP KEY'); //여기서 아까 발급받은 키 중 javascript키를 사용해준다. // 카카오 로그인 버튼을 생성합니다. Kakao.Auth.createLoginButton({ container: '#kakao-login-btn', success: function(authObj) { alert(JSON.stringify(authObj)); }, fail: function(err) { alert(JSON.stringify(err)); } }); //]]> </script> </body> </html>
출처 : 카카오톡 javascript 개발가이드 카카오로그인 예제:로그인버튼추가
https://developers.kakao.com/docs/js/kakaologin
위 코드에서 빨강색으로 강조한 함수의 레퍼런스이다.
출처 : javascrip레퍼런스 https://developers.kakao.com/docs/js-reference#kakao_auth
서버에 넣어서 돌리자.
우왕 ! 버튼이 생겼다!!
신이난다!! 버튼을 출력하니 윈도우 알림창으로 내 정보들과 토큰값들이 나온다.
거기에는 내 개인정보들이 들어있기에 캡쳐하지 않겠다!!
레퍼런스에 따르면 다음 정보 값들이 출력된다고 한다.
생년월일을 못가져와서 아쉽다. 핸드폰 번호도 없는것같다.
출처 : REST API 도구 사용자관리 사용자정보요청 데모 https://developers.kakao.com/docs/restapi/tool#user-api
참고로 properties로는 프사이미지파일/ 배경이미지파일 / 닉네임 정도 가져올수 있는것같다.
위 url에서 데모 테스트 가능하다. 무슨값나오는지 궁금하면 ㄱㄱ
-----------------------------여기까지는 그냥 가이드 따라한것이다. 이제 조금 더 확장해 보겠다.----------------------------
원하는 정보만 가져와보기
버튼을 출력한 후 클릭 시 정보 불러오기 성공하면 원래
success 펑션 안에 alert(JSON.stringify(authObj)); 해주었었다.
그런데 이번에는 success function 안에 kakao.api.reauest라는 함수를 호출하여 사용자 정보를 불러와보자.
아래에서는 내가 사용한 코드이다. 로그인 성공하였을 때 정보들인 authObj 파라미터와 사용자 정보 요청을 성공하였을 때 사용자 정보를 가져오는 res 파라미터가 있다.
참고로 출력할 때 echo 나 print , print_r 등은 먹지 않는다. 찾아보니 자바스크립트 객체 여서 그런것같다. 그래서 자바스크립트를 디버깅 해주는(?), 자바스크립트의 객체를 출력해주는 alert 과 console.log 함수로 출력을 해본다.
참고로 console.log는 F12버튼을 누르면 나오는 개발자도구에서 콘솔(Console)창을 보면 결과가 나온다.
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function(authObj) {
Kakao.API.request({
url: '/v1/user/me',
success: function(res) {
alert(JSON.stringify(res)); //<---- kakao.api.request 에서 불러온 결과값 json형태로 출력
alert(JSON.stringify(authObj)); //<----Kakao.Auth.createLoginButton에서 불러온 결과값 json형태로 출력
console.log(res.id);//<---- 콘솔 로그에 id 정보 출력(id는 res안에 있기 때문에 res.id 로 불러온다)
console.log(res.kaccount_email);//<---- 콘솔 로그에 email 정보 출력 (어딨는지 알겠죠?)
console.log(res.properties['nickname']);//<---- 콘솔 로그에 닉네임 출력(properties에 있는 nickname 접근
// res.properties.nickname으로도 접근 가능 )
console.log(authObj.access_token);//<---- 콘솔 로그에 토큰값 출력
}
})
},
fail: function(error) {
alert(JSON.stringify(error));
}
});
//]]>
이렇게하시면 제가 원하는 정보만 볼 수 있습니다.!
여기서 궁금했던점!
토큰은 왜 무엇이며 왜 필요한가?
값들은 어떻게 db에 저장해야 하는가?
였다.
근데 글이 너무 긴것같다.. 힘드네 다음에 알아보도록 하자.
'공부 > 프론트엔드' 카테고리의 다른 글
| CSS 스타일 종합1 (0) | 2018.09.12 |
|---|---|
| [퍼옴주의] 반응형 css의 생소한 단위들 (0) | 2018.01.05 |
| [퍼옴주의] 모바일웹, 웹앱, 하이브리드앱, 네이티브앱의 개념 (0) | 2018.01.05 |
| [퍼옴] 카카오톡 로그인 구현중 인증 - OAuth와 춤을 (0) | 2017.12.27 |
| 조금씩이라도 메모 (0) | 2017.12.22 |
댓글