새로운 구글 로그인 API

축복이똘똘이형아·2022년 6월 3일
1

스프링

목록 보기
1/1
post-thumbnail

새로운 구글 로그인 API가 나오면서 기존에 있던 것들이 막혀버렸다.
이전에 구현한 것들은 어쩔 수 없지만 새롭게 구현을 시작하는 것들은 모두 새로운 API를 사용하지 않으면 못쓰게 막아놓았다.
나는 이것도 모르고 열심히 옛날 코드자료 가져다가 계속 구현하려고 삽질을 너무 해버렸다.
정책이 바뀐지 별로 안되어서 자료도 별로 없고 해서 이렇게 다른 사람들에게 조금이라도 도움이 되고자 글을 작성한다.

1. Client ID 만들기

구글 클라우드 주소

https://console.cloud.google.com/apis/credentials/consent
Client ID는 기존에 구글API 만들때랑 똑같이 구현하면 된다.
그런데 주의해야할 점이 예전에는 localhost용으로 로그인 기능을 만들때 "사용자 인증 정보" 에서 승인된 자바스크립트 원본 URI를 "http://localhost:8080" 만 넣어줬으면 되었는데 이제는 아래 사진처럼 두개다 넣어줘야한다.

2. 예시 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <script src="https://apis.google.com/js/platform.js" async defer></script>
      <script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script>
        function handleCredentialResponse(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) {
            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);
        };
        window.onload = function () {
          google.accounts.id.initialize({
            client_id: "클라이언트ID",
            callback: handleCredentialResponse
          });
          google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
          );
          google.accounts.id.prompt(); // also display the One Tap dialog
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>

3. 코드 흐름

  1. 로그인 성공했을때 response로 JWT Encoded Code가 반환된다.
  2. 해당 JWT encoded code를 JWT decoder를 사용해서 parsing을 해야한다. (위에 예시에 parseJWT(toekn)은 개인적으로 구현해야하는 코드이다. 근데 위에꺼 그냥 갖다가 써도 노상관!)
  3. 잘 사용하면 된다.

도움되는 내용

새로운 버전의 구글 로그인 API 내용들
https://developers.google.com/identity/gsi/web/guides/display-button

JWT web Token 관련 내용들
https://jwt.io/

profile
오늘보다 발전한 내일의 나를 위하여!

0개의 댓글