카카오 로그인

JavaScript SDK를 이용하여, 사용자들이 카카오 계정으로 웹사이트에 로그인하도록 할 수 있습니다.

예제: 로그인 버튼 추가

  • 로그인 버튼을 사이트에 추가하는 예제입니다.
  • 앱 등록 과정을 통해 도메인을 등록해야 합니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.

로그인 버튼을 추가하고, 로그인 성공 시 액세스 토큰을 알림창으로 출력합니다.

<!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');
    // 카카오 로그인 버튼을 생성합니다.
    Kakao.Auth.createLoginButton({
      container: '#kakao-login-btn',
      success: function(authObj) {
        alert(JSON.stringify(authObj));
      },
      fail: function(err) {
         alert(JSON.stringify(err));
      }
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

로그인과 관련된 자세한 내용이 궁금하다면? Kakao.Auth 레퍼런스

예제: 커스톰 로그인 버튼을 이용한 카카오 로그인

  • 커스톰 로그인 버튼과 카카오 로그인을 연결하는 예제입니다.
  • 직접 로그인 버튼을 제작할 필요가 없는 경우에는 로그인 버튼 추가 를 참조하세요.
  • 카카오 로그인 버튼 이미지는 여기에서 다운로드 할 수 있습니다.
  • 앱 등록 과정을 통해 도메인을 등록해야 합니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.

커스톰 로그인 버튼을 추가하고, 로그인 성공 시 액세스 토큰을 알림창으로 출력합니다.

<!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>Custom Login Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="custom-login-btn" href="javascript:loginWithKakao()">
<img src="//mud-kage.kakao.com/14/dn/btqbjxsO6vP/KPiGpdnsubSq3a0PHEGUK1/o.jpg" width="300"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function loginWithKakao() {
      // 로그인 창을 띄웁니다.
      Kakao.Auth.login({
        success: function(authObj) {
          alert(JSON.stringify(authObj));
        },
        fail: function(err) {
          alert(JSON.stringify(err));
        }
      });
    };
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

로그인과 관련된 자세한 내용이 궁금하다면? Kakao.Auth 레퍼런스

Access Token

  • 로그인 후 반환되는 Access Token을 이용하여 카카오 API를 호출할 수 있습니다.
  • JavaScript SDK를 통해 발급되는 Access Token의 만료 시간은 1-2시간 사이이며, 정책에 따라 변경될 수 있습니다.
  • Access Token과 함께 발급되는 Refresh Token을 이용하면 새로운 Access Token을 발급받을 수 있습니다.
  • 보안 정책에 따라 Refresh토큰을 이용한 새로운 Access Token 발급은 REST키를 이용하여 서버 측에서 이루어져야 합니다. 서버 측에서 Access Token을 발급받는 방법은 REST 가이드 로그인 의 '사용자 토큰 갱신' 부분을 참조하세요.

로그인시 발급된 Refresh Token을 얻어옵니다.

var refreshToken = Kakao.Auth.getRefreshToken();

서버 측에서 새로 발급받은 Access Token을 JavaScript SDK에 설정합니다.

Kakao.Auth.setAccessToken(accessTokenFromServer);

Last Modified : 2017-07-28