Google JavaScript API 참조로 로그인

이 참조 페이지에서는 Sign-In JavaScript API를 설명합니다. 이 API를 사용하여 웹페이지에 원탭 메시지 또는 Google 계정으로 로그인 버튼을 표시할 수 있습니다.

메서드: google.accounts.id.initial

google.accounts.id.initialize 메서드는 구성 객체를 기반으로 Google 계정으로 로그인 클라이언트를 초기화합니다. 다음 메서드 코드 예를 참고하세요.

google.accounts.id.initialize(IdConfiguration)

다음 코드 예에서는 onload 함수로 google.accounts.id.initialize 메서드를 구현합니다.

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

google.accounts.id.initialize 메서드는 동일한 웹페이지의 모든 모듈에서 암시적으로 사용할 수 있는 Google 계정으로 로그인 클라이언트 인스턴스를 만듭니다.

• 동일한 웹페이지에서 여러 모듈 (예: 원탭, 맞춤설정 버튼, 취소 등)을 사용하는 경우에도 google.accounts.id.initialize 메서드를 한 번만 호출하면 됩니다.
• google.accounts.id.initialize 메서드를 여러 번 호출하면 마지막 호출의 구성만 기억되고 사용됩니다.

google.accounts.id.initialize 메서드를 호출할 때마다 실제로 구성이 재설정되며 동일한 웹페이지의 후속 메서드 모두 즉시 새 구성을 사용합니다.

데이터 유형: IdConfiguration

다음 표에는 IdConfiguration 데이터 유형의 필드와 설명이 나와 있습니다.

client_id

이 필드는 애플리케이션의 클라이언트 ID로, Google Cloud 콘솔에서 찾고 만들 수 있습니다. 자세한 내용은 다음 표를 참고하세요.

auto_select

이 필드는 이전에 앱을 승인한 Google 세션이 하나만 있을 때 사용자 상호작용 없이 ID 토큰이 자동으로 반환되는지를 결정합니다. 기본값은 false입니다. 자세한 내용은 다음 표를 참고하세요.

콜백

이 필드는 원탭 메시지 또는 팝업 창에서 반환된 ID 토큰을 처리하는 JavaScript 함수입니다. 이 속성은 Google 원탭 또는 Google 계정으로 로그인 버튼 popup UX 모드를 사용하는 경우에 필요합니다. 자세한 내용은 다음 표를 참고하세요.

login_uri

이 속성은 로그인 엔드포인트의 URI입니다.

이 값은 Google Cloud 콘솔에서 구성한 OAuth 2.0 클라이언트에 승인된 리디렉션 URI 중 하나와 정확히 일치해야 하며 리디렉션 URI 유효성 검사 규칙을 준수해야 합니다.

현재 페이지가 로그인 페이지인 경우 이 속성을 생략할 수 있으며, 이 경우 사용자 인증 정보가 기본적으로 이 페이지에 게시됩니다.

ID 토큰 사용자 인증 정보 응답은 사용자가 'Google 계정으로 로그인' 버튼을 클릭하고 리디렉션 UX 모드가 사용될 때 로그인 엔드포인트에 게시됩니다.

자세한 내용은 다음 표를 참고하세요.

로그인 엔드포인트는 본문에 ID 토큰 값이 있는 credential 키가 포함된 POST 요청을 처리해야 합니다.

다음은 로그인 엔드포인트에 대한 요청의 예입니다.

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

native_callback

이 필드는 브라우저의 기본 사용자 인증 정보 관리자에서 반환된 비밀번호 사용자 인증 정보를 처리하는 JavaScript 함수의 이름입니다. 자세한 내용은 다음 표를 참고하세요.

cancel_on_tap_outside

이 필드는 사용자가 메시지 외부를 클릭할 경우 원탭 요청을 취소할지 여부를 설정합니다. 기본값은 true입니다. 값을 false로 설정하면 사용 중지할 수 있습니다. 자세한 내용은 다음 표를 참고하세요.

prompt_parent_id

이 속성은 컨테이너 요소의 DOM ID를 설정합니다. 설정되어 있지 않으면 창 오른쪽 상단에 원탭 메시지가 표시됩니다. 자세한 내용은 다음 표를 참고하세요.

nonce

이 필드는 ID 토큰에서 재전송 공격을 방지하기 위해 사용하는 무작위 문자열입니다. 자세한 내용은 다음 표를 참고하세요.

