Google JavaScript API로 로그인 참조

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

메서드: google.accounts.id.initialize

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
auto_select 자동 선택을 사용 설정합니다.
callback ID 토큰을 처리하는 자바스크립트 함수입니다. Google One을 탭하고 'Google 계정으로 로그인' 버튼 popup UX 모드에서 이 속성을 사용합니다.
login_uri 로그인 엔드포인트의 URL입니다. Google 계정으로 로그인 버튼 redirect UX 모드에서 이 속성을 사용합니다.
native_callback 비밀번호 사용자 인증 정보를 처리하는 자바스크립트 함수입니다.
cancel_on_tap_outside 사용자가 메시지 외부를 클릭하면 프롬프트를 취소합니다.
prompt_parent_id 원탭 프롬프트 컨테이너 요소의 DOM ID
nonce ID 토큰의 임의 문자열입니다.
context 원탭 프롬프트의 제목 및 단어
state_cookie_domain 상위 도메인과 하위 도메인에서 원탭을 호출해야 하는 경우 단일 공유 쿠키가 사용되도록 상위 도메인을 이 필드에 전달합니다.
ux_mode Google 계정으로 로그인 버튼 UX 절차
allowed_parent_origin 중간 iframe을 삽입할 수 있는 출처입니다. 이 필드가 표시되면 중간 iframe 모드에서 한 번 실행됩니다.
intermediate_iframe_close_callback 사용자가 수동으로 원탭을 닫을 때 기본 중간 iframe 동작을 재정의합니다.
itp_support ITP 브라우저에서 업그레이드된 원탭 UX를 사용 설정합니다.

client_id

이 필드는 애플리케이션의 개발자 ID로, Google Developers Console에서 찾아서 만듭니다. 자세한 내용은 다음 표를 참고하세요.

유형 필수
문자열 client_id: "CLIENT_ID.apps.googleusercontent.com"

자동 선택

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

유형 필수
불리언 선택사항 auto_select: true

callback

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

유형 필수
함수 원탭 및 popup UX 모드에 필수 callback: handleResponse

login_uri

이 속성은 로그인 엔드포인트의 URI입니다. 현재 페이지가 로그인 페이지인 경우 생략될 수 있습니다. 이 경우 사용자 인증 정보가 기본적으로 이 페이지에 게시됩니다.

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

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

유형 선택사항
URL 기본값은 현재 페이지의 URI 또는 지정한 값입니다.
ux_mode: "redirect"가 설정된 경우에만 사용됩니다.
login_uri="https://www.example.com/login"

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

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

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

credential=ID_TOKEN

네이티브 콜백

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

유형 필수
함수 선택사항 native_callback: handleResponse

취소_탭_외부

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

유형 필수
불리언 선택사항 cancel_on_tap_outside: false

메시지_상위_ID

이 속성은 컨테이너 요소의 DOM ID를 설정합니다. 이 옵션이 설정되지 않은 경우 창 오른쪽 상단에 원탭 프롬프트가 표시됩니다. 자세한 내용은 다음 표를 참고하세요.

유형 필수
문자열 선택사항 prompt_parent_id: 'parent_id'

nonce

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

유형 필수
문자열 선택사항 nonce: "biaqbm70g23"

nonce 길이는 사용자 환경에서 지원되는 최대 JWT 크기 및 개별 브라우저 및 서버 HTTP 크기 제한으로 제한됩니다.

context

이 필드를 사용하면 원탭 프롬프트에서 제목 및 메시지가 변경됩니다. 자세한 내용은 다음 표를 참고하세요.

유형 필수
문자열 선택사항 context: "use"

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

컨텍스트
signin &quot 계정으로 로그인"
signup "Google 계정으로 가입"
use "Google과 함께 사용"

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

유형 필수
문자열 선택사항 state_cookie_domain: "example.com"

UX_모드

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

유형 필수
문자열 선택사항 ux_mode: "redirect"

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

UX 모드
popup 팝업 창에서 로그인 UX 흐름을 실행합니다.
redirect 전체 페이지 리디렉션으로 로그인 UX 흐름을 진행합니다.

allowed_parent_origin

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

유형 필수
문자열 또는 문자열 배열 선택사항 allowed_parent_origin: "https://example.com"

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

값 유형
string 단일 도메인 URI입니다. "https://example.com"
string array 도메인 URI의 배열입니다. ["https://news.example.com", "https://local.example.com"]

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

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

allowed_parent_origin 필드 값이 유효하지 않으면 중간 iframe 모드의 원탭 초기화가 실패하고 중지됩니다.

중간_iframe_닫기_콜백

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

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

