728x90
반응형
javascript로 google login 하기
💡OAuth 클라이언트 ID, Secret 생성에 대해 알고싶다면 이전글 확인
기존 방식을 사용해서 하다보면 migration 하라는 에러를 만날 수 있기에 수정된 버전으로 구현해보자😊
구현 중 여러 오류들을 만났고, 이를 해결한 최종 코드 공유👍
1️⃣ body안에 script 태그 삽입
<!-- google login -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
2️⃣ 원하는 위치에 구글 로그인 달기
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin" data-type="icon" data-shape="circle" ></div>
3️⃣ 로그인 정보를 가져오기 위한 handleCredentialResponse 함수 생성
function handleCredentialResponse(response) {
// decodeJwtResponse() is a custom function defined by you
// to decode the credential response.
const responsePayload = parseJwt(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
};
4️⃣ 로그인 정보를 변환하기 위한 parseJwt 함수 생성
function parseJwt (token) {
const base64Url = token.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
};
5️⃣ 최종 소스
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin" data-type="icon" data-shape="circle" ></div>
<script>
function handleCredentialResponse(response) {
// decodeJwtResponse() is a custom function defined by you
// to decode the credential response.
const responsePayload = parseJwt(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
};
function parseJwt (token) {
const base64Url = token.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
};
</script>
</body>
</html>
로컬에서 작업 시 Failed to load resource: the server responded with a status of 403 () 에러가 뜬다면 👇
구글 클라우드 플랫폼에서 승인된 자바스크립트 원본란 확인 필요 ✔
승인된 자바스크립트 원본(Authorized JavaScript origins)에 http://localhost 및 http://localhost:<port_number>를 입력란에 추가
참고
https://developers.google.com/identity/gsi/web/guides/migration
Google 로그인에서 이전 | Sign In With Google | Google Developers
경고: 이 데이터는 Google 사용자 데이터 정책에 따라 제공됩니다. 정책을 검토하고 준수하시기 바랍니다. 이렇게 하지 않으면 프로젝트 또는 계정이 정지될 수 있습니다. 이 페이지는 Cloud Translati
developers.google.com
반응형