nonce 길이는 환경에서 지원하는 최대 JWT 크기, 개별 브라우저 및 서버 HTTP 크기 제약 조건으로 제한됩니다.

맥락

이 필드는 원탭 메시지의 제목과 메시지 텍스트를 변경합니다. 자세한 내용은 다음 표를 참고하세요.

다음 표에는 사용 가능한 모든 컨텍스트와 설명이 나와 있습니다.

state_cookie_domain

상위 도메인과 하위 도메인에 원탭을 표시해야 하는 경우 단일 공유 상태 쿠키가 사용되도록 상위 도메인을 이 필드에 전달합니다. 자세한 내용은 다음 표를 참고하세요.

ux_mode

이 필드를 사용하여 Google 계정으로 로그인 버튼에서 사용하는 UX 흐름을 설정합니다. 기본값은 popup입니다. 이 속성은 원탭 UX에 영향을 미치지 않습니다. 자세한 내용은 다음 표를 참고하세요.

다음 표에는 사용 가능한 UX 모드와 설명이 나와 있습니다.

allowed_parent_origin

중간 iframe을 삽입할 수 있는 출처입니다. 이 필드가 있으면 원탭이 중간 iframe 모드에서 실행됩니다. 자세한 내용은 다음 표를 참고하세요.

다음 표에는 지원되는 값 유형과 설명이 나와 있습니다.

와일드 카드 접두사도 지원됩니다. 예를 들어 "https://*.example.com"는 모든 수준에서 example.com 및 하위 도메인 (예: news.example.com, login.news.example.com)과 일치합니다.와일드 카드를 사용할 때 유의해야 할 사항은 다음과 같습니다.

• 패턴 문자열은 와일드 카드와 최상위 도메인으로만 구성될 수 없습니다. 예를 들어 https://.com 및 https://.co.uk 는 유효하지 않습니다. 위에서 언급했듯이 "https://.example.com"는 example.com 및 하위 도메인과 일치합니다. 배열을 사용하여 서로 다른 2개의 도메인을 나타낼 수도 있습니다. 예를 들어 ["https://example1.com", "https://.example2.com"]은 example1.com, example2.com 도메인 및 example2.com의 하위 도메인과 일치합니다.
• 와일드 카드 도메인은 보안 https:// 스키마로 시작해야 하므로 "*.example.com"은 유효하지 않은 것으로 간주됩니다.

allowed_parent_origin 필드의 값이 잘못되면 중간 iframe 모드의 원탭 초기화가 실패하고 중지됩니다.

intermediate_iframe_close_callback

사용자가 원탭 UI에서 'X' 버튼을 탭하여 원탭을 수동으로 닫을 때 기본 중간 iframe 동작을 재정의합니다. 기본 동작은 중간 iframe을 DOM에서 즉시 삭제하는 것입니다.

intermediate_iframe_close_callback 필드는 중간 iframe 모드에서만 적용됩니다. 또한 원탭 iframe이 아닌 중간 iframe에만 영향을 미칩니다. 콜백이 호출되기 전에 원탭 UI가 삭제됩니다.

itp_support

이 필드는 Intelligent Tracking Prevention(ITP)을 지원하는 브라우저에서 업그레이드된 원탭 UX를 사용 설정해야 하는지 결정합니다. 기본값은 false입니다. 자세한 내용은 다음 표를 참고하세요.

login_hint

애플리케이션에서 로그인해야 하는 사용자를 미리 알고 있다면 Google에 로그인 힌트를 제공할 수 있습니다. 성공하면 계정 선택을 건너뜁니다. 허용되는 값은 이메일 주소 또는 ID 토큰 sub 필드 값입니다.

자세한 내용은 OpenID Connect 문서의 login_hint 필드를 참고하세요.

HD

사용자가 여러 계정을 가지고 있고 Workspace 계정으로만 로그인해야 하는 경우 이를 사용하여 Google에 도메인 이름 힌트를 제공합니다. 성공하면 계정 선택 중에 표시되는 사용자 계정이 제공된 도메인으로 제한됩니다. 와일드 카드 값: *은 사용자에게 Workspace 계정만 제공하며 계정 선택 중에 일반 계정 (user@gmail.com)을 제외합니다.

자세한 내용은 OpenID Connect 문서의 hd 필드를 참고하세요.

