티스토리 뷰

API/Kakao 카카오

SNS 로그인 기능 구현 하기 카카오 (JSP, javascript)

KIMSG 2017. 7. 20. 15:31




카카오톡 로그인에 대해서 크게 생각을 해보진 않았지만 언젠가는 꼭 써야할 날이 오고야만 마는 그 날을 위해서.

SNS로그인 기능을 사용하려면 우선 OAuth에 대해서 알아야 한다.
네이버 D2의 OAuth와 춤을 : http://d2.naver.com/helloworld/24942
OAuth 공식 홈페이지 : https://oauth.net/2/

요약 : 내정보를 다른 곳에서도 쓸 수 있게 인증해주는 것이다.

카카오톡 이외에도 구글, 페이스북, 네이버, 트위터 기타 등등이 있다.


우선, 앱개발을 눌러 시작을 해본다.   https://developers.kakao.com/
앱을 만든다. (한글 문서라서 어려운 부분이 없다. 최고다.)
아이콘, 이름도 다 설정할 수 있다.
이후에 다시 키를 확인할 수 있으니 개발가이드로 바로 넘어가도 된다.

사용자관리 > 원하는 방식으로 들어가면 된다. (JavaScript)
예제 로그인버튼 추가 :  https://developers.kakao.com/docs/js/kakaologin

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
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
 
<a id="kakao-login-btn"></a>
<a href="http://developers.kakao.com/logout"></a>
 
 
<!-- Kakao Login -->
<script type="text/javascript">
      // 사용할 앱의 JavaScript 키를 설정해 주세요.
      Kakao.init('키입력');
      // 카카오 로그인 버튼을 생성합니다.
      Kakao.Auth.createLoginButton({
        container: '#kakao-login-btn',
        success: function(authObj) {
          // 로그인 성공시, API를 호출합니다.
          Kakao.API.request({
            url: '/v1/user/me',
            success: function(res) {
              console.log(JSON.stringify(res.kaccount_email));
              console.log(JSON.stringify(res.id));
              console.log(JSON.stringify(res.properties.profile_image));
              console.log(JSON.stringify(res.properties.nickname));
            },
            fail: function(error) {
              alert(JSON.stringify(error));
            }
          });
        },
        fail: function(err) {
          alert(JSON.stringify(err));
        }
      });
</script>
cs


이렇게 소스를 그대로 사용을 했지만 사용자의 정보를 가져올 수 없다면 설정을 수정한다.
사용자 관리를 활성화 시키면 가져올 수 있는 데이터나 항목을 선택할 수 있고
그에따른 설정도 선택할 수 있다.
지금까지 사용한 카카오API의 기능은 Auth라는 것이었고 
https://developers.kakao.com/docs/js-reference 이곳에서 Auth이외의 다른 개발 옵션도 볼 수 있다.

또한, 위에 적힌 데이터 예시 이외의 가져올 수 있는 데이터는 아래의 링크에서 확인할 수 있다.





'API > Kakao 카카오' 카테고리의 다른 글

다음 에디터 적용 (API 사용법1)  (0) 2017.07.25
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함