오늘은 소셜 로그인 중에 하나인 카카오톡 로그인을 구현했다.
먼저 카카오톡 api를 사용하기 위해 KakaoDevelopers에서 앱을 만들고 웹 플랫폼 선택 사이트 도메인을 등록한다.
여러가지 키들을 제공해주는데 Javascript 키를 사용해야한다.
프로젝트하는 디렉토리의 index.html에 카카오톡에서 제공하는 Javascript SDK를 script로 import해준다.
그리고 로그인 페이지(로그인 컴포넌트)에서 window.Kakao(전역)로 접근한다.
이제 해당 프로젝트 디렉토리 전역 어디에서든 kakao가 SDK로 제공해주는 것에 대해 접근할 수 있게됬다.
kakao가 SDK로 제공해주는것을 사용하기 전에 무조건 SDK를 초기화 해줘야하는데 window.Kakao.init(key)로 초기화를 해준다.
이때 key는 앱을 만들고 설정이 다 끝나면 받게되는 key 중에 javascript key를 넣어준다.
SDK초기화(window.Kakao.init(key))는 render 메서드가 실행되고 바로 실행되는 componentDidMount()를 사용해서
componentDidMount() 안에 로직을 작성했다.
카카오에서 기본적으로 카카오톡 로그인 버튼을 생성할 수 있게 제공해주는 함수가 있다.
사용 방법은 아래와 같다.
Kakao.Auth.createLoginButton({
container: "#kakao-login-btn",
success: function(authObj) {
alert(JSON.stringify(authObj));
},
fail: function(err) {
alert(JSON.stringify(err));
}
});jsx에서 요소를 미리 만들어두고 요소의 id 값을 container의 값으로 준다.
버튼이 만들어져 클릭하면 wuccess에 authObj로 객체가 넘어온다.
위 코드와는 별개로 window.Kakao를 setState해서 상태를 가지고 있는다.
이 로직도 componentDidMount() 안에 작성했다.
이제 로그인 버튼도 만들어지고 window.Kakao도 상태로 가지고 있다.
위 2가지는 이제 화면이 렌더링되고 직후 바로 실행된다.
이제 로그인 버튼 클릭 했을때 우리 백엔드 서버에 fetch GET으로 access_token을 보내고 response를 받으려고 한다.
Kakao를 this.state에 Kakao에 할당했다.
로그인 됬을때 키를 받기위해 kakao에서 제공해주는 함수가 있는데 this.state.Kakao.Auth.login()을 사용한다.
(kakao에서 제공해주는 Auth.login())
this.state.Kakao.Auth.login()는 매개변수로 객체를 받는다.
로그인을 성공했을 때 kakao로부터 token을 받고 이 token을 fetch GET headers에 담아서 백엔드 서버에 보낸다.
백엔드 서버에서 정상적으로 받으면 response를 보내준다.
▼▼아래 코드는 카카오톡 로그인 기능을 구현한 코드이다.▼▼
class Login extends React.Component {
constructor() {
super();
this.state = {
email: "",
password: "",
Kakao: {}
};
}
componentDidMount() {
window.Kakao.init("f8649f9322f32e7bc59c64a23e9ae213");
window.Kakao.Auth.createLoginButton({
container: "#kakao_login_btn",
success(authObj) {
alert(JSON.stringify(authObj));
// console.log(authObj);
},
fail(err) {
alert(JSON.stringify(err));
}
});
this.setState({
Kakao: window.Kakao
});
}
onClickHandleKakaoLogin = () => {
this.state.Kakao.Auth.login({
success: kakaotoken => {
console.log(kakaotoken);
fetch("http://10.58.7.15:8000/users/kakaologin", {
headers: {
Authorization: kakaotoken.access_token
}
})
.then(response => response.json())
.then(response => {
console.log(response);
});
}
});
};
render() {
console.log(this.state.Kakao);
return (
<div className="login_page">
<div className="login_container">
<article className="login_content">
<div id="kakao_login_btn" onClick={this.onClickHandleKakaoLogin} />
</article>
</div>
</div>
);
}
}
export default withRouter(Login);처음에 fetch할때는 GET으로 백엔드 서버에 보낼 때 header로 보내달라고 하는데 어떻게 보내야 하는지를 몰랐다.
fetch("http://10.58.7.15:8000/users/kakaologin", {
headers: kakaotoken.access_token
});이렇게 작성하기도 하고 url쪽에 붙여서 같이 보내려고도 생각해보고 등등… 근데 url쪽에 붙여서 보내는건 좀 아닌거 같은데…?? 생각도 들고
구글링해서 찾아보니 headers에 담아 보내는 코드들이 보여서 그 코드드를 참고하여 해결했다.