use_fedcm_for_prompt

브라우저에서 사용자 로그인 메시지를 제어하고 웹사이트와 Google 간의 로그인 과정을 조정하도록 허용합니다. 기본값은 false입니다. 자세한 내용은 FedCM으로 이전 페이지를 참고하세요.

enable_redirect_uri_validation

리디렉션 URI 유효성 검사 규칙을 준수하는 버튼 리디렉션 흐름을 사용 설정합니다.

메서드: google.accounts.id.prompt

google.accounts.id.prompt 메서드는 initialize() 메서드가 호출된 후 원탭 메시지 또는 브라우저 네이티브 사용자 인증 정보 관리자를 표시합니다. 다음 메서드 코드 예를 참고하세요.

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

일반적으로 prompt() 메서드는 페이지 로드 시 호출됩니다. Google 측의 세션 상태 및 사용자 설정으로 인해 원탭 메시지 UI가 표시되지 않을 수 있습니다. 다양한 시점의 UI 상태에 관한 알림을 받으려면 UI 상태 알림을 수신하는 함수를 전달합니다.

알림은 다음 시점에 실행됩니다.

• 표시 순간: prompt() 메서드가 호출된 후에 발생합니다. 알림에는 UI가 표시되는지 여부를 나타내는 불리언 값이 포함됩니다.

• 건너뛴 순간: 자동 취소 또는 수동 취소로 인해 원탭 프롬프트가 닫히거나 Google에서 사용자 인증 정보를 발급하지 못한 경우(예: 선택한 세션이 Google에서 로그아웃됨)가 발생합니다.

  이 경우 다음 ID 제공업체(있는 경우)로 계속 진행하는 것이 좋습니다.

• 닫힘 순간: Google에서 사용자 인증 정보를 가져오거나 사용자가 사용자 인증 정보 가져오기 흐름을 중지하려고 할 때 발생합니다. 예를 들어 사용자가 로그인 대화상자에 사용자 이름과 비밀번호를 입력하기 시작하면 google.accounts.id.cancel() 메서드를 호출하여 원탭 메시지를 닫고 닫힌 순간을 트리거할 수 있습니다.

다음 코드 예는 건너뛴 순간을 구현합니다.

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

데이터 유형: PromptMomentNotification

다음 표에는 PromptMomentNotification 데이터 유형의 메서드와 설명이 나와 있습니다.

데이터 유형: CredentialResponse

callback 함수가 호출되면 CredentialResponse 객체가 매개변수로 전달됩니다. 다음 표에는 사용자 인증 정보 응답 객체에 포함된 필드가 나와 있습니다.

사용자 인증정보

이 필드는 base64로 인코딩된 JSON 웹 토큰 (JWT) 문자열로 ID 토큰입니다.

디코딩된 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": "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"
}

sub 필드는 Google 계정의 전역 고유 식별자입니다. sub 필드는 모든 Google 계정에서 고유하고 재사용되지 않으므로 사용자 식별자로 만 사용합니다. Google 계정은 서로 다른 시점에 여러 이메일 주소를 가질 수 있으므로 이메일 주소를 식별자로 사용하지 마세요.

email, email_verified, hd 필드를 사용하면 Google에서 이메일 주소를 호스팅하고 이메일 주소에 대한 권한이 있는지 확인할 수 있습니다. Google이 신뢰할 수 있는 경우 사용자가 합법적인 계정 소유자임이 확인됩니다.

Google이 신뢰할 수 있는 케이스:

• email에 @gmail.com 접미사가 있으면 Gmail 계정입니다.
• email_verified가 true이고 hd가 설정된 경우 Google Workspace 계정입니다.

사용자는 Gmail 또는 Google Workspace를 사용하지 않고도 Google 계정에 등록할 수 있습니다. email에 @gmail.com 접미사가 포함되어 있지 않고 hd가 없으면 Google은 신뢰할 수 없으며 사용자를 인증하려면 비밀번호 또는 기타 챌린지 방법을 사용하는 것이 좋습니다. email_verfied는 Google 계정이 생성될 때 Google에서 사용자를 처음 인증했기 때문에 true일 수도 있지만, 그 이후 서드 파티 이메일 계정의 소유권이 변경되었을 수 있습니다.

