느린 개발자

 

---

 

 

기존에 사용하던 웹용 구글 로그인 라이브러리가 중  2023년 3월 31일   일자로 중단될 예정이라

새로운 웹용 Google ID 서비스 솔루션  을 사용하여 진행해 보기로 한다.

 

기존 웹용 Google 로그인 문서

웹 앱에 Google 로그인 통합  |  Authentication  |  Google Developers

 

새롭게 적용된 Google 로그인 문서

Google JavaScript API로 로그인 참조  |  Authentication  |  Google Developers

 

 

1.  프로젝트 생성하기

 

Google 클라우드 플랫폼

 

• 프로젝트 이름과 조직 및 위치를 작성한다.

 

• OAuth 동의 화면 선택하여 User Type은 외부로 만들어준다.

 

• 앱 정보와 도메인을 입력하면 됩니다. (ex. localhost로 테스트 시 추후 입력해도 상관없음)

 

• 범위는 자신의 애플리케이션에서 구글로그인할 때 필요한 정보를 체크해 주면 됩니다.

 

• 사용자 인증정보 만들기를 클릭하여 테스트용 URL을 입력해 줍니다.
• 클라이언트 ID가 필요하므로 기록해 둡니다.

 

 

2.  라이브러리 로드

 

• html - 순수 JS 용도

<script src="https://accounts.google.com/gsi/client" async defer></script>

 

• Nuxt로 구현 시

    // nuxt.config.js -> head 
    script: [
      {src: 'https://accounts.google.com/gsi/client', async:true,defer:true} //google
    ]

 

 

3.  google.accounts.id.initialize

이 메서드를 사용하여 구글 로그인 initialize 합니다. 
초기에 이 메서드를 사용하여 설정해야 합니다.

export const GoogleInitialize = (clientId,btn_id,callback)=>{ 
      google.accounts.id.initialize({
        client_id: clientId, //클라이언트 ID
        callback:callback,  // 콜백 메소드
        context: 'use', //원탭 프롬프트 제목 및 메시지 설정  "use ->default"
      })
  }

 

그 밖에 더 다양한 필드가 존재하니.  관련 문서를 참고하여 주세요.

Google JavaScript API로 로그인 참조  |  Authentication  |  Google Developers

 

 

4.  google.accounts.id.renderButton

이 메서드는 웹페이지에서 Google 계정으로 로그인 버튼을 렌더링 합니다.

  export const rednerGoogleBtn = ()=>{
    google.accounts.id.renderButton(
      document.getElementById('googleButton'),
      {
        type: 'icon', //NOTE: 버튼 유형, standard,icon
        theme:'outline', //NOTE: 테마 , outline,filled_blue,filled_black
        size: 'large', //NOTE: 버튼 크기 large,medium,small
        text: 'signin_with',//NOTE: 버튼 텍스트 , signin_with,wignup_with,continue_with,signIn
        shape: 'circle', //NOTE: 버튼 모양 rectangular,pill,circle,square
        logo_alignment: 'center',
        width: 50,
      }
    )
  }

 

이거 또한 더 다양한 필드가 존재하므로 문서를 참고하면 됩니다.

Google JavaScript API로 로그인 참조  |  Authentication  |  Google Developers

 

 

5.  Nuxt로 구현

• GoogleLogin 컴포넌트

<template>
  <div>
    <div id="googleButton"></div>
  </div>
</template>

<script>
export default {
  
  mounted() {
    this.googleInitialize()
  },
  methods:{
    googleInitialize()
    {
      google.accounts.id.initialize({
        client_id: '클라이언트 ID',
        callback:this.handleCallback(),
        context: 'use',
      })
      google.accounts.id.renderButton(
        document.getElementById('googleButton'),
        {
          type: 'icon', //NOTE: 버튼 유형, standard,icon
          theme:'outline', //NOTE: 테마 , outline,filled_blue,filled_black
          size: 'large', //NOTE: 버튼 크기 large,medium,small
          text: 'signin_with',//NOTE: 버튼 텍스트 , signin_with,wignup_with,continue_with,signIn
          shape: 'circle', //NOTE: 버튼 모양 rectangular,pill,circle,square
          logo_alignment: 'center',
          width: 50,
        }
      )
    },
    
    //callback 함수로 데이터가 넘어온다.
    handleCallback(response){
      //JWT 토큰으로 나오기때문에 이 데이터를 파싱하여 확인해보자. 
      const token = response.credential
      const base64Payload = token.split('.')[1]
      const payload = Buffer.from(base64Payload,'base64')
      const result = JSON.parse(payload.toString())
      console.log(result)
    }

  }

}
</script>

callback으로 받은 credential 데이터가 jwt토큰 형식이라 파싱 하면 아래 형식대로 나옵니다
이제 백엔드와 협업하여 이 데이터를 서버에 저장하여 로그인 체크를 하면 됩니다.

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

 

 

현재 새로운 웹용 Google login은 기본 popup 방식으로 callback method에 토큰 데이터를 줍니다.
그런데 새로운 google login 방식으로  리디렉션 URl 사용하는 옵션으로 하여 진행하게 되면 URl끝점에 붙어있지 않습니다. 보통은 리디렉션 URI endpoint 끝점에 토큰이 붙어서 나오는데... 이 부분은  좀 더 찾아봐야 할거 같습니다..
서버사이드로 백엔드에서 구현할 때만 쓰는 건지.. 정확해지면 다시 수정하여 올리겠습니다.

(알고 계신 분은 댓글로 적어주시면 감사하겠습니다!)