제일 짜증나고 시간 낭비 많이한 sns 로그인 기능.
why? api가 갱신되어 기존 코드들이 쓰레기가 되었다.
deprecated코드들이라 최신 코드를 찾다보니 고생했는데, 레퍼런스가 쓰레기라 샘플코드 작성이 되어 있는분 찾느라 개고생했다.
코드들 작성된거 보면 다 패고 싶을 정도로 1개 주제를 4개로 쪼개고 그런 수준이하의 인간들이 많았다.
분량이 많은 것도 아니고 그냥 페이지 뷰 올릴려고...
정확히 아래 방법이긴했는데, 이것 저것 뜯어고쳐야만 했다.
meta가 들어가는 코드는 구형 코드...
<html>
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<a href="#" onclick="signOut();">Sign out</a>
</body>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
</html>
gsi가 신규 코드. 회사에 적용한건 script가 구형코드였네 씁...
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<script>
function handleCredentialResponse(response) {
// decodeJwtResponse() is a custom function defined by you
// to decode the credential response.
const responsePayload = decodeJwtResponse(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);
}
</script>위에 있는 decode 내용이 변환하도록 하는 함수 ㅎ
function parseJwt (token) {
var base64Url = token.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
};
로그아웃이 없는 이유는... 아직 안만듬
-- 친절하게 구코드 박혀 있다. 이거보면 지옥간다. --
https://developers.google.com/identity/sign-in/web/sign-in
웹 앱에 Google 로그인 통합 | Google Sign-In for Websites | Google Developers
웹용 Google 로그인 자바스크립트 플랫폼 라이브러리가 지원 중단됩니다. 지원 중단 날짜인 2023년 3월 31일 이후에는 이 라이브러리를 다운로드할 수 없습니다. 대신 새로운 웹용 Google ID 서비스를
developers.google.com
-- 이거 봐야 최신 코드...--
https://developers.google.com/identity/gsi/web/guides/display-button#javascript
Google 계정으로 로그인 버튼 표시 | Sign In With Google | Google Developers
경고: 이 데이터는 Google 사용자 데이터 정책에 따라 제공됩니다. 정책을 검토하고 준수하시기 바랍니다. 이렇게 하지 않으면 프로젝트 또는 계정이 정지될 수 있습니다. 이 페이지는 Cloud Translati
developers.google.com
'취업 > 소셜로그인' 카테고리의 다른 글
| [ci4] 페이스북 sdk php 버전용. (0) | 2022.06.21 |
|---|---|
| [ci4] kakako 로그인 기능 구현. (0) | 2022.06.10 |
| [ci4] 소셜로그인 페이스북 로그인/로그아웃 (0) | 2022.06.01 |
| [ci4] 소셜로그인 카카오 로그인/로그아웃 (0) | 2022.06.01 |
| [RN]리액트 네이티브(17)"구글 로그인 연결 without firebase" (7) | 2021.04.20 |