구글 계정 로그인을 구현하는 방법
https://console.cloud.google.com/getting-started
Google Cloud console
console.cloud.google.com
1. 구글 개발자 콘솔에서 프로젝트 생성하기
먼저 구글 개발자 콘솔에서 새로운 프로젝트를 생성. 구글 개발자 콘솔에 접속한 후, 새 프로젝트를 생성하고 API 및 서비스를 활성화
2. OAuth 2.0 클라이언트 ID 생성하기
구글 개발자 콘솔에서 OAuth 2.0 클라이언트 ID를 생성. 클라이언트 ID를 생성할 때는 리디렉션 URL도 설정. 이 URL은 사용자가 구글 계정으로 로그인을 완료한 후 리디렉션될 페이지의 URL이다. 로컬 호스트 테스트가 가능하지만 허용목록에 잘추가해줘야됌
3. 클라이언트(프론트) 코드 작성하기
클라이언트 측에서는 구글 계정 로그인 버튼을 만들고, 해당 버튼을 클릭했을 때 OAuth 2.0 흐름을 시작하도록 코드를 작성. 구글 로그인 API를 사용하여 사용자 인증 및 권한 부여. 로그인 성공 시 구글로부터 발급받은 인증 코드를 서버로 전달해야 된다.
4. 서버(백엔드) 코드 작성하기
서버 측에서는 클라이언트로부터 전달받은 인증 코드를 사용하여 구글 API에 액세스 토큰을 요청해서 사용자 정보를 가져올 수 있다. 이를 통해 로그인한 사용자의 정보를 확인하고, 필요한 처리를 수행.
5. 세션 관리하기
로그인 성공 후 사용자 세션을 관리해야 한다. 세션을 통해 사용자 정보를 저장하고, 로그인 상태를 유지한다.
예시코드
간단하게 예시 코드를 통해서 구현 방법을 정리해보았다.
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Google Login</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<script>
function handleCredentialResponse(response) {
// 서버로 받은 response를 처리하는 로직을 작성합니다.
console.log(response);
// 로그인이 성공한 경우, 회원가입 페이지로 리다이렉션합니다.
if (response.credential) {
window.location.href = '/signup';
}
}
</script>
</body>
</html>'기타' 카테고리의 다른 글
| Swiper.js 사용법 및 여러개 사용시 버그 해결 (0) | 2024.07.11 |
|---|---|
| vscode Prettier 설정 (0) | 2024.04.18 |
| 웹팩(WebPack)이란? (0) | 2023.05.22 |
| 캐시(Cache)/캐시전략 이란? (0) | 2023.02.28 |
| Module 이란? (0) | 2023.02.28 |