카카오 소셜로그인 구현
https://developers.kakao.com/
카카오톡 소셜로그인을 구현하기 위해서는 위 사이트를 접속
카카오톡 접속 후 상단에 있는 내 애플리케이션에 접속한다.
애플리케이션을 추가하고 앱 키를 4개를 부여받는데 본인은 Javascript 키를 사용함.
index.html에 카카오톡 주소를 추가한다.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
그 다음 내가 사용한 Javascript 키를 사용해주어야 하는데 그냥 써버리면 github에 올렸을 떄 보안 문제가 있어서 원래는 env 파일을 이용하는 것으로 알고 있지만 일단 config 파일을 생성해서 그 안에 키를 넣고 컴포넌트로 보내는 형식으로 작성했다.
config 파일을 객체형식으로 해서 key값은 KAKAO_URL로 export하고
카카오 로그인 컴포넌트에서
import { config } from '../../config';
function SocialLogin() {
Kakao.init(config.KAKAO_URL);
console.log(Kakao.isInitialized());
Kakao.Auth.login({
success: function (authObj) {
console.log(authObj);
fetch('api 주소', {
method: 'GET',
headers: {
Authorization: authObj.access_token,
},
})
.then(res => res.json())
.then(res => {
localStorage.setItem('access_token', res.access_token);
if (res.access_token) {
alert('로그인 성공!');
history.push('/');
} else {
alert('다시 확인해주세요');
}
});
},
fail: function (err) {
console.log('에러', err);
alert('로그인실패!');
},
});
}
카카오 개발자 사이트에 들어가면 설명이 쭉 나오므로 그대로 따라해도 무방하다.
Kakao.init(내 자바스크립트 키 위치)로 내 키를 인식시켜주고
Kakao.Auth.login으로 내가 받아오려는 정보들을 받아오고 fetch 함수로 백엔드에 카카오에서 받은 access_token을 넘겨준다.
그리고 백엔드에서 보내준 다른 access_token을 localStoragedp 저장하면 메인페이지로 넘어가는 동시에 로그인 성공이라는 alert가 뜬다.
로그아웃 기능은 간단하게 localStorage에 넣어둔 access_token을 없애면 끝!
Author And Source
이 문제에 관하여(카카오 소셜로그인 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tkddus614/카카오-소셜로그인-구현저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)