이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹용 Google 계정으로 로그인 버튼

1. 개요

이 Codelab에서는 사용자 로그인용 웹페이지를 빌드합니다. Google ID 서비스 JavaScript 라이브러리를 사용하여 Google 계정으로 로그인 버튼을 표시하고 맞춤설정합니다.

학습할 내용

웹페이지에 Google 계정으로 로그인 버튼을 추가하는 방법
OAuth 2.0 웹 애플리케이션을 설정하는 방법
ID 토큰을 디코딩하는 방법
Google 계정으로 로그인 버튼을 맞춤설정하는 방법

필요한 항목

텍스트 편집기 및 웹페이지 호스팅 장소, 이 Codelab에서 다룰 환경:
- 머신의 터미널에서 로컬로 실행
- Glitch와 같은 플랫폼을 사용합니다.
가장 익숙한 환경을 선택합니다.
Google Cloud 프로젝트 기존 프로젝트를 사용하거나 새 프로젝트를 만들 수 있습니다. Google Cloud Platform 계정 및 프로젝트는 무료입니다.
HTML, CSS, JavaScript, Chrome DevTools (또는 이에 상응하는 도구)에 대한 기본 지식

그럼 시작해 보겠습니다

2. 로그인 페이지 만들기

이 코드 샘플을 index.html 파일에 추가합니다. 좋아하는 텍스트 편집기를 사용하여 머신에서 또는 Glitch와 같은 플랫폼에서 이 작업을 수행할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

이 코드는 HTML과 JavaScript가 혼합되어 있으며 다음과 같은 여러 작업을 실행합니다.

g_id_onload를 사용하여 Google ID 서비스 라이브러리를 구성합니다.
g_id_signin을 사용하여 Google 계정으로 로그인 버튼을 표시합니다.
Google에서 사용자 로그인 사용자 인증 정보를 수신하는 handleCredentialResponse라는 JavaScript 콜백 함수 핸들러를 추가합니다.
JSON 웹 토큰 (JWT) 사용자 인증 정보를 일반 JSON으로 변환하는 decodeJWT 함수

data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"에 문제가 있는 것 같습니다.

지금은 무시하세요. 잠시 후에 다시 살펴보겠습니다.

3. 웹페이지 제공

브라우저에 index.html를 제공하는 두 가지 환경을 살펴보겠습니다.

머신에서 로컬로 웹 서버를 실행하는 경우
Glitch와 같은 원격 플랫폼

가장 편한 방법을 선택하세요. 설정 후에는 URL을 사용하여 OAuth 웹 클라이언트를 구성합니다.

머신에서 로컬로

시스템에 Python3가 설치되어 있는지 확인합니다. 설정은 OS 및 플랫폼에 따라 다릅니다. 머신에 Python을 설치해야 하는 경우 Python 설정 및 사용부터 시작하세요.

index.html이 포함된 디렉터리에서 Python 웹 서버를 시작합니다.

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

이제 웹 서버가 포트 8000에서 연결을 수신 대기하고 로그인 페이지를 제공할 준비가 되었습니다. URL은

http://localhost:8000

웹 개발 플랫폼

Glitch (또는 이와 유사한 도구)를 사용하여 로그인 페이지를 수정하고 호스팅하도록 선택한 경우 미리보기 창이나 새 브라우저 탭에서 index.html를 열 수 있습니다.

일반적으로 사용할 URL은 glich.com 프로젝트를 설정할 때 입력한 프로젝트 이름입니다. 예를 들어 Glitch 프로젝트 이름이 gis-example이면 URL은 https://gis-example.glitch.me입니다. 물론 다른 프로젝트 이름을 선택했으므로 이 이름을 재사용할 수는 없습니다. URL은

https://<var>your-project-name</var>.glitch.me

페이지 로드

잠시만요.

먼저 OAuth 2.0 웹 클라이언트를 만들고 구성해야 합니다.

URL을 복사하거나 기록해 둡니다. 다음 단계에서 사용됩니다.

4. OAuth 웹 클라이언트 설정

사용자가 실제로 로그인할 수 있도록 OAuth를 구성해 보겠습니다.

이 링크를 클릭하여 OAuth 2.0 웹 클라이언트를 만드세요. 필요한 경우 마법사가 새 Google Cloud 프로젝트를 만들고 설정하는 데 도움을 줍니다.
애플리케이션 유형 드롭다운에서 웹 애플리케이션을 선택합니다.
승인된 JavaScript 원본에서 URI 추가 버튼을 누릅니다.
3단계 웹페이지 제공에서 index.html를 호스팅하는 URL을 입력합니다.
로컬 머신에서 호스팅

