이 참조 페이지에서는 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 |
상위 도메인 및 하위 도메인에서 One Tap을 호출해야 하는 경우 단일 공유 쿠키가 사용되도록 상위 도메인을 이 속성에 전달합니다. |
data-ux_mode |
Google 계정으로 로그인 버튼 UX 흐름 |
data-allowed_parent_origin |
중간 iframe을 삽입할 수 있는 출처입니다. 이 속성이 있으면 탭 1개가 중간 iframe 모드에서 실행됩니다. |
data-intermediate_iframe_close_callback |
사용자가 원탭을 수동으로 닫을 때 기본 중간 iframe 동작을 재정의합니다. |
data-itp_support |
ITP 브라우저에서 업그레이드된 원탭 UX를 사용합니다. |
속성 유형
다음 섹션에는 각 속성의 유형과 예시에 관한 세부정보가 포함되어 있습니다.
데이터-클라이언트_ID
이 속성은 앱의 클라이언트 ID로, Google Developers Console에서 찾아서 만듭니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 예 | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
데이터-자동_메시지
이 속성은 원탭 표시 여부를 결정합니다. 기본값은 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 중 하나와 정확히 일치해야 하며 리디렉션 URI 유효성 검사 규칙을 준수해야 합니다.
현재 페이지가 로그인 페이지인 경우 이 속성을 생략할 수 있습니다. 이 경우 기본적으로 사용자 인증 정보가 이 페이지에 게시됩니다.
콜백 함수가 정의되어 있지 않고 사용자가 Google 계정으로 로그인 버튼이나 원탭 버튼을 클릭하거나 자동 서명이 발생하면 ID 토큰 사용자 인증 정보 응답이 로그인 엔드포인트에 게시됩니다.
자세한 내용은 다음 표를 참고하세요.
유형 | 선택사항 | 예 |
---|---|---|
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 계정으로 로그인 버튼redirect
UX 모드에 필요하며data-callback
속성은 무시합니다.Google One 탭 및 Google 로그인 버튼
popup
UX 모드에 대해 이 두 속성 중 하나를 설정해야 합니다. 둘 다 설정된 경우data-callback
속성의 우선순위가 더 높습니다.
네임스페이스 내의 자바스크립트 함수는 HTML API에서 지원되지 않습니다.
대신 네임스페이스 없이 전역 자바스크립트 함수를 사용하세요. 예를 들어 mylib.callback
대신 mylibCallback
를 사용합니다.
data-native_login_uri
이 속성은 비밀번호 사용자 인증 정보 핸들러 엔드포인트의 URL입니다. data-native_login_uri
속성이나 data-native_callback
속성을 설정하면 Google 세션이 없을 때 자바스크립트 라이브러리가 네이티브 사용자 인증 정보 관리자로 대체됩니다. data-native_callback
속성과 data-native_login_uri
속성을 모두 설정할 수는 없습니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-login_uri="https://www.example.com/password_login" |
데이터 기반 콜백
이 속성은 브라우저의 네이티브 사용자 인증 정보 관리자에서 반환된 비밀번호 사용자 인증 정보를 처리하는 자바스크립트 함수의 이름입니다. data-native_login_uri
속성이나 data-native_callback
속성을 설정하면 Google 세션이 없을 때 자바스크립트 라이브러리가 네이티브 사용자 인증 정보 관리자로 대체됩니다. 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_external
이 속성은 사용자가 메시지 바깥쪽을 클릭할 때 원탭 요청을 취소할지 여부를 설정합니다. 기본값은 true
입니다. 사용 중지하려면 값을 false
로 설정합니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
boolean | 선택사항 | data-cancel_on_tap_outside="false" |
데이터-메시지_상위_ID
이 속성은 컨테이너 요소의 DOM ID를 설정합니다. 설정되어 있지 않으면 창 오른쪽 상단에 원탭 메시지가 표시됩니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
이 속성은 지정된 쿠키에 비어 있지 않은 값이 있는 경우 원탭을 건너뜁니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-skip_prompt_cookie="SID" |
data-nonce
이 속성은 재전송 공격을 방지하기 위해 ID 토큰에서 사용하는 임의의 문자열입니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-nonce="biaqbm70g23" |
nonce 길이는 사용자 환경에서 지원되는 최대 JWT 크기, 개별 브라우저, 서버 HTTP 크기 제약 조건으로 제한됩니다.
데이터 컨텍스트
이 속성을 사용하면 원탭 메시지에 표시되는 제목 및 메시지가 변경됩니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-context="use" |
다음 표에는 사용 가능한 컨텍스트와 설명이 나와 있습니다.
맥락 | |
---|---|
signin |
'Google 계정으로 로그인' |
signup |
'Google 계정으로 가입' |
use |
'Google에서 사용' |
data-moment_callback
이 속성은 메시지 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을 삽입할 수 있는 출처입니다. 이 속성이 있으면 탭 1회가 중간 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"
는 모든 수준 (예: news.example.com
, login.news.example.com
)에서 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-medium_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" |
'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 계정으로 로그인 버튼을 클릭할 때 함수가 호출됩니다. |
속성 유형
다음 섹션에는 각 속성의 유형과 예시에 관한 세부정보가 포함되어 있습니다.
데이터 유형
버튼 유형입니다. 기본값은 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 |
버튼 텍스트는 'Google 계정으로 로그인'입니다.
![]() ![]() |
signup_with |
버튼 텍스트는 'Google 계정으로 가입'입니다.
![]() ![]() |
continue_with |
버튼 텍스트는 'Google 계정으로 계속하기'입니다.
![]() ![]() |
signin |
버튼 텍스트는 '로그인'입니다.
![]() ![]() |
데이터 형태
버튼 모양 기본값은 rectangular
입니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-shape="rectangular" |
다음 표에는 사용 가능한 버튼 모양과 설명이 나와 있습니다.
도형 | |
---|---|
rectangular |
직사각형 버튼입니다. icon 버튼 유형에 사용되는 경우 square 와 동일합니다.
![]() ![]() ![]() |
pill |
알약 모양 버튼입니다. icon 버튼 유형에 사용되는 경우 circle 와 동일합니다.
![]() ![]() ![]() |
circle |
원 모양 버튼 standard 버튼 유형에 사용되는 경우 pill 와 동일합니다.
![]() ![]() ![]() |
square |
정사각형 모양의 버튼입니다. standard 버튼 유형에 사용되는 경우 rectangular 와 동일합니다.
![]() ![]() ![]() |
데이터 로고 로고
Google 로고 정렬 기본값은 left
입니다. 이 속성은 standard
버튼 유형에만 적용됩니다. 자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-logo_alignment="center" |
다음 표에는 사용 가능한 정렬 및 설명이 나와 있습니다.
로고_정렬 | |
---|---|
left |
Google 로고를 왼쪽 정렬:
![]() |
center |
Google 로고를 가운데에 맞춥니다.
![]() |
데이터 너비
픽셀 단위의 최소 버튼 너비입니다. 사용 가능한 최대 너비는 400픽셀입니다.
자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-width=400 |
데이터 언어
선택사항입니다. 지정된 언어를 사용하여 버튼 텍스트를 표시합니다. 그렇지 않으면 기본적으로 사용자의 Google 계정 또는 브라우저 설정을 표시합니다. 라이브러리를 로드할 때 hl
지시어와 언어 코드를 src 지시어(예: gsi/client?hl=<iso-639-code>
)에 추가합니다.
설정하지 않으면 브라우저의 기본 언어 또는 Google 세션 사용자의 환경설정이 사용됩니다. 따라서 사용자마다 다른 버전의 현지화된 버튼을 볼 수 있으며, 크기도 다를 수 있습니다.
자세한 내용은 다음 표를 참고하세요.
유형 | 필수 | 예 |
---|---|---|
문자열 | 선택사항 | data-locale="zh_CN" |
클릭_리스너
click_listener
속성을 사용하여 Google 계정으로 로그인 버튼을 클릭할 때 호출할 자바스크립트 함수를 정의할 수 있습니다.
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 계정으로 로그인 버튼을 클릭하면 콘솔에 로깅됩니다.
서버 측 통합
서버 측 엔드포인트는 다음 HTTP POST
요청을 처리해야 합니다.
ID 토큰 핸들러 엔드포인트
ID 토큰 핸들러 엔드포인트가 ID 토큰을 처리합니다. 해당 계정의 상태에 따라 사용자를 로그인 또는 등록 페이지로 안내하거나 추가 정보를 위해 계정 연결 페이지로 안내할 수 있습니다.
HTTP POST
요청에는 다음 정보가 포함됩니다.
형식 | 이름 | 설명 |
---|---|---|
쿠키 | g_csrf_token |
핸들러 엔드포인트에 대한 각 요청마다 변경되는 임의의 문자열입니다. |
요청 매개변수 | g_csrf_token |
이전 쿠키 값과 동일한 문자열
g_csrf_token |
요청 매개변수 | credential |
Google에서 발급한 ID 토큰입니다. |
요청 매개변수 | select_by |
사용자 인증 정보를 선택하는 방법 |
인증서 : 자격증 : 면허증 : 신임장
디코딩 시 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 계정의 전역적으로 고유한 식별자가 포함됩니다.
email
, email_verified
, hd
필드를 사용하여 Google에서 이메일 주소를 호스팅하고 신뢰할 수 있는지 확인할 수 있습니다. Google이 신뢰할 수 있는 경우 사용자가 현재 합법적인 계정 소유자라고 알려져 있습니다.
Google의 공신력 있는 경우:
email
에는@gmail.com
계정이 있으며 이는 Gmail 계정입니다.email_verified
가 참이고hd
가 설정되어 있습니다. 이 계정은 Google Workspace 계정입니다.
사용자는 Gmail 또는 Google Workspace를 사용하지 않고 Google 계정에 등록할 수 있습니다. email
에 @gmail.com
접미사가 없고 hd
가 없으면 Google은 신뢰할 수 없으며 비밀번호 또는 다른 본인 확인 방법이 있는 것이 좋습니다. Google 계정이 생성되었을 때 Google에서 처음 사용자를 확인했지만 email_verfied
도 참일 수 있습니다. 하지만 서드 파티 이메일 계정의 소유권이 변경되었을 수 있습니다.
exp
필드에는 서버 측에서 토큰을 확인하는 만료 시간이 표시됩니다.
Google 계정으로 로그인에서 얻은 ID 토큰에는 1시간이 소요됩니다. 만료 시간 전에 토큰을 확인해야 합니다. 세션 관리에 exp
를 사용해서는 안 됩니다. ID 토큰이 만료되어도 사용자가 로그아웃되었다는 의미는 아닙니다. 앱은 사용자의 세션 관리를 담당합니다.
선택 기준
다음 표에는 select_by
필드에 사용할 수 있는 값이 나와 있습니다. 세션 및 동의 상태와 함께 사용되는 버튼 유형은 값을 설정하는 데 사용됩니다.
사용자가 원탭 또는 Google 계정으로 로그인 버튼을 누르거나 비접촉식 자동 로그인 프로세스를 사용했습니다.
기존 세션이 발견되었거나 사용자가 Google 계정을 선택하고 로그인하여 새 세션을 설정했습니다.
사용자가 ID 토큰 사용자 인증 정보를 앱과 공유하기 전에
- 확인 버튼을 눌러 사용자 인증 정보 공유에 동의함
- 이전에 동의를 받았고 계정 선택을 사용하여 Google 계정을 선택했습니다.
이 필드의 값은 다음 유형 중 하나로 설정됩니다.
가치 | 설명 |
---|---|
auto |
이전에 사용자 인증 정보를 공유하는 데 동의한 사용자의 기존 세션 자동 로그인 |
user |
이전에 동의한 적이 있는 기존 사용자가 원탭 '다음으로 계속' 버튼을 눌러 사용자 인증 정보를 공유합니다. |
user_1tap |
기존 세션이 있는 사용자는 '계속' 버튼을 탭하여 동의를 부여하고 사용자 인증 정보를 공유합니다. Chrome v75 이상에만 적용됩니다. |
user_2tap |
기존 세션이 없는 사용자가 '다음으로 진행'을 한 번 탭하여 계정을 선택한 다음 팝업 창에서 확인 버튼을 눌러 동의를 부여하고 사용자 인증 정보를 공유합니다. Chromium 기반이 아닌 브라우저에 적용됩니다. |
btn |
이전에 동의한 적이 있는 기존 세션의 사용자가 Google 계정으로 로그인 버튼을 누르고 '계정 선택'에서 Google 계정을 선택하여 사용자 인증 정보를 공유했습니다. |
btn_confirm |
기존 세션이 있는 사용자가 Google 계정으로 로그인 버튼을 누르고 확인 버튼을 눌러 동의를 부여하고 사용자 인증 정보를 공유했습니다. |
btn_add_session |
기존 세션이 없는 사용자가 이전에 동의한 경우 Google 계정으로 로그인 버튼을 눌러 Google 계정을 선택하고 사용자 인증 정보를 공유합니다. |
btn_confirm_add_session |
기존 세션이 없는 사용자가 먼저 Google 계정으로 로그인 버튼을 눌러 Google 계정을 선택한 다음 확인 버튼을 눌러 사용자 인증 정보를 공유하고 공유했습니다. |
비밀번호 사용자 인증 정보 핸들러 엔드포인트
비밀번호 사용자 인증 정보 핸들러 엔드포인트는 네이티브 사용자 인증 정보 관리자가 검색하는 비밀번호 사용자 인증 정보를 처리합니다.
HTTP POST
요청에는 다음 정보가 포함됩니다.
형식 | 이름 | 설명 |
---|---|---|
쿠키 | g_csrf_token |
핸들러 엔드포인트에 대한 각 요청마다 변경되는 임의의 문자열입니다. |
요청 매개변수 | g_csrf_token |
이전 쿠키 값 g_csrf_token 와 동일한 문자열입니다. |
요청 매개변수 | email |
Google에서 발급한 ID 토큰입니다. |
요청 매개변수 | password |
사용자 인증 정보를 선택하는 방법 |