이 참조 페이지에서는 Sign-In JavaScript API를 설명합니다. 이 API를 사용하여 그러면 웹페이지에 원탭 메시지 또는 Google 계정으로 로그인 버튼을 표시할 수 있습니다.
메서드: google.accounts.id.initial
google.accounts.id.initialize 메서드는 Google 계정으로 로그인을 초기화합니다.
클라이언트로 전송합니다. 다음 코드 예를 참고하세요.
메서드를 사용하여 축소하도록 요청합니다.
google.accounts.id.initialize(IdConfiguration)
다음 코드 예에서는 google.accounts.id.initialize 메서드를 구현합니다.
다음과 같이 onload 함수를 사용합니다.
<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 토큰을 처리하는 JavaScript 함수. Google 원탭 및
Google 계정으로 로그인 버튼 popup UX 모드에서
속성 |
login_uri |
로그인 엔드포인트의 URL입니다. Google 계정으로 로그인 버튼
redirect UX 모드에서 이 속성을 사용합니다. |
native_callback |
비밀번호 사용자 인증 정보를 처리하는 JavaScript 함수. |
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를 사용 설정합니다. |
login_hint |
사용자 힌트를 제공하여 계정 선택을 건너뜁니다. |
hd |
도메인별로 계정 선택을 제한합니다. |
use_fedcm_for_prompt |
브라우저에서 사용자 로그인 메시지를 제어하고 웹사이트 및 Google 간 로그인 흐름을 관리할 수 있습니다. |
client_id
이 필드는 애플리케이션의 클라이언트 ID로, Google Cloud 콘솔 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 예 | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
이 필드는 사용자 없이 ID 토큰을 자동으로 반환할지 여부를 결정합니다.
앱을 승인한 Google 세션이 하나만 있을 때의 상호작용
있습니다. 기본값은 false입니다. 자세한 내용은 다음 표를 참고하세요.
있습니다.
| 유형 | 필수 | 예 |
|---|---|---|
| 부울 | 선택사항 | auto_select: true |
콜백
이 필드는
원탭 프롬프트 또는 팝업 창 이 속성은 Google에서
원탭 또는 Google 계정으로 로그인 버튼 popup UX 모드가 사용됩니다. 자세한 내용은
자세한 내용은 다음 표를 참조하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 함수 | 원탭 및 popup UX 모드에 필요합니다. |
callback: handleResponse |
login_uri
이 속성은 로그인 엔드포인트의 URI입니다.
값이 OAuth에 대해 승인된 리디렉션 URI 중 하나와 정확히 일치해야 합니다. 사용자가 구성한 2.0 클라이언트 Google Cloud 콘솔의 리디렉션 URI 유효성 검사를 준수해야 합니다. 규칙을 참조하세요.
현재 페이지가 로그인 페이지인 경우 이 속성을 생략할 수 있습니다. 사용자 인증 정보가 기본적으로 이 페이지에 게시됩니다.
ID 토큰 사용자 인증 정보 응답은 사용자가 Google 계정으로 로그인 버튼을 클릭하면 리디렉션 UX 모드가 사용됩니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 선택사항 | 예 |
|---|---|---|
| URL | 기본값은 현재 페이지의 URI 또는 지정한 값입니다.ux_mode: "redirect"가 설정된 경우에만 사용됩니다. |
login_uri: "https://www.example.com/login" |
로그인 엔드포인트는
credential 키와 함께
ID 토큰 값을 본문에 포함합니다.
다음은 로그인 엔드포인트에 대한 요청의 예입니다.
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
native_callback
이 필드는 비밀번호를 처리하는 자바스크립트 함수의 이름입니다. 사용자 인증 정보를 반환합니다. 자세한 내용은 자세한 내용은 다음 표를 참조하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 함수 | 선택사항 | native_callback: handleResponse |
cancel_on_tap_outside
이 필드는 사용자가 클릭한 경우 원탭 요청을 취소할지 여부를 설정합니다.
실행할 수 있습니다 기본값은 true입니다.
값을 false로 설정합니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 부울 | 선택사항 | cancel_on_tap_outside: false |
prompt_parent_id
이 속성은 컨테이너 요소의 DOM ID를 설정합니다. 설정하지 않으면 창의 오른쪽 상단에 원탭 프롬프트가 표시됩니다. 자세한 내용은 자세한 내용은 다음 표를 참조하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | prompt_parent_id: 'parent_id' |
nonce
이 필드는 재전송 공격을 방지하기 위해 ID 토큰에서 사용하는 임의의 문자열입니다. 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | nonce: "biaqbm70g23" |
nonce 길이는 사용자 환경에서 지원되는 최대 JWT 크기로 제한됩니다. 개별 브라우저 및 서버의 HTTP 크기 제한이 있습니다
context
이 필드는 원탭 프롬프트의 제목과 메시지의 텍스트를 변경합니다. 자세한 내용은 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | context: "use" |
다음 표에는 사용 가능한 모든 컨텍스트와 설명이 나와 있습니다.
| 컨텍스트 | |
|---|---|
signin |
'Google 계정으로 로그인' |
signup |
'Google 계정으로 가입' |
use |
"Google에서 사용" |
state_cookie_domain
상위 도메인과 하위 도메인에 원탭을 표시해야 하는 경우 이 필드에 상위 도메인을 추가하여 단일 공유 상태 쿠키가 사용되도록 합니다. 자세한 내용은 자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | state_cookie_domain: "example.com" |
ux_mode
이 필드를 사용하여 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"
모든 수준에서 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
사용자가 One을 수동으로 닫을 때 중간 iframe 기본 동작을 재정의합니다. 'X'를 탭하여 탭하세요. 버튼을 클릭합니다. 기본 동작은 다음과 같습니다. DOM에서 중간 iframe을 즉시 삭제합니다.
intermediate_iframe_close_callback 필드는 중간 단계에만 적용됩니다.
iframe 모드입니다. 또한 중간 iframe에만 영향을 미치며
원탭 iframe. 콜백이 호출되기 전에 원탭 UI가 삭제됩니다.
| 유형 | 필수 | 예 |
|---|---|---|
| 함수 | 선택사항 | intermediate_iframe_close_callback: logBeforeClose |
itp_support
이 필드는
업그레이드된 원탭 UX
지능형 추적 방지를 지원하는 브라우저에서 사용 설정해야 합니다.
(ITP) 기본값은 false입니다. 자세한 내용은 다음 표를 참고하세요.
있습니다.
| 유형 | 필수 | 예 |
|---|---|---|
| 부울 | 선택사항 | itp_support: true |
login_hint
애플리케이션이 로그인해야 하는 사용자를 미리 알고 있다면 Google에 로그인 힌트를 제공할 수 있습니다. 성공하면 계정 선택을 건너뜁니다. 허용되는 값은 이메일 주소 또는 ID 토큰 sub 필드 값입니다.
자세한 내용은 OpenID Connect의 login_hint 필드를 참조하세요. 문서를 참조하세요.
| 유형 | 필수 | 예 |
|---|---|---|
문자열, 이메일 주소 또는 ID 토큰의 값
sub 필드 |
선택사항 | login_hint: 'elisa.beckett@gmail.com' |
HD
사용자가 여러 계정을 가지고 있고 Workspace로만 로그인해야 하는 경우
계정은 이를 사용하여 Google에 도메인 이름 힌트를 제공합니다. 성공하면 사용자는
계정 선택 중에 표시되는 계정은 제공된 도메인으로 제한됩니다.
와일드 카드 값: *은(는) 사용자에게 Workspace 계정만 제공하며
일반 계정 (user@gmail.com)을 사용할 수 있습니다.
자세한 내용은 OpenID Connect 문서의 hd 필드를 참조하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열. 정규화된 도메인 이름 또는 *. | 선택사항 | hd: '*' |
use_fedcm_for_prompt
브라우저에서 사용자 로그인 메시지를 제어하고 로그인 흐름을 조정하도록 허용 직접 관리할 수 있습니다. 기본값은 false입니다. FedCM으로 이전을 참조하세요. 페이지를 참조하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 부울 | 선택사항 | use_fedcm_for_prompt: true |
메서드: google.accounts.id.prompt
google.accounts.id.prompt 메서드는 원탭 프롬프트 또는
initialize() 메서드가 호출된 후 브라우저 네이티브 인증 관리자
다음 메서드 코드 예를 참고하세요.
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
일반적으로 prompt() 메서드는 페이지 로드 시 호출됩니다. 세션으로 인해
상태 및 사용자 설정이 표시되는 경우 원탭 메시지 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 데이터 유형:
| 메서드 | |
|---|---|
isDisplayMoment() |
표시 시간 알림인가요? 참고: FedCM이 <ph type="x-smartling-placeholder"></ph> 사용 설정되어 있는 경우 이 알림이 실행되지 않습니다. 자세한 내용은 FedCM으로 이전 페이지를 참조하세요. |
isDisplayed() |
표시용 알림인가요? UI는
무엇인가요? 참고: FedCM이 <ph type="x-smartling-placeholder"></ph> 사용 설정되어 있는 경우 이 알림이 실행되지 않습니다. 자세한 내용은 FedCM으로 이전 페이지를 참조하세요. |
isNotDisplayed() |
표시용 알림인가요? UI가 아닌 경우
무엇인가요? 참고: FedCM이 <ph type="x-smartling-placeholder"></ph> 사용 설정되어 있는 경우 이 알림이 실행되지 않습니다. 자세한 내용은 FedCM으로 이전 페이지를 참조하세요. |
getNotDisplayedReason() |
UI가 표시되지 않는 자세한 이유입니다. 다음은 가능한 값:
|
isSkippedMoment() |
이 알림을 건너뛴 순간인가요? |
getSkippedReason() |
건너뛴 순간의 자세한 이유입니다. 다음은 가능한 값:
|
isDismissedMoment() |
이 알림을 닫은 시점인가요? |
getDismissedReason() |
자세한 닫기 사유입니다. 다음이 가능합니다. 값:
|
getMomentType() |
모멘트 유형의 문자열을 반환합니다. 다음이 가능합니다. 값:
|
데이터 유형: CredentialResponse
callback 함수가 호출되면 CredentialResponse 객체는 다음과 같습니다.
매개변수로 전달될 수 있습니다. 다음 표에는
를 추가합니다.
| 필드 | |
|---|---|
credential |
이 필드는 반환된 ID 토큰입니다. |
select_by |
이 필드는 사용자 인증 정보가 선택되는 방법을 설정합니다. |
state |
이 필드는 사용자가 Google 계정으로 로그인을 클릭할 때만 정의됩니다.
로그인 버튼 및 버튼의 state
속성이 지정됩니다. |
사용자 인증정보
이 필드는 base64로 인코딩된 JSON 웹 토큰 (JWT) 문자열인 ID 토큰입니다.
날짜 decoding JWT는 다음 예시와 같습니다. <ph type="x-smartling-placeholder">
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"
}
</ph>
sub 필드는 Google 계정의 전역 고유 식별자입니다. 단,
sub 필드는 모든 Google에서 고유하므로 사용자 식별자로 사용됩니다.
계정 및 절대 재사용되지 않음 이메일 주소를 식별자로 사용하지 마세요.
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에서 처음 인증했으므로 email_verfied도 true일 수 있습니다.
사용자에게 양도할 수 있지만 세 번째 계정의 소유권은
이메일 계정이 변경되었을 수 있습니다.
exp 필드에는
서버 측으로 구성됩니다. 1시간
Google 계정으로 로그인에서 가져온 ID 토큰
token에 저장합니다.
있습니다. 세션 관리에 exp를 사용하지 않습니다. 만료된 ID 토큰
사용자가 로그아웃한 것이 아닙니다. 앱은 세션을 담당합니다.
사용자를 관리할 수 있습니다.
select_by
다음 표에는 select_by 필드에 사용 가능한 값이 나와 있습니다. 이
세션 및 동의 상태와 함께 사용되는 버튼 유형은
값
사용자가 원탭 또는 Google 계정으로 로그인 버튼을 누르거나 비접촉식 자동 로그인 프로세스를 사용할 수 있습니다.
기존 세션을 찾았거나 사용자가 새 세션을 설정하기 위한 Google 계정
ID 토큰 사용자 인증 정보를 앱과 공유하기 전에
- 확인 버튼을 눌러 사용자 인증 정보 공유에 동의함을 나타냅니다. 또는
- 이전에 동의하고 '계정 선택'을 사용하여 Google 계정을 탭합니다.
이 필드의 값은
| 값 | 설명 |
|---|---|
auto |
기존 세션을 보유한 사용자가 자동으로 로그인(예: 사용자 인증 정보를 공유하는 데 동의했음을 의미합니다. 적용 대상 FedCM에서 지원되지 않는 브라우저 |
user |
이전에 동의한 기존 세션이 있는 사용자 원탭 '다음으로 계속'을 눌렀습니다 버튼을 클릭하여 사용자 인증 정보를 공유합니다. 적용됨 FedCM을 지원하지 않는 브라우저에만 적용됩니다. |
fedcm |
사용자가 원탭 '다음으로 계속'을 눌렀습니다. 공유 버튼 사용자 인증 정보를 제공합니다 FedCM에만 적용 지원됨 있습니다. |
fedcm_auto |
기존 세션을 보유한 사용자가 자동으로 로그인(예: 이전에 FedCM 원탭을 사용하여 사용자 인증 정보를 공유하는 데 동의한 것으로 간주됩니다. FedCM에만 적용 지원됨 있습니다. |
user_1tap |
기존 세션의 사용자가 원탭 '다음으로 계속'을 눌렀습니다. 버튼을 사용하여 동의를 부여하고 사용자 인증 정보를 공유합니다. Chrome에만 적용 v75 이상 |
user_2tap |
기존 세션이 없는 사용자가 원탭 '다음으로 계속'을 눌렀습니다. 버튼을 클릭하여 계정을 선택한 다음 동의 및 사용자 인증 정보를 공유할 수 있는 팝업 창이 표시됩니다. 적용 대상 Chromium 기반이 아닌 브라우저에 적용됩니다. |
btn |
이전에 동의한 기존 세션이 있는 사용자 Google 계정으로 로그인 버튼을 누르고 '계정 선택' 사용자 인증 정보를 공유합니다 |
btn_confirm |
기존 세션의 사용자가 Google 계정으로 로그인 버튼을 눌렀습니다. 동의 및 사용자 인증 정보를 공유하기 위해 확인 버튼을 눌렀습니다. |
btn_add_session |
이전에 권한을 부여했으며 기존 세션이 없는 사용자 Google 계정을 선택하기 위해 Google 계정으로 로그인 버튼을 눌러 동의함 사용자 인증 정보를 공유할 수 있습니다 |
btn_confirm_add_session |
기존 세션이 없는 사용자가 먼저 Google 계정으로 로그인을 눌렀습니다. 버튼을 눌러 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 데이터 유형:
| 속성 | |
|---|---|
type |
버튼 유형: 아이콘 또는 표준 버튼. |
theme |
버튼 테마입니다. (예: Fill_blue 또는 Fill_black) |
size |
버튼 크기입니다. 예를 들어 작거나 크거나 같습니다. |
text |
버튼 텍스트입니다. 예: 'Google 계정으로 로그인' 또는 'Google 계정으로 가입' |
shape |
버튼 모양입니다. 예를 들어 직사각형 또는 원형입니다. |
logo_alignment |
Google 로고 정렬: 왼쪽 또는 가운데 |
width |
버튼 너비입니다(단위: 픽셀). |
locale |
설정하면 버튼 언어가 렌더링됩니다. |
click_listener |
설정된 경우 Google 계정으로 로그인 시 버튼을 클릭하면 됩니다. |
state |
설정되면 이 문자열이 ID 토큰과 함께 반환됩니다. |
속성 유형
다음 섹션에는 각 속성의 유형과 예로 들 수 있습니다
유형
버튼 유형입니다. 기본값은 standard입니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 예 | type: "icon" |
다음 표에는 사용 가능한 버튼 유형과 해당 유형이 나와 있습니다. 설명:
| 유형 | |
|---|---|
standard |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> </ph>
<ph type="x-smartling-placeholder"> |
icon |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> |
테마
버튼 테마 기본값은 outline입니다. 다음 표에서
추가 정보:
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | theme: "filled_blue" |
다음 표에는 사용 가능한 테마와 설명이 나와 있습니다.
| 테마 | |
|---|---|
outline |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
|
filled_blue |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> </ph>
|
filled_black |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> </ph>
|
크기
버튼 크기입니다. 기본값은 large입니다. 다음 표에서
추가 정보:
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | size: "small" |
다음 표에는 사용 가능한 버튼 크기와 설명이 나와 있습니다.
| 크기 | |
|---|---|
large |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
|
medium |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> </ph>
<ph type="x-smartling-placeholder"> |
small |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> </ph>
<ph type="x-smartling-placeholder"> |
텍스트
버튼 텍스트입니다. 기본값은 signin_with입니다. 시각적
text 속성이 다른 아이콘 버튼의 텍스트 차이
유일한 예외는 화면 접근성을 위해 텍스트를 읽는 경우입니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | text: "signup_with" |
다음 표에는 사용 가능한 모든 버튼 텍스트와 설명:
| 텍스트 | |
|---|---|
signin_with |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"> |
signup_with |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"> |
continue_with |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"> |
signin |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"> |
shape
버튼 모양입니다. 기본값은 rectangular입니다. 다음 표를 참고하세요.
를 참조하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | shape: "rectangular" |
다음 표에는 사용 가능한 버튼 모양과 설명이 나와 있습니다.
| 도형 | |
|---|---|
rectangular |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
icon에 사용하는 경우
버튼 유형의 경우 square와 동일합니다.
|
pill |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> </ph>
icon 버튼에 사용되는 경우
유형은 circle와 동일합니다.
|
circle |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
standard에 사용하는 경우
버튼 유형의 경우 pill와 동일합니다.
|
square |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
standard에 사용하는 경우
버튼 유형의 경우 rectangular와 동일합니다.
|
logo_alignment
Google 로고의 정렬 기본값은 left입니다. 이 속성
standard 버튼 유형에만 적용됩니다. 자세한 내용은 다음 표를 참고하세요.
있습니다.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | logo_alignment: "center" |
다음 표에는 사용 가능한 정렬과 그에 대한 설명이 나와 있습니다.
| logo_alignment | |
|---|---|
left |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> |
center |
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"> |
너비
최소 버튼 너비(픽셀)입니다. 최대 너비는 400픽셀입니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | width: "400" |
locale
선택사항. 지정된 언어를 사용하여 버튼 텍스트를 표시합니다. 그렇지 않으면 기본값은
사용자 Google 계정 또는 브라우저 설정 hl 매개변수를 추가합니다.
라이브러리를 로드할 때 src 지시어에 언어 코드를 추가합니다. 예를 들면 다음과 같습니다.
gsi/client?hl=<iso-639-code>
설정되지 않은 경우 브라우저의 기본 언어 또는 Google 세션 사용자의 환경설정이 사용됩니다. 따라서 사용자마다 다른 버전의 다른 크기로 표시할 수도 있습니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | locale: "zh_CN" |
click_listener
Google 계정으로 로그인 시 호출될 JavaScript 함수를
click_listener 속성을 사용하여 클릭됩니다.
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 토큰과 함께 반환되므로 어떤 버튼 사용자가 로그인할 수 있습니다.
자세한 내용은 다음 표를 참고하세요.
| 유형 | 필수 | 예 |
|---|---|---|
| 문자열 | 선택사항 | data-state: "button 1" |
데이터 유형: 사용자 인증 정보
native_callback 드림
함수가 호출되면 Credential 객체가 매개변수로 전달됩니다. 이
다음 표에는 객체에 포함된 필드가 나와 있습니다.
| 필드 | |
|---|---|
id |
사용자를 식별합니다. |
password |
비밀번호 |
메서드: google.accounts.id.disableAutoSelect
사용자가 웹사이트에서 로그아웃하면 메서드를 호출해야 합니다.
google.accounts.id.disableAutoSelect: 쿠키에 상태를 기록합니다. 이
UX 데드 루프를 방지합니다. 다음 메서드 코드 스니펫을 참고하세요.
google.accounts.id.disableAutoSelect()
다음 코드 예에서는 google.accounts.id.disableAutoSelect를 구현합니다.
메서드를 onSignout() 함수를 사용하여 호출합니다.
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
메서드: google.accounts.id.storeCredential
이 메서드는 브라우저 네이티브 태그의 store() 메서드에 대한 래퍼입니다.
인증 관리자 API를 사용할 수 있습니다. 따라서 비밀번호 저장에만 사용할 수 있고
사용자 인증 정보 다음 메서드 코드 예를 참고하세요.
google.accounts.id.storeCredential(Credential, callback)
다음 코드 예에서는 google.accounts.id.storeCredential를 구현합니다.
메서드를 onSignIn() 함수를 사용하여 호출합니다.
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
메서드: google.accounts.id.cancel
신뢰 당사자로부터 메시지를 삭제하면 원탭 흐름을 취소할 수 있습니다. 있습니다. 사용자 인증 정보가 이미 선택된 경우 취소 작업이 무시됩니다. 자세한 내용은 메서드의 다음 코드 예를 참고하세요.
google.accounts.id.cancel()
다음 코드 예에서는 google.accounts.id.cancel() 메서드를 구현합니다.
다음과 같이 onNextButtonClicked() 함수를 사용합니다.
<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 토큰입니다. 다음 메서드 코드 스니펫을 참고하세요.
javascript
google.accounts.id.revoke(login_hint, callback)
| 매개변수 | 유형 | 설명 |
|---|---|---|
login_hint |
문자열 | 사용자 Google 계정의 이메일 주소 또는 고유 ID입니다. ID는sub
사용자 인증 정보 페이로드. |
callback |
함수 | 선택적 RevocationResponse 핸들러. |
다음 코드 샘플은 ID와 함께 revoke 메서드를 사용하는 방법을 보여줍니다.
google.accounts.id.revoke('1618033988749895', done => {
console.log(done.error);
});
데이터 유형: RevocationResponse
callback 함수가 호출되면 RevocationResponse 객체는 다음과 같습니다.
매개변수로 전달될 수 있습니다. 다음 표에는
를 포함하는 것이 좋습니다.
| 필드 | |
|---|---|
successful |
이 필드는 메서드 호출의 반환 값입니다. |
error |
이 필드에는 선택적으로 자세한 오류 응답 메시지가 포함됩니다. |
성공
이 필드는 취소 메서드 호출이 성공했거나 false를 반환합니다.
오류
이 필드는 문자열 값이며 취소 시 자세한 오류 메시지가 포함됩니다. 메서드 호출이 실패했다면 성공 시 정의되지 않았기 때문입니다.