원격 플랫폼에서 호스팅됨
만들기를 누릅니다.
새 클라이언트 ID를 복사합니다.

마지막으로

새 클라이언트 ID를 사용하도록 index.html를 업데이트해야 합니다. 편집기에서 PUT_YOUR_WEB_CLIENT_ID_HERE을 새 클라이언트 ID로 바꿉니다. 클라이언트 ID는 1234567890-abc123def456.apps.googleusercontent.com와 같습니다.

로그인해 보겠습니다.

5. 로그인

먼저 브라우저의 개발자 콘솔을 엽니다. 오류와 Google에서 반환된 JWT ID 토큰 사용자 인증 정보가 여기에 기록됩니다.

Google 계정으로 로그인 버튼을 누릅니다.

다음 단계는 약간 다를 수 있습니다.

현재 두 개 이상의 Google 계정에 로그인한 경우 이 웹 앱에 로그인할 때 사용할 계정을 선택하라는 메시지가 표시됩니다.
이 웹 앱에 처음 로그인하는 경우 동의 메시지가 표시됩니다.

선택적으로 계정을 선택하고 동의하면 Google에서 JWT로 응답합니다. 브라우저에서 실행되는 handleCredentialResponse 콜백 함수가 JWT를 수신합니다.

이 Codelab에서는 JWT 콘텐츠를 디코딩하여 출력합니다. 프로덕션 웹 앱에서는 디코딩된 JWT를 확인하고 사용하여 백엔드 플랫폼에서 새 계정을 만들거나 사용자의 새 세션을 설정하는 등 더 의미 있는 작업을 실행합니다.

6. JWT ID 토큰 검사

인코딩된 JWT가 개발자 콘솔에 로깅됩니다. JWT를 디코딩한 후 일반적으로 사용되는 ID 토큰 필드도 콘솔에 로깅됩니다.

jwt.io와 같은 온라인 도구를 사용하여 JWT를 디코딩할 수 있습니다.

또는 터미널에서 jq를 사용하여 JWT를 디코딩하고 볼 수도 있습니다 (패키지 관리자를 사용하여 jq를 설치해야 할 수 있음). 먼저 인코딩된 JWT 문자열을 큰따옴표 안에 붙여넣습니다.

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

그런 다음 이 명령어를 사용하여 디코딩합니다.

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

이메일, 이름, 사진과 같은 키와 값은 이해하기 쉬울 것입니다. 다른 값은 JWT를 사용하기 전에 JWT를 확인하는 데 사용됩니다. ID 토큰에서 사용자 정보 가져오기에서 모든 필드의 의미를 자세히 알아보세요.

7. 버튼 맞춤설정

페이지에 기본 로그인 버튼을 배치하는 방법은 다음과 같습니다.

    <div class="g_id_signin"></div>

이 버튼이 표시됩니다.

하지만 사이트 테마에 맞게 색상, 크기 또는 텍스트를 변경하고 싶을 수도 있습니다.

버튼 색상을 파란색으로 변경하고 Google 계정으로 가입이라고 표시해 보겠습니다.

index.html를 열고 g_id_signin 요소를 찾아 data-theme="filled_blue" 및 data-text="signup_with" 속성을 추가합니다.

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

페이지를 저장하고 새로고침하면 새 텍스트가 포함된 파란색 버튼이 표시됩니다.

버튼을 추가로 맞춤설정할 수 있습니다. 옵션의 전체 목록은 시각적 데이터 속성을 참고하고 HTML 코드 생성기를 사용해 보세요.

8. 추가 리소스

축하합니다.

웹페이지에 Google로 로그인 버튼을 추가하고, OAuth 2.0 웹 클라이언트를 구성하고, JWT ID 토큰을 디코딩하고, 버튼의 모양을 맞춤설정하는 방법을 알아봤습니다.

다음 링크가 다음 단계를 진행하는 데 도움이 될 수 있습니다.

Google ID 서비스 HTML API
Google ID 서비스 JavaScript API
웹용 Google 계정으로 로그인 설정 방법
Google ID 토큰 확인
Google Cloud 프로젝트에 대해 자세히 알아보세요.
Google ID 인증 방법

자주 묻는 질문(FAQ)

StackOverflow