이 참조 페이지에서는 Google 계정으로 로그인 HTML 데이터 속성 API를 설명합니다. API를 사용하여 웹페이지에 원탭 메시지 또는 Google 계정으로 로그인 버튼을 표시할 수 있습니다.
ID가 'g_id_onload'인 요소
<div> 및 <span>와 같이 보이거나 보이지 않는 요소에 Google 계정으로 로그인 데이터 속성을 넣을 수 있습니다. 유일한 요구사항은 요소 ID를 g_id_onload로 설정하는 것입니다. 이 ID를 여러 요소에 추가하지 마세요.
데이터 속성
다음 표에는 데이터 속성과 그에 대한 설명이 나와 있습니다.
| 속성 | |
|---|---|
data-client_id |
애플리케이션의 클라이언트 ID |
data-auto_prompt |
Google One 탭을 표시합니다. |
data-auto_select |
Google 원탭에서 자동 선택을 사용 설정합니다. |
data-login_uri |
로그인 엔드포인트의 URL |
data-callback |
자바스크립트 ID 토큰 핸들러 함수 이름 |
data-native_login_uri |
비밀번호 사용자 인증 정보 핸들러 엔드포인트의 URL |
data-native_callback |
자바스크립트 비밀번호 사용자 인증 정보 핸들러 함수 이름 |
data-native_id_param |
credential.id 값의 매개변수 이름 |
data-native_password_param |
credential.password 값의 매개변수 이름 |
data-cancel_on_tap_outside |
사용자가 메시지 외부를 클릭하는 경우 메시지를 취소할지 여부를 제어합니다. |
data-prompt_parent_id |
원탭 프롬프트 컨테이너 요소의 DOM ID |
data-skip_prompt_cookie |
지정된 쿠키에 비어 있지 않은 값이 있으면 원탭을 건너뜁니다. |
data-nonce |
ID 토큰용 임의 문자열 |
data-context |
원탭 프롬프트의 제목 및 단어 |
data-moment_callback |
메시지 UI 상태 알림 리스너의 함수 이름 |
data-state_cookie_domain |
상위 도메인과 하위 도메인에서 원탭을 호출해야 한다면 단일 공유 쿠키가 사용되도록 상위 도메인을 이 속성에 전달합니다. |
data-ux_mode |
Google 계정으로 로그인 버튼 UX 흐름 |
data-allowed_parent_origin |
중간 iframe을 삽입할 수 있는 출처입니다. 이 속성이 있으면 원탭은 중간 iframe 모드에서 실행됩니다. |
data-intermediate_iframe_close_callback |
사용자가 원탭을 수동으로 닫을 때 기본 중간 iframe 동작을 재정의합니다. |
data-itp_support |
ITP 브라우저에서 업그레이드된 원탭 UX를 사용 설정합니다. |
data-login_hint |
사용자 힌트를 제공하여 계정 선택을 건너뜁니다. |
data-hd |
도메인별로 계정 선택을 제한합니다. |
data-use_fedcm_for_prompt |
브라우저에서 사용자 로그인 메시지를 제어하고 웹사이트와 Google 간의 로그인 흐름을 조정하도록 허용합니다. |
속성 유형
다음 섹션에는 각 속성의 유형과 예시에 대한 세부정보가 포함되어 있습니다.
데이터-클라이언트_ID
이 속성은 앱의 클라이언트 ID로, Google Cloud 콘솔에서 확인하고 만들 수 있습니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 예 | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
data-auto_prompt
이 속성은 원탭의 표시 여부를 결정합니다. 기본값은 true입니다. 이 값이 false인 경우 Google One 탭이 표시되지 않습니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| boolean | 선택사항 | data-auto_prompt="true" |
데이터-자동_선택
이 속성은 하나의 Google 세션만 앱을 승인한 경우 사용자 상호작용 없이 ID 토큰을 자동으로 반환할지 여부를 결정합니다. 기본값은 false입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| boolean | 선택사항 | data-auto_select="true" |
data-login_uri
이 속성은 로그인 엔드포인트의 URI입니다.
이 값은 API 콘솔에서 구성한 OAuth 2.0 클라이언트의 승인된 리디렉션 URI 중 하나와 정확히 일치해야 하며 Google의 리디렉션 URI 유효성 검사 규칙을 준수해야 합니다.
현재 페이지가 로그인 페이지인 경우 이 속성을 생략할 수 있습니다. 이 경우 사용자 인증 정보가 기본적으로 이 페이지에 게시됩니다.
ID 토큰 사용자 인증 정보 응답은 콜백 함수가 정의되지 않은 상태에서 사용자가 Google 계정으로 로그인 또는 원탭 버튼을 클릭하거나 자동 서명이 실행될 때 로그인 엔드포인트에 게시됩니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 선택사항 | 예 |
|---|---|---|
| URL | 기본값은 현재 페이지의 URI 또는 지정한 값입니다.data-ux_mode="popup" 및 data-callback가 설정되면 무시됩니다. |
data-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
data-callback
이 속성은 반환된 ID 토큰을 처리하는 자바스크립트 함수의 이름입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | data-login_uri가 설정되지 않은 경우 필수입니다. |
data-callback="handleToken" |
data-login_uri 및 data-callback 속성 중 하나가 사용될 수 있습니다. 다음 구성요소 및 UX 모드 구성에 따라 다릅니다.
data-login_uri속성은 Google 계정으로 로그인 버튼redirectUX 모드에 필요하며data-callback속성을 무시합니다.이 두 가지 속성 중 하나는 Google One Tap 및 Google 로그인 버튼
popupUX 모드에 설정해야 합니다. 둘 다 설정되면data-callback속성의 우선순위가 높습니다.
네임스페이스 내의 자바스크립트 함수는 HTML API에서 지원되지 않습니다.
대신 네임스페이스 없이 전역 자바스크립트 함수를 사용하세요. 예를 들어 mylib.callback 대신 mylibCallback를 사용합니다.
data-native_login_uri
이 속성은 비밀번호 사용자 인증 정보 핸들러 엔드포인트의 URL입니다. data-native_login_uri 속성 또는 data-native_callback 속성을 설정하면 Google 세션이 없으면 JavaScript 라이브러리가 기본 인증 관리자로 대체됩니다. data-native_callback 속성과 data-native_login_uri 속성을 모두 설정할 수는 없습니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-login_uri="https://www.example.com/password_login" |
데이터 네이티브 콜백
이 속성은 브라우저의 기본 인증 정보 관리자에서 반환된 비밀번호 사용자 인증 정보를 처리하는 자바스크립트 함수의 이름입니다. data-native_login_uri 속성 또는 data-native_callback 속성을 설정하면 Google 세션이 없으면 JavaScript 라이브러리가 기본 인증 관리자로 대체됩니다. data-native_callback와 data-native_login_uri를 모두 설정할 수는 없습니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-native_callback="handlePasswordCredential" |
네임스페이스 내의 자바스크립트 함수는 HTML API에서 지원되지 않습니다.
대신 네임스페이스 없이 전역 자바스크립트 함수를 사용하세요. 예를 들어 mylib.callback 대신 mylibCallback를 사용합니다.
data-native_id_param
비밀번호 사용자 인증 정보를 비밀번호 사용자 인증 정보 핸들러 엔드포인트에 제출할 때 credential.id 필드에 매개변수 이름을 지정할 수 있습니다. 기본 이름은 email입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| URL | 선택사항 | data-native_id_param="user_id" |
data-native_password_param
비밀번호 사용자 인증 정보를 비밀번호 사용자 인증 정보 핸들러 엔드포인트에 제출할 때 credential.password 값에 매개변수 이름을 지정할 수 있습니다. 기본 이름은 password입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| URL | 선택사항 | data-native_password_param="pwd" |
data-cancel_on_tap_outside
이 속성은 사용자가 메시지 밖을 클릭하는 경우 원탭 요청을 취소할지 여부를 설정합니다. 기본값은 true입니다. 사용 중지하려면 값을 false로 설정합니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| boolean | 선택사항 | data-cancel_on_tap_outside="false" |
data-prompt_parent_id
이 속성은 컨테이너 요소의 DOM ID를 설정합니다. 설정되어 있지 않으면 창의 오른쪽 상단에 원탭 메시지가 표시됩니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
지정된 쿠키에 비어 있지 않은 값이 있는 경우 이 속성은 원탭을 건너뜁니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-skip_prompt_cookie="SID" |
데이터 nonce
이 속성은 재생 공격을 방지하기 위해 ID 토큰에서 사용하는 임의의 문자열입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-nonce="biaqbm70g23" |
nonce 길이는 사용자 환경에서 지원하는 최대 JWT 크기와 개별 브라우저 및 서버의 HTTP 크기 제약조건으로 제한됩니다.
데이터 컨텍스트
이 속성은 원탭 프롬프트에 표시되는 제목과 메시지의 텍스트를 변경합니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-context="use" |
다음 표에는 사용 가능한 모든 컨텍스트와 설명이 나와 있습니다.
| 맥락 | |
|---|---|
signin |
'Google 계정으로 로그인' |
signup |
'Google 계정으로 가입' |
use |
'Google에서 사용' |
데이터 모멘트 콜백
이 속성은 메시지 UI 상태 알림 리스너의 함수 이름입니다. 자세한 내용은 데이터 유형 PromptMomentNotification를 참고하세요.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-moment_callback="logMomentNotification" |
네임스페이스 내의 자바스크립트 함수는 HTML API에서 지원되지 않습니다.
대신 네임스페이스 없이 전역 자바스크립트 함수를 사용하세요. 예를 들어 mylib.callback 대신 mylibCallback를 사용합니다.
data-state_cookie_domain
상위 도메인과 하위 도메인에 원탭을 표시해야 한다면 단일 공유 상태 쿠키가 사용되도록 상위 도메인을 이 속성에 전달합니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-state_cookie_domain="example.com" |
data-ux_mode
이 속성은 Google 계정으로 로그인 버튼에서 사용하는 UX 흐름을 설정합니다. 기본값은 popup입니다. 이 속성은 원탭 UX에 영향을 미치지 않습니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-ux_mode="redirect" |
다음 표에는 사용 가능한 UX 모드와 설명이 나와 있습니다.
| UX 모드 | |
|---|---|
popup |
팝업 창에서 로그인 UX 흐름을 실행합니다. |
redirect |
전체 페이지 리디렉션으로 로그인 UX 흐름을 실행합니다. |
data-allowed_parent_origin
중간 iframe을 삽입할 수 있는 출처입니다. 이 속성이 있으면 원탭은 중간 iframe 모드에서 실행됩니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 또는 문자열 배열 | 선택사항 | data-allowed_parent_origin="https://example.com" |
다음 표에는 지원되는 값 유형과 설명이 나와 있습니다.
| 값 유형 | ||
|---|---|---|
string |
단일 도메인 URI: | 'https://example.com' |
string array |
쉼표로 구분된 도메인 URI 목록입니다. | "https://news.example.com,https://local.example.com" |
data-allowed_parent_origin 속성 값이 유효하지 않으면 중간 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"은 유효하지 않은 것으로 간주됩니다.
data-intermediate_iframe_close_callback
사용자가 원탭 UI의 'X' 버튼을 탭하여 원탭을 수동으로 닫을 때 기본 중간 iframe 동작을 재정의합니다. 기본 동작은 즉시 DOM에서 중간 iframe을 삭제하는 것입니다.
data-intermediate_iframe_close_callback 필드는 중간 iframe 모드에서만 적용됩니다. 원탭 iframe 대신 중간 iframe에만 영향을 미칩니다. 원탭 UI는 콜백을 호출하기 전에 삭제됩니다.
| 유형 | 필수 | 예 |
|---|---|---|
| 기능 | 선택사항 | data-intermediate_iframe_close_callback="logBeforeClose" |
네임스페이스 내의 자바스크립트 함수는 HTML API에서 지원되지 않습니다.
대신 네임스페이스 없이 전역 자바스크립트 함수를 사용하세요. 예를 들어 mylib.callback 대신 mylibCallback를 사용합니다.
data-itp_support
이 필드는 지능형 추적 방지(ITP)를 지원하는 브라우저에서
업그레이드된 원탭 UX를 사용 설정해야 하는지 결정합니다. 기본값은 false입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| boolean | 선택사항 | data-itp_support="true" |
data-login_hint
로그인해야 하는 사용자를 미리 알고 있는 애플리케이션은 Google에 로그인 힌트를 제공할 수 있습니다. 성공하면 계정 선택을 건너뜁니다. 허용되는 값은 이메일 주소 또는 ID 토큰 sub 필드입니다.
자세한 내용은
login_hint에 대한 OpenID Connect 문서를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
문자열. 이메일 주소 또는 ID 토큰의 sub 필드 값일 수 있습니다. |
선택사항 | data-login_hint="elisa.beckett@gmail.com" |
데이터-HD
사용자에게 여러 계정이 있고 Workspace 계정으로만 로그인해야 하는 경우 이를 사용하여 Google에 도메인 이름 힌트를 제공합니다. 성공하면 계정 선택 중에 표시되는 사용자 계정이 제공된 도메인으로 제한됩니다.
와일드 카드 값: *는 사용자에게 Workspace 계정만 제공하며 계정 선택 시 일반 계정 (user@gmail.com)은 제외합니다.
자세한 내용은
hd에 대한 OpenID Connect 문서를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열. 정규화된 도메인 이름 또는 *. | 선택사항 | data-hd="*" |
data-use_fedcm_for_prompt
브라우저에서 사용자 로그인 메시지를 제어하고 웹사이트와 Google 간의 로그인 흐름을 중재하도록 허용합니다. 기본값은 거짓입니다. 자세한 내용은 FedCM으로 이전 페이지를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| boolean | 선택사항 | data-use_fedcm_for_prompt="true" |
'g_id_signin' 클래스가 있는 요소
요소의 class 속성에 g_id_signin를 추가하면 요소가 Google 계정으로 로그인 버튼으로 렌더링됩니다.
같은 페이지에서 'Google 계정으로 로그인' 버튼 여러 개를 렌더링할 수 있습니다. 각 버튼에는 고유한 시각적 설정이 있을 수 있습니다. 설정은 다음 데이터 속성으로 정의됩니다.
시각적 데이터 속성
다음 표에는 시각적 데이터 속성과 해당 설명이 나와 있습니다.
| 속성 | |
|---|---|
data-type |
버튼 유형: 아이콘 또는 표준 버튼 |
data-theme |
버튼 테마 예를 들어 fill_blue 또는 fill_black입니다. |
data-size |
버튼 크기입니다. 예를 들면 '작거나 큼'입니다. |
data-text |
버튼 텍스트입니다. 예: 'Google 계정으로 로그인' 또는 'Google 계정으로 가입' |
data-shape |
버튼 모양입니다. (예: 직사각형 또는 원형) |
data-logo_alignment |
Google 로고 정렬: 왼쪽 또는 가운데 |
data-width |
버튼 너비(픽셀)입니다. |
data-locale |
버튼 텍스트는 이 속성에 설정된 언어로 렌더링됩니다. |
data-click_listener |
설정된 경우 Google 계정으로 로그인 버튼을 클릭할 때 이 함수가 호출됩니다. |
data-state |
설정하면 이 문자열이 ID 토큰과 함께 반환됩니다. |
속성 유형
다음 섹션에는 각 속성의 유형과 예시에 대한 세부정보가 포함되어 있습니다.
데이터 유형
버튼 유형입니다. 기본값은 standard입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 예 | data-type="icon" |
다음 표에는 사용 가능한 모든 버튼 유형과 설명이 나와 있습니다.
| 유형 | |
|---|---|
standard |
|
icon |
|
data-theme
버튼 테마 기본값은 outline입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-theme="filled_blue" |
다음 표에는 사용 가능한 테마와 설명이 나와 있습니다.
| 테마 | |
|---|---|
outline |
|
filled_blue |
|
filled_black |
|
data-size
버튼 크기입니다. 기본값은 large입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-size="small" |
다음 표에는 사용 가능한 버튼 크기와 설명이 나와 있습니다.
| 크기 | |
|---|---|
large |
|
medium |
|
small |
|
데이터 텍스트
버튼 텍스트입니다. 기본값은 signin_with입니다. data-text 속성이 다른 아이콘 버튼 텍스트에는 시각적인 차이가 없습니다. 유일한 예외는 화면 접근성을 위해 텍스트를 읽는 경우입니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-text="signup_with" |
다음 표에는 사용 가능한 버튼 텍스트와 설명이 나와 있습니다.
| 텍스트 | |
|---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
|
데이터 형태
버튼 모양입니다. 기본값은 rectangular입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-shape="rectangular" |
다음 표에는 사용 가능한 버튼 모양과 설명이 나와 있습니다.
| 모양 | |
|---|---|
rectangular |
icon 버튼 유형에 사용된 경우 square와 동일합니다.
|
pill |
icon 버튼 유형에 사용된 경우 circle와 동일합니다.
|
circle |
standard 버튼 유형에 사용된 경우 pill와 동일합니다.
|
square |
standard 버튼 유형에 사용된 경우 rectangular와 동일합니다.
|
데이터-로고_정렬
Google 로고의 정렬 기본값은 left입니다. 이 속성은 standard 버튼 유형에만 적용됩니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-logo_alignment="center" |
다음 표에는 사용 가능한 정렬과 설명이 나와 있습니다.
| logo_alignment | |
|---|---|
left |
|
center |
|
데이터 너비
최소 버튼 너비(픽셀)입니다. 사용 가능한 최대 너비는 400픽셀입니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-width=400 |
데이터 언어
선택사항입니다. 지정된 언어를 사용하여 버튼 텍스트를 표시합니다. 그렇지 않으면 사용자의 Google 계정 또는 브라우저 설정이 기본값으로 설정됩니다. 라이브러리를 로드할 때 hl 매개변수와 언어 코드를 src 지시어에 추가합니다(예: gsi/client?hl=<iso-639-code>).
설정하지 않으면 브라우저의 기본 언어 또는 Google 세션 사용자의 환경설정이 사용됩니다. 따라서 사용자마다 현지화된 버튼이 다르게 표시될 수 있으며, 크기도 다를 수 있습니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-locale="zh_CN" |
data-click_listener
data-click_listener 속성을 사용하여 Google 계정으로 로그인 버튼을 클릭할 때 호출할 JavaScript 함수를 정의할 수 있습니다.
<script>
function onClickHandler(){
console.log("Sign in with Google button clicked...")
}
</script>
.....
<div class="g_id_signin"
data-size="large"
data-theme="outline"
data-click_listener="onClickHandler">
</div>
이 예에서는 Google 계정으로 로그인 버튼을 클릭하면 Google 계정으로 로그인 버튼 클릭됨 메시지가 콘솔에 로깅됩니다.
data-state
선택사항으로, 여러 Google 계정으로 로그인 버튼을 같은 페이지에서 렌더링할 수 있으므로 각 버튼에 고유한 문자열을 할당할 수 있습니다. 동일한 문자열이 ID 토큰과 함께 반환되므로 사용자가 로그인할 때 클릭한 버튼을 식별할 수 있습니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-state="button 1" |
서버 측 통합
서버 측 엔드포인트는 다음 HTTP POST 요청을 처리해야 합니다.
ID 토큰 핸들러 엔드포인트
ID 토큰 핸들러 엔드포인트가 ID 토큰을 처리합니다. 해당 계정의 상태에 따라 사용자를 로그인 처리하고 가입 페이지로 안내하거나 추가 정보를 위해 계정 연결 페이지로 이동하도록 할 수 있습니다.
HTTP POST 요청에는 다음 정보가 포함됩니다.
| 형식 | 이름 | 설명 |
|---|---|---|
| 쿠키 | g_csrf_token |
핸들러 엔드포인트에 요청할 때마다 변경되는 임의의 문자열입니다. |
| 요청 매개변수 | g_csrf_token |
이전 쿠키 값인 g_csrf_token와 동일한 문자열입니다. |
| 요청 매개변수 | credential |
Google에서 발급한 ID 토큰입니다. |
| 요청 매개변수 | select_by |
사용자 인증 정보가 선택되는 방식입니다. |
| 요청 매개변수 | state |
이 매개변수는 사용자가 Google 계정으로 로그인 버튼을 클릭하여 로그인하고 버튼의 state 속성이 지정된 경우에만 정의됩니다. |
사용자 인증정보
디코딩 시 ID 토큰은 다음 예시와 같이 표시됩니다.
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"
}
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은 권한이 없으므로 사용자를 확인하기 위해 비밀번호나 다른 본인 확인 방법을 사용하는 것이 좋습니다. Google 계정이 생성되었을 때 Google에서 처음에 사용자를 인증했으므로 email_verified도 true일 수 있습니다. 하지만 이후 서드 파티 이메일 계정의 소유권이 변경되었을 수 있습니다.
exp 필드에는 서버 측에서 토큰을 확인할 수 있는 만료 시간이 표시됩니다. Google 계정으로 로그인에서 가져온 ID 토큰은 1시간입니다. 만료 시간 전에 토큰을 확인해야 합니다. 세션 관리에는 exp를 사용하지 마세요. ID 토큰이 만료되었다고 해서 사용자가 로그아웃되었다는 의미는 아닙니다. 앱은 사용자의 세션 관리를 담당합니다.
select_by
다음 표에는 select_by 필드에 사용 가능한 값이 나와 있습니다. 세션 및 동의 상태와 함께 사용되는 버튼 유형은 값을 설정하는 데 사용됩니다.
사용자가 원탭 또는 Google 계정으로 로그인 버튼을 눌렀거나 터치리스 자동 로그인 프로세스를 사용했습니다.
기존 세션이 발견되었거나 사용자가 새 세션을 설정하기 위해 Google 계정을 선택하고 로그인했습니다.
앱과 ID 토큰 사용자 인증 정보를 공유하기 전에
- 확인 버튼을 눌러 사용자 인증 정보 공유에 동의함
- 은 이전에 동의하고 '계정 선택을 사용하여 Google 계정'을 선택하는 사용자입니다.
이 필드의 값은 이러한 유형 중 하나로 설정되며,
| 값 | 설명 |
|---|---|
auto |
이전에 사용자 인증 정보 공유에 동의한 기존 세션을 사용하여 사용자의 자동 로그인 FedCM이 지원되지 않는 브라우저에만 적용됩니다. |
user |
이전에 동의를 부여한 기존 세션이 있는 사용자가 원탭 '계속' 버튼을 눌러 사용자 인증 정보를 공유했습니다. FedCM이 지원되지 않는 브라우저에만 적용됩니다. |
fedcm |
사용자가 FedCM을 사용하여 사용자 인증 정보를 공유하기 위해 원탭 '계속' 버튼을 누릅니다. FedCM 지원 브라우저에만 적용됩니다. |
fedcm_auto |
이전에 FedCM 원탭을 사용하여 사용자 인증 정보를 공유하는 데 동의한 기존 세션을 통해 사용자의 자동 로그인 FedCM 지원 브라우저에만 적용됩니다. |
user_1tap |
기존 세션이 있는 사용자가 원탭 '계속' 버튼을 눌러 동의하고 사용자 인증 정보를 공유했습니다. Chrome v75 이상에만 적용됩니다. |
user_2tap |
기존 세션이 없는 사용자가 원탭 '계속' 버튼을 눌러 계정을 선택한 다음 팝업 창에서 확인 버튼을 눌러 동의를 부여하고 사용자 인증 정보를 공유했습니다. Chromium 기반이 아닌 브라우저에 적용됩니다. |
btn |
이전에 동의를 부여한 기존 세션이 있으며 Google 계정으로 로그인 버튼을 누르고 '계정 선택'에서 Google 계정을 선택하여 사용자 인증 정보를 공유합니다. |
btn_confirm |
기존 세션이 있는 사용자가 Google 계정으로 로그인 버튼을 누르고 확인 버튼을 눌러 동의를 부여하고 사용자 인증 정보를 공유했습니다. |
btn_add_session |
기존에 동의했던 세션이 없는 사용자가 Google 계정으로 로그인 버튼을 눌러 Google 계정을 선택하고 사용자 인증 정보를 공유합니다. |
btn_confirm_add_session |
기존 세션이 없는 사용자가 먼저 Google 계정으로 로그인 버튼을 눌러 Google 계정을 선택한 다음 확인 버튼을 눌러 동의하고 사용자 인증 정보를 공유했습니다. |
state
이 매개변수는 사용자가 Google 계정으로 로그인 버튼을 클릭하여 로그인하고 클릭된 버튼의 data-state 속성이 지정된 경우에만 정의됩니다. 이 필드의 값은 버튼의 data-state 속성에 지정한 값과 동일합니다.
동일한 페이지에서 Google 계정으로 로그인 버튼을 여러 개 렌더링할 수 있으므로 각 버튼에 고유한 문자열을 할당할 수 있습니다. 따라서 이 state 매개변수를 사용하여 사용자가 로그인할 때 클릭한 버튼을 식별할 수 있습니다.
비밀번호 사용자 인증 정보 핸들러 엔드포인트
비밀번호 사용자 인증 정보 핸들러 엔드포인트는 기본 인증 관리자가 검색한 비밀번호 사용자 인증 정보를 처리합니다.
HTTP POST 요청에는 다음 정보가 포함됩니다.
| 형식 | 이름 | 설명 |
|---|---|---|
| 쿠키 | g_csrf_token |
핸들러 엔드포인트에 요청할 때마다 변경되는 임의의 문자열입니다. |
| 요청 매개변수 | g_csrf_token |
이전 쿠키 값인 g_csrf_token와 동일한 문자열입니다. |
| 요청 매개변수 | email |
Google에서 발급한 ID 토큰입니다. |
| 요청 매개변수 | password |
사용자 인증 정보가 선택되는 방식입니다. |