Kakao Login

Using JavaScript SDK you can let users use Kakao Account to login to your website.

Example:Adding login button

  • This is a example for adding login button
  • Register app Must register domain through steps.
  • Change YOUR APP KEY' to JavaScript key.

With login button, it will trigger alert on click with access token in text after login has been successfully finished.

<!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://alpha-developers.kakao.com/logout"></a>
<script type='text/javascript'>
//<![CDATA[
  // Set JavaScript Key of current app.
  Kakao.init('YOUR APP KEY');
  // Create Kakao Login button.
  Kakao.Auth.createLoginButton({
    container: '#kakao-login-btn',
    success: function(authObj) {
      alert(JSON.stringify(authObj));
    },
    fail: function(err) {
       alert(JSON.stringify(err));
    }
  });
//]]>
</script>
</body>
</html>

Check examples demo from above! Show demo

Are you seeking more information about login? Kakao.Auth reference

Example: Use custom login button to use kakao Login

  • This is an example for linking custom login button and kakao login.
  • When its not necessity to build your own login button please refer to add login button.
  • Kakao Login Button image can be downloaded from here
  • Register app Must register domain through steps.
  • Change YOUR APP KEY' to JavaScript key.
After adding custom login button, access token will be alerted through alert prompt on success.
<!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[
  // Set JavaScript Key of current app.
  Kakao.init('YOUR APP KEY');
  function loginWithKakao() {
    // Open login popup.
    Kakao.Auth.login({
      success: function(authObj) {
        alert(JSON.stringify(authObj));
      },
      fail: function(err) {
        alert(JSON.stringify(err));
      }
    });
  };
//]]>
</script>
</body>
</html>

Check examples demo from above! Show demo

Are you seeking more information about login? Kakao.Auth reference

Access Token

  • Use Access Token returned after logging in to request Kakao API.
  • Access Token retrieved from JavaScript SDK JavaScript has expiration time of approximately 1-2 hours and could change later depending on our policy.
  • With Refresh Token, assigned with Access Token, you can retrieve new Access Token on demand.
  • Depending on security policy, retrieving new Access Token from Refresh Token should be issued with REST key from the server side. To retrieve Access Token from server side refer to REST guide login in refreshing user token
Retrieve Refresh Token given at login time.
var refreshToken = Kakao.Auth.getRefreshToken();
Set Newly issued Access Token from server side in JavaScript SDK
Kakao.Auth.setAccessToken(accessTokenFromServer);

Last Modified : 2017-07-28