사용자가 웹 앱에 가입하거나 로그인할 수 있도록 사이트에 Google 계정으로 로그인 버튼을 추가합니다. HTML 또는 자바스크립트를 사용하여 버튼과 속성을 렌더링하여 버튼 모양, 크기, 텍스트, 테마를 맞춤설정합니다.
사용자가 Google 계정을 선택하고 동의하면 Google은 JSON 웹 토큰 (JWT)을 사용하여 사용자 프로필을 공유합니다. 로그인 및 사용자 환경 관련 단계에 대한 개요는 작동 방식을 참조하세요. 맞춤설정 버튼 이해는 버튼이 사용자에게 표시되는 방식에 영향을 미치는 다양한 조건과 상태를 검토합니다.
기본 요건
로그인 페이지에 버튼을 추가하기 전에 다음 단계를 완료하세요.
- 설정에 설명된 단계에 따라 OAuth 동의 화면을 구성하고 클라이언트 ID를 가져옵니다.
- 클라이언트 라이브러리를 로드합니다.
버튼 렌더링
Google 계정으로 로그인 버튼을 표시하기 위해 HTML 또는 자바스크립트를 선택하여 로그인 페이지에 버튼을 렌더링할 수 있습니다.
HTML
HTML을 사용하여 로그인 버튼을 렌더링하여 JWT를 플랫폼의 로그인 엔드포인트에 반환합니다.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<body>
</html>
g_id_signin 클래스가 있는 요소는 Google 계정으로 로그인 버튼으로 렌더링됩니다.
버튼은 데이터 속성에 제공된 매개변수에 의해 맞춤설정됩니다.
같은 페이지에 Google 계정으로 로그인 버튼과 Google One 탭을 표시하려면 data-auto_prompt="false"를 삭제합니다. 마찰을 줄이고 로그인율을 개선하기 위해 이 방법을 사용하는 것이 좋습니다.
데이터 속성의 전체 목록은 g_id_signin 참조 페이지를 참고하세요.
JavaScript
JavaScript를 사용하여 로그인 버튼을 렌더링하여 브라우저의 JavaScript 콜백 핸들러에 JWT를 반환합니다.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID"
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
renderButton의 첫 번째 매개변수로 지정된 요소는 Google 계정으로 로그인 버튼으로 표시됩니다. 이 예에서 buttonDiv는 페이지에 버튼을 렌더링하는 데 사용됩니다. 버튼은 renderButton의 두 번째 매개변수에 지정된 속성을 사용하여 맞춤설정됩니다.
사용자 불편을 최소화하기 위해 google.accounts.id.prompt()을 호출하여 가입이나 로그인 버튼을 사용하는 대신 원탭을 두 번째 대안으로 표시합니다.
GIS 라이브러리는 ID 속성이 g_id_onload로 설정된 요소 또는 g_id_signin가 포함된 클래스 속성을 찾기 위해 HTML 문서를 파싱합니다. 일치하는 요소가 있으면 버튼을 자바스크립트로 렌더링했는지와 관계없이 HTML을 사용하여 버튼이 렌더링됩니다. 버튼이 두 번 표시되지 않도록 하려면 매개변수가 충돌할 수 있으며 이러한 이름과 일치하는 HTML 요소가 HTML 페이지에 포함되지 않을 수 있습니다.
버튼 언어
버튼 언어는 브라우저의 기본 언어 또는 Google 세션 사용자의 환경설정에 따라 자동으로 결정됩니다. 라이브러리를 로드할 때 hl 매개변수와 언어 코드를 src 지시어에 추가하고 HTML에서 선택적 data-locale 또는 언어 매개변수 data-locale을 추가하거나 JavaScript에서 locale을 추가하여 언어를 수동으로 선택할 수도 있습니다.
HTML
다음 코드 스니펫은 클라이언트 라이브러리 URL에 hl 매개변수를 추가하고 data-locale 속성을 프랑스어로 설정하여 버튼 언어를 프랑스어로 표시하는 방법을 보여줍니다.
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
다음 코드 스니펫은 클라이언트 라이브러리 URL에 hl 매개변수를 추가하고 locale 매개변수를 프랑스어로 설정하고 google.accounts.id.renderButton 메서드를 호출하여 버튼 언어를 프랑스어로 표시하는 방법을 보여줍니다.
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
사용자 인증 정보 처리
사용자 동의가 이루어지면 Google은 JSON 웹 토큰 (JWT) 사용자 인증 정보를 사용자 브라우저에 또는 플랫폼에서 호스팅하는 로그인 엔드포인트에 직접 ID 토큰이라고 합니다.
JWT를 수신할 위치는 HTML 또는 자바스크립트를 사용하여 버튼을 렌더링하는지, 팝업 또는 리디렉션 UX 모드를 사용하는지에 따라 달라집니다.
팝업 모드
popup UX 모드를 사용하면 팝업 창에서 로그인 UX 흐름이 실행됩니다. 이는 일반적으로 사용자에게 덜 방해가 되는 환경이며 기본 UX 모드입니다.
다음을 사용하여 버튼을 렌더링할 때:
HTML
다음 중 하나를 설정할 수 있습니다.
data-callback: JWT를 콜백 핸들러에 반환합니다.data-login_uri: Google이 POST 요청을 사용하여 로그인 엔드포인트로 직접 JWT를 보낼 수 있습니다.
두 값을 모두 설정하면 data-callback가 data-login_uri보다 우선 적용됩니다. 두 값을 모두 설정하면 디버깅에 콜백 핸들러를 사용할 때 도움이 될 수 있습니다.
JavaScript
callback를 지정해야 합니다. 팝업 모드는 JavaScript에서 버튼을 렌더링할 때 리디렉션을 지원하지 않습니다. 이 매개변수를 설정하면 login_uri가 무시됩니다.
JS 콜백 핸들러 내에서 JWT를 디코딩하는 방법에 대한 자세한 내용은 반환된 사용자 인증 정보 응답 처리를 참조하세요.
리디렉션 모드
redirect UX 모드를 사용하면 사용자 브라우저의 전체 페이지 리디렉션을 사용하여 로그인 UX 흐름이 실행되며 Google은 POST 요청을 사용하여 이 JWT를 로그인 엔드포인트에 직접 반환합니다.
이 방법은 일반적으로 사용자에게 방해가 되지만 가장 안전한 로그인 방법으로 간주됩니다.
다음을 사용하여 버튼을 렌더링할 때:
- HTML(선택사항)
data-login_uri을 로그인 엔드포인트의 URI로 설정합니다. - JavaScript는 선택적으로
login_uri를 로그인 엔드포인트의 URI로 설정합니다.
값을 제공하지 않으면 Google에서 JWT를 현재 페이지의 URI로 반환합니다.
로그인 엔드포인트 URI
data-login_uri 또는 login_uri를 설정할 때 HTTPS와 절대 URI를 사용합니다.
https://example.com/path를 예로 들 수 있습니다.
HTTP는 개발 중에 localhost(http://localhost/path)를 사용할 때만 허용됩니다.
Google의 요구사항 및 유효성 검사 규칙에 관한 자세한 설명은 보안 자바스크립트 출처 및 리디렉션 URI 사용을 참고하세요.