서버는 Node.js, 프론트단은 React.js 이며 JavaScript sdk를 사용해서 로컬에서 개발하는 중입니다. 19년 6월 쯤 카카오톡 로그인 기능이 정상 작동하는 것을 확인한 뒤 6개월이 지나 다시 테스트 중인데요, Kakao.Auth.createLoginButton() 함수에서 다음과 같은 에러를 크롬 console 창에 뱉은 채 아무런 동작도 하지 않습니다.
Errogir: {"code":-32099,"message":"security error: #CST"}
createLoginButton() 함수를 봤더니 아래처럼 stateToken이라는 것 관련해서 뭔가 잘못 되었을 때 위 에러를 뱉는 것 같은데, 정확히 어느 경우에 해당하는 건가요?
g.createLoginButton = function (e) {
function t(e) {
if (e.stateToken !== s) throw new k.KakaoError("security error: #CST");
return delete e.stateToken, e;
}
//...(생략)
제 코드는 다음과 같습니다.
// ...
class KakaoLogin extends Component {
componentDidMount() {
const { history } = this.props;
Kakao.cleanup();
Kakao.init('0000000000000000000000');
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: (authObj) => {
Kakao.API.request({
url: '/v2/user/me',
success: (res) => {
this.loginOrJoin(res.id);
},
fail: function(err) {
alert('로그인에 실패하였습니다. 다시 시도해주세요.');
history.push('/');
}
})
},
fail: function(err) {
alert('로그인에 실패하였습니다. 다시 시도해주세요.');
history.push('/');
}
})
}
// ...
render() {
return (
<div className={cx('kakao-login')}>
<a id="kakao-login-btn" href={'/'}>{''}</a>
</div>
);
}
}
// ...
createLoginButton()의 옵션으로 always를 주어 테스트를 해보아도 위 에러만 뜹니다.
참고로 크롬 console 창에 warning이 뜨고 있는게 있는데, 관련이 있을까 하여 같이 첨부합니다.
A cookie associated with a cross-site resource at http://accounts.kakao.com/ was set without theSameSiteattribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set withSameSite=NoneandSecure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032