카카오 로그인 react에 붙이기

import React, { Component } from 'react';
import Kakao from 'kakaojs';

class KakaoLogin extends Component{

  componentDidMount(){
    console.log("hello-------");
    Kakao.init('e9c4b1d97b8bac697985d17eb59516b3');
    console.log(Kakao);
    Kakao.Auth.createLoginButton({
      container: '#kakao-login-btn',
      success: function(authObj) {
        alert(JSON.stringify(authObj));
      },
      fail: function(err) {
        alert(JSON.stringify(err));
      }
    });
  }
  render(){
    return (
      <div>
        <a id="kakao-login-btn"></a>
      </div>
    );
  }
}

export default KakaoLogin;

npm i --save kakaojs 이 명령어로 kakaojs를 설치 할 수 있다.

componentDidMount(){
    if (Kakao.Auth == null) {
      Kakao.init('39c0f53356e324929bb78bd27b69bb6b');
    }
    this.setState({"kakao": Kakao})
}

componentDidMount()에는 token을 넣고 초기화를 해준다. Kakao는 react안쪽에 있지는 않고 global이다.

handleClickKakaoLogin() {
    this.state.kakao.Auth.login({
      success: (response) => {
          console.log(response);
      }
    }
}

버튼 클릭하면 로그인 하게 만들 수 있다.

rest로 구축하기

하다가 보니까 결국은 rest방식으로 구현 하게 되었다.

rest server를 하나 더 띄워야 한다.

리액트 app이 3000번 포트에 뜨기 때문에 3001번에 node express로 서버를 한개 띄웠다.

<a href={"https://kauth.kakao.com/oauth/authorize?client_id=cc0328e41a9f5bd8b1f36eaa9d381770&redirect_uri=http://localhost:3001/kakao/oauth&response_type=code"}>
          <img alt={"kakao_login"} src={"https://kauth.kakao.com/public/widget/login/kr/kr_02_medium.png"}/>
</a>

여기에서 중요한 점은 client_id를 REST API키를 넣어주어야 한다.

나는 JavaScript 키로 하다가 삽질을 많이 했다.

 

이렇게 로그인 버튼을 한개 만든다. 그러면 새로 띄운 서버의 /kakao/login/을 콜한다.

app.js

router.get('/oauth/', (req, res, next)=>{
  console.log("---oauth---");
  console.log(req.query);
  res.send(JSON.stringify(req.query.code));
})

서버사이드 코드가 위와 같이 되어있다. /oauth/으로 리다이렉트 해주면 이쪽으로 들어온다.

rest api login시도 버튼을 누르면 localhost:3001/oauth/로 redirect 된다.

화면에는 별 변화가 없지만 3001 서버쪽 콘솔에는 이렇게 뜬다.