유형 필수
함수 선택사항 intermediate_iframe_close_callback: logBeforeClose

ITP

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

유형 필수
불리언 선택사항 itp_support: true

메서드: 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 공급업체가 있는 경우 이 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 데이터 유형의 메서드와 설명이 나와 있습니다.

방법
isDisplayMoment() 이 알림은 디스플레이에 대한 알림인가요?
isDisplayed() 이 알림이 표시 순간에만 있고 UI가 표시되나요?
isNotDisplayed() 이 알림은 표시 순간에만 표시되고 UI는 표시되지 않나요?
getNotDisplayedReason()

UI가 표시되지 않는 자세한 이유입니다. 가능한 값은 다음과 같습니다.

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
isSkippedMoment() 이 알림을 건너뛰었나요?
getSkippedReason()

건너뛴 순간의 자세한 이유입니다. 가능한 값은 다음과 같습니다.

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
isDismissedMoment() 닫은 순간을 위한 알림인가요?
getDismissedReason()

닫기의 구체적인 이유 가능한 값은 다음과 같습니다.

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

모멘트 유형의 문자열을 반환합니다. 가능한 값은 다음과 같습니다.

  • display
  • skipped
  • dismissed

데이터 유형: CredentialResponse

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

필드
credential 이 필드는 반환된 ID 토큰입니다.
select_by 이 필드는 사용자 인증 정보가 선택되는 방식을 설정합니다.

사용자 인증 정보

이 필드는 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 계정의 전역적으로 고유한 식별자가 포함됩니다.

email, email_verified, hd 필드를 사용하여 Google이 이메일 주소를 호스팅하고 신뢰하는지 확인할 수 있습니다. Google에서 권한을 가진 경우 사용자는 현재 적법한 계정 소유자로 알려져 있습니다.

Google의 공신력 있는 케이스:

  • email 접미사가 @gmail.com이며 Gmail 계정입니다.
  • email_verified가 true이고 hd가 설정되어 있다면 G Suite 계정입니다.

사용자는 Gmail 또는 G Suite를 사용하지 않고 Google 계정에 등록할 수 있습니다. email@gmail.com 접미사가 포함되어 있지 않고 hd가 없으면 Google은 신뢰할 수 있는 권한이 아니며 비밀번호나 다른 본인 확인 메서드가 있는 것이 좋습니다. Google 계정이 생성될 때 Google이 사용자를 처음 인증했으므로 email_verfied이 true일 수 있지만 서드 파티 이메일 계정의 소유권이 변경되었을 수 있습니다.

선택_기

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

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

  • 기존 세션을 찾았거나 사용자가 Google 계정을 선택하고 Google 계정에 로그인하여 새 세션을 설정했습니다.

  • 앱과 ID 토큰 사용자 인증 정보를 공유하기 전에 다음 중 하나를 수행합니다.

    • 확인 버튼을 눌러 사용자 인증 정보를 공유하는 데 동의하는 경우
    • 이전에 동의를 부여했으며 계정 선택을 사용하여 Google 계정을 선택했습니다.

이 필드의 값은 다음 유형 중 하나로 설정됩니다.

설명
auto 이전에 사용자 인증 정보를 공유하는 데 동의한 적이 있는 기존 세션을 통한 사용자 자동 로그인
user 이전에 동의한 세션이 있는 사용자가 사용자 인증 정보를 공유하기 위해 원탭 '계속' 버튼을 눌렀습니다.
user_1tap 기존 세션이 있는 사용자는 원탭 '계속' 버튼을 눌러 동의를 부여하고 사용자 인증 정보를 공유합니다. Chrome v75 이상에만 적용됩니다.
user_2tap 기존 세션이 없는 사용자가 한 번 탭하기를 계속하여 계정을 선택하고 팝업 창에서 확인 버튼을 눌러 동의를 부여하고 사용자 인증 정보를 공유했습니다. Chromium 기반이 아닌 브라우저에 적용됩니다.
btn 이전에 동의를 부여받은 기존 세션이 있는 사용자가 Google 계정으로 로그인 버튼을 누르고 사용자 인증 정보를 공유하기 위해 Google 계정 선택에서 Google 계정을 선택했습니다.
btn_confirm 기존 세션이 있는 사용자가 Google 계정으로 로그인 버튼을 누르고 확인 버튼을 눌러 동의를 부여하고 사용자 인증 정보를 공유했습니다.
btn_add_session 이전에 동의를 부여한 기존 세션이 없는 사용자가 Google 계정으로 로그인 버튼을 눌러 Google 계정을 선택하고 사용자 인증 정보를 공유합니다.
btn_confirm_add_session 기존 세션이 없는 사용자가 먼저 Google 계정으로 로그인 버튼을 눌러 Google 계정을 선택한 다음 확인 버튼을 눌러 동의 및 사용자 인증 정보 공유

