fake-Store API를 통해 정상적인 로그인 요청과 회원가입은 성공했으나 DB가 없으니 실제 유저 정보까지 이용하는데 한계점이 있었다. 그와중에 카카오 소셜 로그인
을 이용하면 어떨까 생각이 들어 사용해 봄
공식 문서를 따라 SDK 방식으로 진행해봄
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
를 public/index.html
에 넣음
로그인 페이지에 카카오 로그인 버튼 추가
data-type="login"
속성을 통해 이 버튼으로 로그인을 할지 로그아웃을 할지 명시했다.
import KakaoAuth from "./KakaoAuth";
(...)
<button
className="KakaoLogin_btn"
data-type="login"
onClick={KakaoAuth}>
카카오계정으로 로그인
</button>
KakaoAuth를 SDK를 한번만 initialize하도록 하며 AccessToken을 받아온다.
클릭한 button
의 data 속성에 따라 login
, logout
함수가 실행됨
const initKakao = (e) => {
// 등록된 앱의 JavaScript key
const KAKAO_CLIENT_ID = "17e19423194d296e3b3314276ed4ba08";
// SDK는 한 번만 초기화해야 한다.
// 중복되는 초기화를 막기 위해 isInitialized()로 SDK 초기화 여부를 판단한다.
if (!window.Kakao.isInitialized()) {
// JavaScript key를 인자로 주고 SDK 초기화
window.Kakao.init(KAKAO_CLIENT_ID);
// SDK 초기화 여부를 확인하자.
console.log(window.Kakao.isInitialized());
}
const Auth = e.target.dataset.type;
if (Auth === "login") {
loginKakao();
} else if (Auth === "logout") {
logoutKaKao();
}
console.log(e.target.dataset.type);
return <></>;
};
카카오 로그인 함수
AccessToken을 발급받은 상태이면 Kakao.Auth.login
을 통해 로그인하고 받아올 계정의 정보를 scope
를 통해 명시함
Kakao.API.request
을 통해 유저 정보를 요청함
Promise로 pending 상태 이후 정상적 반환으로 콜백이 실행되면 해당 유저 정보가 반환되면 이를 localstorage에 저장됨...
const loginKakao = () => {
if (window.Kakao.Auth.getAccessToken()) {
alert("Already logged in");
return;
}
try {
return new Promise((resolve, reject) =>
window.Kakao.Auth.login({
scope:
"profile_nickname,profile_image,account_email,gender,age_range,birthday",
success: function (response) {
console.log(response);
window.Kakao.API.request({
url: "/v2/user/me",
success: (res) => {
const kakao_account = res.kakao_account;
localStorage.setItem("User", encrypt(kakao_account, "User"));
window.location.href = "/book_curly";
},
});
},
fail: function (error) {
console.log(error);
},
})
);
} catch (error) {
console.log(error);
}
};
백엔드가 없어 별도의 DB 저장이 없어 localStorage에 떡하니 개인정보가 담긴게 좀 아쉬워서 자바스크립트로 암호화할 수 있는 것을 찾아보았다.
crypto-js 라이브러리 활용 참고해 암호화/복호화 함수를 작성하고 localStorage에 암호화한 값을 저장하고 유저 개인 프로필 페이지에서 이를 다시 복호화해 화면에 렌더링 하고자 한다..!!!
import CryptoJS from "crypto-js";
export const encrypt = (data, key) => { //암호화 함수
return CryptoJS.AES.encrypt(JSON.stringify(data), key).toString();
};
export const decrypt = (text, key) => { //복호화 함수
try {
const bytes = CryptoJS.AES.decrypt(text, key);
return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
} catch (err) {
console.log(err);
return;
}
};
로그인하여 localStorage에 암호화된 유저 정보를 복호화해 유저이름을 받아와서 화면상단에 000님
이 보이도록 함
//localStorage에 암호화된 유저 정보 복호화해 유저이름 받아오는 함수
const getUsername = () => {
return decrypt(localStorage.getItem("User"), "User").profile.nickname;
};
헤더상단에 더이상 로그인/회원가입이 아닌 {유저이름}/내정보/로그아웃이 떠야한다.
{localStorage.getItem("kakao_d13afba05b7222903cff5f3a2226caa2") && (
<>
<li className="UserMenu_List_name">{getUsername()}</li>
<li className="UserMenu_List_profile">
<Link to="/myprofile">내정보</Link>
</li>
<li
className="UserMenu_List_logout"
data-type="logout"
onClick={KakaoAuth}
>
로그아웃
</li>
</>
)}
{!localStorage.getItem("kakao_d13afba05b7222903cff5f3a2226caa2") && (
<>
<li className="UserMenu_List_join">
<Link to="/signup">회원가입</Link>
</li>
<li className="UserMenu_List_login">
<Link to="/login">로그인</Link>
</li>
</>
)}