exp 필드는 서버 측에서 토큰을 확인할 수 있는 만료 시간을 나타냅니다. Google 계정으로 로그인에서 가져온 ID 토큰의 경우 1시간입니다. 만료 시간 전에 토큰을 확인해야 합니다. 세션 관리에는 exp를 사용하지 마세요. 만료된 ID 토큰은 사용자가 로그아웃되었음을 의미하지 않습니다. 앱은 사용자의 세션 관리를 담당합니다.

select_by

다음 표에는 select_by 필드의 가능한 값이 나와 있습니다. 세션 및 동의 상태와 함께 사용되는 버튼 유형은 값을 설정하는 데 사용됩니다.

• 사용자가 원탭 또는 Google 계정으로 로그인 버튼을 누르거나 터치 없는 자동 로그인 프로세스를 사용했습니다.

• 기존 세션이 발견되었거나 사용자가 Google 계정을 선택하고 로그인하여 새 세션을 설정했습니다.

• ID 토큰 사용자 인증 정보를 앱과 공유하기 전에

  • 확인 버튼을 눌러 사용자 인증 정보 공유에 동의했습니다.
  • 이전에 동의한 후 '계정 선택'을 사용하여 Google 계정을 선택했습니다.

이 필드의 값은

주

이 필드는 사용자가 Google 계정으로 로그인 버튼을 클릭하여 로그인하고 클릭한 버튼의 state 속성이 지정된 경우에만 정의됩니다. 이 필드의 값은 버튼의 state 속성에 지정한 값과 동일합니다.

동일한 페이지에 여러 개의 Google 계정으로 로그인 버튼을 렌더링할 수 있으므로 각 버튼에 고유한 문자열을 할당할 수 있습니다. 따라서 이 state 필드를 사용하여 사용자가 로그인하기 위해 클릭한 버튼을 식별할 수 있습니다.

메서드: google.accounts.id.renderButton

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

다음 메서드 코드 예를 참고하세요.

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

데이터 유형: GsiButtonConfiguration

다음 표에는 GsiButtonConfiguration 데이터 유형의 필드와 설명이 나와 있습니다.

속성 유형

다음 섹션에는 각 속성 유형에 관한 세부정보와 예시가 포함되어 있습니다.

유형

버튼 유형입니다. 기본값은 standard입니다.

자세한 내용은 다음 표를 참고하세요.

다음 표에는 사용 가능한 버튼 유형과 설명이 나와 있습니다.

유형
standard
icon

테마

버튼 테마입니다. 기본값은 outline입니다. 자세한 내용은 다음 표를 참고하세요.

다음 표에는 사용 가능한 테마와 설명이 나와 있습니다.

테마
outline
filled_blue
filled_black

크기

버튼 크기입니다. 기본값은 large입니다. 자세한 내용은 다음 표를 참고하세요.

다음 표에는 사용 가능한 버튼 크기와 설명이 나와 있습니다.

크기
large
medium
small

텍스트

버튼 텍스트입니다. 기본값은 signin_with입니다. text 속성이 다른 아이콘 버튼의 텍스트에는 시각적 차이가 없습니다. 유일한 예외는 화면 접근성을 위해 텍스트를 읽는 경우입니다.

자세한 내용은 다음 표를 참고하세요.

다음 표에는 사용 가능한 모든 버튼 텍스트와 설명이 나와 있습니다.

텍스트
signin_with
signup_with
continue_with
signin

shape

버튼 모양입니다. 기본값은 rectangular입니다. 자세한 내용은 다음 표를 참고하세요.

다음 표에는 사용 가능한 버튼 모양과 설명이 나와 있습니다.

도형
rectangular
pill
circle
square

logo_alignment

Google 로고의 정렬입니다. 기본값은 left입니다. 이 속성은 standard 버튼 유형에만 적용됩니다. 자세한 내용은 다음 표를 참고하세요.

다음 표에는 사용 가능한 정렬과 그에 대한 설명이 나와 있습니다.

logo_alignment
left
center

너비

최소 버튼 너비(픽셀)입니다. 최대 너비는 400픽셀입니다.

자세한 내용은 다음 표를 참고하세요.

locale

선택사항입니다. 지정된 언어를 사용하여 버튼 텍스트를 표시합니다. 그렇지 않으면 사용자의 Google 계정 또는 브라우저 설정이 기본값으로 설정됩니다. 라이브러리를 로드할 때 src 디렉터리에 hl 매개변수와 언어 코드를 추가합니다(예: gsi/client?hl=<iso-639-code>).