메서드: google.accounts.id.renderButton

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

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

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

데이터 유형: GsiButtonConfiguration

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

속성
type 버튼 유형: 아이콘 또는 표준 버튼.
theme 버튼 테마입니다. 예: fill_blue 또는 fill_black
size 버튼 크기입니다. 예를 들어 S 또는 L 사이즈입니다.
text 버튼 텍스트입니다. 예를 들어 'Google 계정으로 로그인' 또는 'Google 계정으로 가입' 등이 있습니다.
shape 버튼 모양입니다. 예를 들어 직사각형이나 원형입니다.
logo_alignment Google 로고 정렬: 왼쪽 또는 가운데.
width 픽셀 단위의 버튼 너비입니다.
locale 설정되면 버튼 언어가 렌더링됩니다.

속성 유형

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

유형

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

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

유형 필수
문자열 type: "icon"

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

유형
standard 텍스트 또는 맞춤설정된 정보가 포함된 버튼:
icon 텍스트가 없는 아이콘 버튼:

테마

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

유형 필수
문자열 선택사항 theme: "filled_blue"

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

테마
outline 표준 버튼 테마:
filled_blue 파란색으로 채워진 버튼 테마:
filled_black 검은색으로 채워진 버튼 테마:

크기

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

유형 필수
문자열 선택사항 size: "small"

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

크기
large 큰 버튼:
대형 표준 버튼 큰 아이콘 버튼 커다란 맞춤설정 버튼
medium 중형 버튼:
중간 표준 버튼 중간 아이콘 버튼
small 작은 버튼:
작은 버튼 작은 아이콘 버튼

문자

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

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

유형 필수
문자열 선택사항 text: "signup_with"

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

텍스트
signin_with 버튼 텍스트는 'Google 계정으로 로그인'입니다.
signup_with 버튼 텍스트가 'Google 계정으로 가입'입니다.
continue_with 버튼 텍스트는 'Continue with Google'(Google로 계속하기)입니다.
signin 버튼 텍스트가 '로그인'입니다.

shape

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

유형 필수
문자열 선택사항 shape: "rectangular"

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

모양
rectangular 직사각형 버튼입니다. icon 버튼 유형에 사용되는 경우 square와 동일합니다.
pill 알약 모양의 버튼 icon 버튼 유형에 사용되는 경우 circle와 동일합니다.
circle 원 모양의 버튼입니다. standard 버튼 유형에 사용되는 경우 pill와 동일합니다.
square 정사각형 모양의 버튼입니다. standard 버튼 유형에 사용되는 경우 rectangular와 동일합니다.

로고_정렬

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

유형 필수
문자열 선택사항 logo_alignment: "center"

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

로고_정렬
left Google 로고를 왼쪽 정렬
center Google 로고를 가운데에 맞춥니다.

너비

픽셀 단위의 최소 버튼 너비입니다. 최대 너비는 400픽셀입니다.

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

유형 필수
문자열 선택사항 width: 400

locale

버튼 텍스트의 사전 설정된 언어입니다. 이 속성이 설정되지 않은 경우 브라우저의 기본 언어나 Google 세션 사용자의 환경설정이 사용됩니다. 따라서 사용자마다 다른 버전의 현지화된 버튼이 표시될 수 있으며 크기는 달라질 수 있습니다.

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

유형 필수
문자열 선택사항 locale: "zh_CN"

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

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

필드
id 사용자를 식별합니다.
password 비밀번호

메서드: 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 계정으로 로그인' 라이브러리가 로드되면 알림이 전송됩니다.

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 권한 부여를 취소합니다. 이 메서드의 다음 코드 스니펫을 참조하세요. google.accounts.id.revoke(hint, callback)

매개변수 유형 설명
hint 문자열 사용자 Google 계정의 이메일 주소 또는 고유 ID입니다. ID는 사용자 인증 정보 페이로드의 sub 속성입니다.
callback 함수 RevocationResponse 핸들러입니다(선택사항).

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

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

데이터 유형: RevocationResponse

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

필드
successful 이 필드는 메서드 호출의 반환 값입니다.
error 이 필드는 선택적으로 상세한 오류 응답 메시지를 포함합니다.

성공

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

오류

이 필드는 문자열 값이며, 취소 메서드 호출이 실패한 경우 성공 시 정의되지 않은 자세한 오류 메시지를 포함합니다.