오늘날 웹사이트에서 이젠 거의 필수적이라고 할 수 있는 소셜 로그인을 구현해보려고 한다!
구글 소셜 로그인을 구현하기 위해서는 google cloud platform에서 클라이언트ID랑 PW를 발급해야 한다.
공식문서에 따르면 클라이언트 라이브러리를 로드해야 한다고 하므로, index.html <head>태그 안에 다음과 같이 코드를 작성해줬다.
처음엔 최상위 App.tsx에 코드를 작성했더니 Layout 위로 로그인이 튀어나와 예뻐보이지 않았다. 어떻게든 Login 컴포넌트 안에 넣어놓으려 했는데, 최상위에 작성하지 않으면 아예 렌더링이 되지 않았다.
그리고 코드도 엄청나게 복잡했다....
//src/App.tsx
import Router from './routes/Router';
import { useEffect, useState } from 'react';
import jwt_decode from 'jwt-decode';
function App() {
const [user, setUser] = useState({});
function handleCallbackResponse(response) {
console.log('Encoded JWT ID token:' + response.credential);
let userObject = jwt_decode(response.credential);
console.log(userObject);
setUser(userObject);
document.getElementById('signInDiv').hidden = true;
}
function handleSignOut(event) {
setUser({});
document.getElementById('signInDiv').hidden = false;
}
useEffect(() => {
/* global google */
google.accounts.id.initialize({
client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
callback: handleCallbackResponse,
});
google.accounts.id.renderButton(document.getElementById('signInDiv'), {
theme: 'outline',
size: 'large',
});
google.accounts.id.prompt();
}, []);
return (
<>
<div id='signInDiv'></div>
{Object.keys(user).length != 0 && (
<button onClick={(e) => handleSignOut(e)}>Sign Out</button>
)}
{user && (
<div>
<img src={user.picture} />
<h3>{user.name}</h3>
</div>
)}
<Router />{' '}
</>
);
}
export default App;
나의 최상위 컴포넌트인 App.tsx를 저렇게 둘 수는 없었다. 좀 더 서치하다보니, Google Identity Services SDK를 좀 더 편하게 구현할 수 있게 해주는 라이브러리 react-oauth를 발견했다. (react-google-login은 deprecated됨)
사용법도 어렵지 않아, 공식문서대로 차근차근 했더니 잘 구현할 수 있었다!
그런데 기본으로 제공해주는 버튼 디자인보다는 좀 더 스타일 작업을 하는 게 나을 것 같다ㅋ_ㅋ 그건 내일 해봐야지!
오늘의 결과물
참고사이트: React를 사용한 Google ID 서비스 로그인(2023 React Google 로그인)by Cooper Codes
구글 로그인(Google Login) 리액트(React)에서 구현해보자 by Stack_Shines
오늘의 일기:
하루하루가 연습이니 내일은 더 강해질 겁니다