Kakao 간편로그인 (1)

sum0725 2020. 3. 10. 10:07

2020. 3. 10. 10:07

회사에서 카카오톡으로 로그인 기능을 사용하고 싶다는 니즈가 있어서 공부하게 되었다!

1) 카카오 디벨로퍼 로그인하고 사용자 관리에 Javascript 개발가이드를 클릭한다.

(서버가 노드 기반이라 Javascript 를 선택했다)

2) 로그인 부분의 설명을 읽는다. 이게 무슨 소리지?.....

2-1 ) 간략 설명

OAuth 2.0 은 인증을위한 산업 표준 프로토콜 (보안 기능프레임워크)이다.

웹 응용 프로그램 등에 대한 특정 권한 부여를 제공하면서 개발할 수 있도록 도와준다.

자세한 내용은 여기를 클릭하면 상세 내용을 볼 수 있는데 클라이언트라는 단어가 나온다. 이는 개발자를 뜻한다.

3) https://developers.kakao.com/docs/js에서 앱을 등록합시다.

4) 등록 후 샘플 코드를 작성합니다. -- 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>

5) 실행해야되는데 file://user/desktop/--- 으로 들어가서 실행이 안되었다.

필자 사용 툴 : vscode / node 를 설치하고 npm live-server 를 설치했는데 에러가 떠서

작업한 파일에 깃 클론을 받았다. 아래 링크에서 다운 방법 및 이용법이 나와있다.

https://www.npmjs.com/package/live-server

live-server - cmd 로 열어야된다.