느린 개발자

 

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

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

 

새로운 웹용 Google 로그인 문서

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

 

 

---

 

프로젝트 생성 (구글 클라우드 플랫폼)

Google 클라우드 플랫폼

 

• 클라우드 플랫폼에서 새 프로젝트를 생성합니다.

프로젝트 생성

OAuth 동의 화면

• 아래 이미지대로 해당 정보를 입력합니다. ( 테스트용이니 간략하게 적으셔도 됩니다.)

 

OAuth 클라이언트 ID 만들기

• 승인된 자바스크립트 원본에서는 프론트(React) URL을 적어 주시면 됩니다. http://localhost:3000
• 공식문서에 의하면 승인된 자바 스크립트 원본에 http://localhost:3000와 http://localhost를 추가하라는 설명이 있으므로 꼭 추가합니다.  <필수!!>
• 아래 과정을 완료하면 클라이언트 ID 가 생성됩니다.

 

 

react-oauth/google

GitHub - MomenSherif/react-oauth: Google OAuth2 using the new Google Identity Services SDK for React 🚀

 

 

 npm install @react-oauth/google@latest

 

 

GoogleLogin 구현

import {GoogleLogin} from "@react-oauth/google";
import {GoogleOAuthProvider} from "@react-oauth/google";

const GoogleLoginButton = () => {
    const clientId = 'clientID'
    return (
        <>
            <GoogleOAuthProvider clientId={clientId}>
                <GoogleLogin
                    onSuccess={(res) => {
                        console.log(res);
                    }}
                    onFailure={(err) => {
                        console.log(err);
                    }}
                />
            </GoogleOAuthProvider>
        </>
    );
};

export default GoogleLoginButton

 

• 로그인을 성공하면 아래와 같은 3개의 필드가 나옵니다.
• credential는 반환된 ID 토큰이며 base64로 인코딩 된 JSON 웹 토큰 문자열로 된 ID 토큰입니다.

 

• credential를 디코딩한다면 아래와 같은 항목이 표시됩니다.
• 이제 프론트에서 할 일은 다했습니다. credential 데이터를 백엔드 파트에서 활용하여 저장하면 됩니다.

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": "Elisa",
  "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"
}

 

---

구글 로그인 방식이 바뀌고 나서 리액트에서 구글 로그인하는 방법을 소개해 봤습니다. Nuxt와 다르게 npm 라이브러리 형태로 많이들 만들어놔서 구현하기 편한 거 같습니다. 제가 설명드린 방법은 아주 간단하게 연결한 방법이 기 때문에 개발하시다 커스텀이 필요하시면 react-oauth/google  문서를 보시면 됩니다. 여기에 One-tap 방식 로그인과 자동로그인 또는 로그인 버튼을 커스텀하여 사용하는 방법 또한 있으니, 참고하시면 될 거 같습니다. 그러면 읽어주셔서 감사하고 잘못된 사항이 있으면 댓글 부탁드립니다.