사이트에 'Google 계정으로 로그인' 버튼을 추가하여 사용자가 웹 앱에 가입하거나 로그인할 수 있도록 합니다. HTML 또는 JavaScript를 사용하여 버튼과 속성을 렌더링하여 버튼 모양, 크기, 텍스트, 테마를 맞춤설정합니다.
사용자가 Google 계정을 선택하고 동의를 제공하면 Google은 JSON 웹 토큰 (JWT)을 사용하여 사용자 프로필을 공유합니다. 로그인 및 사용자 환경 중에 발생하는 단계에 대한 개요는 작동 방식을 참고하세요. 맞춤설정된 버튼 이해하기에서는 사용자에게 버튼이 표시되는 방식에 영향을 미치는 다양한 조건과 상태를 검토합니다.
기본 요건
설정에 설명된 단계에 따라 OAuth 동의 화면을 구성하고, 클라이언트 ID를 가져오고, 클라이언트 라이브러리를 로드합니다.
버튼 렌더링
'Google 계정으로 로그인' 버튼을 표시하려면 로그인 페이지에서 버튼을 렌더링하는 데 HTML 또는 JavaScript를 선택하면 됩니다.
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를 사용하여 로그인 버튼을 렌더링하고 JWT를 브라우저의 JavaScript 콜백 핸들러에 반환합니다.
<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 문서에서 파싱합니다. 일치하는 요소가 발견되면 JavaScript로 버튼을 렌더링했는지 여부와 관계없이 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>
자바스크립트
다음 코드 스니펫은 클라이언트 라이브러리 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은 ID 토큰이라고 하는 JSON 웹 토큰 (JWT) 사용자 인증 정보를 사용자의 브라우저 또는 플랫폼에서 호스팅하는 로그인 엔드포인트로 직접 반환합니다.
JWT를 수신할 위치는 HTML 또는 JavaScript를 사용하여 버튼을 렌더링하는지, 팝업 또는 리디렉션 UX 모드를 사용하는지에 따라 달라집니다.
팝업 모드
popup UX 모드를 사용하면 팝업 창에서 로그인 UX 흐름이 실행됩니다. 이는 일반적으로 사용자에게 덜 방해가 되는 환경이며 기본 UX 모드입니다.
다음을 사용하여 버튼을 렌더링하는 경우:
HTML
다음 중 하나를 설정할 수 있습니다.
data-callback를 사용하여 JWT를 콜백 핸들러에 반환합니다.- Google이 POST 요청을 사용하여 로그인 엔드포인트로 JWT를 직접 전송하도록
data-login_uri를 설정합니다.
두 값이 모두 설정된 경우 data-callback이 data-login_uri보다 우선합니다. 디버깅을 위해 콜백 핸들러를 사용하는 경우 두 값을 모두 설정하는 것이 유용할 수 있습니다.
자바스크립트
callback를 지정해야 합니다. 팝업 모드는 JavaScript에서 버튼을 렌더링할 때 리디렉션을 지원하지 않습니다. 이 매개변수를 설정하면 login_uri이 무시됩니다.
JS 콜백 핸들러 내에서 JWT를 디코딩하는 방법에 관한 자세한 내용은 반환된 사용자 인증 정보 응답 처리를 참고하세요.
리디렉션 모드
redirect UX 모드를 사용하면 사용자의 브라우저를 전체 페이지로 리디렉션하여 로그인 UX 흐름이 실행되고 Google은 POST 요청을 사용하여 JWT를 로그인 엔드포인트로 직접 반환합니다.
일반적으로 사용자에게 더 침해적인 환경이지만 가장 안전한 로그인 방법으로 간주됩니다.
다음을 사용하여 버튼을 렌더링하는 경우:
- HTML에서 선택적으로
data-login_uri를 로그인 엔드포인트의 URI로 설정합니다. - JavaScript: 선택적으로
login_uri을 로그인 엔드포인트의 URI로 설정합니다.
값을 제공하지 않으면 Google에서 현재 페이지의 URI로 JWT를 반환합니다.
로그인 엔드포인트 URI
data-login_uri 또는 login_uri을 설정할 때는 HTTPS와 절대 URI를 사용하세요.
예를 들면 https://example.com/path입니다.
HTTP는 개발 중에 localhost를 사용하는 경우에만 허용됩니다(http://localhost/path).
Google의 요구사항 및 유효성 검사 규칙에 대한 자세한 내용은 보안 JavaScript 출처 및 리디렉션 URI 사용을 참고하세요.