설정하지 않으면 브라우저의 기본 언어 또는 Google 세션 사용자의 환경설정이 사용됩니다. 따라서 사용자마다 현지화된 버튼의 여러 버전과 크기가 다를 수 있습니다.

자세한 내용은 다음 표를 참고하세요.

click_listener

click_listener 속성을 사용하여 Google 계정으로 로그인 버튼을 클릭할 때 호출할 JavaScript 함수를 정의할 수 있습니다.

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

이 예에서는 Google 계정으로 로그인 버튼을 클릭하면 Google 계정으로 로그인 버튼 클릭됨 메시지가 콘솔에 로깅됩니다.

주

선택사항. 여러 개의 Google 계정으로 로그인 버튼을 같은 페이지에 렌더링할 수 있으므로 각 버튼에 고유한 문자열을 할당할 수 있습니다. 동일한 문자열이 ID 토큰과 함께 반환되므로 사용자가 로그인하기 위해 클릭한 버튼을 식별할 수 있습니다.

자세한 내용은 다음 표를 참고하세요.

데이터 유형: 사용자 인증 정보

native_callback 함수가 호출되면 Credential 객체가 매개변수로 전달됩니다. 다음 표에는 객체에 포함된 필드가 나열되어 있습니다.

메서드: google.accounts.id.disableAutoSelect

사용자가 웹사이트에서 로그아웃하면 개발자는 google.accounts.id.disableAutoSelect 메서드를 호출하여 쿠키에 상태를 기록해야 합니다. 이렇게 하면 UX 데드 루프가 방지됩니다. 다음 메서드 코드 스니펫을 참고하세요.

google.accounts.id.disableAutoSelect()

다음 코드 예에서는 onSignout() 함수를 사용하여 google.accounts.id.disableAutoSelect 메서드를 구현합니다.

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

메서드: google.accounts.id.storeCredential

이 메서드는 브라우저의 네이티브 사용자 인증 정보 관리자 API의 store() 메서드에 관한 래퍼입니다. 따라서 비밀번호 사용자 인증 정보를 저장하는 데만 사용할 수 있습니다. 다음 메서드 코드 예를 참고하세요.

google.accounts.id.storeCredential(Credential, callback)

다음 코드 예에서는 onSignIn() 함수를 사용하여 google.accounts.id.storeCredential 메서드를 구현합니다.

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

메서드: google.accounts.id.cancel

신뢰 당사자 DOM에서 메시지를 삭제하면 원탭 흐름을 취소할 수 있습니다. 사용자 인증 정보가 이미 선택된 경우 취소 작업은 무시됩니다. 다음 메서드 코드 예를 참고하세요.

google.accounts.id.cancel()

다음 코드 예에서는 onNextButtonClicked() 함수로 google.accounts.id.cancel() 메서드를 구현합니다.

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

라이브러리 로드 콜백: onGoogleLibraryLoad

onGoogleLibraryLoad 콜백을 등록할 수 있습니다. Google 계정으로 로그인 JavaScript 라이브러리가 로드된 후에 알림이 전송됩니다.

window.onGoogleLibraryLoad = () => {
    ...
};

이 콜백은 window.onload 콜백의 바로가기입니다. 동작에는 차이가 없습니다.

다음 코드 예에서는 onGoogleLibraryLoad 콜백을 구현합니다.

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

메서드: google.accounts.id.revoke

google.accounts.id.revoke 메서드는 지정된 사용자의 ID 토큰을 공유하는 데 사용된 OAuth 부여를 취소합니다. 다음 메서드 코드 스니펫을 참고하세요. javascript google.accounts.id.revoke(login_hint, callback)

다음 코드 샘플은 ID와 함께 revoke 메서드를 사용하는 방법을 보여줍니다.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

데이터 유형: RevocationResponse

callback 함수가 호출되면 RevocationResponse 객체가 매개변수로 전달됩니다. 다음 표에는 취소 응답 객체에 포함된 필드가 나와 있습니다.

성공

이 필드는 취소 메서드 호출이 성공한 경우 true로, 실패한 경우 false로 설정된 불리언 값입니다.

오류

이 필드는 문자열 값이며 취소 메서드 호출에 실패한 경우 자세한 오류 메시지가 포함되고 성공하면 정의되지 않습니다.