이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Google 계정으로 로그인 버튼 표시

사용자가 웹 앱에 가입하거나 로그인할 수 있도록 사이트에 Google 계정으로 로그인 버튼을 추가합니다. HTML 또는 자바스크립트를 사용하여 버튼과 속성을 렌더링하여 버튼 모양, 크기, 텍스트, 테마를 맞춤설정합니다.

사용자가 Google 계정을 선택하고 동의하면 Google은 JSON 웹 토큰 (JWT)을 사용하여 사용자 프로필을 공유합니다. 로그인 및 사용자 경험과 관련된 단계의 개요는 작동 방식을 참고하세요. 맞춤설정 버튼 이해하기에서는 버튼이 사용자에게 표시되는 방식에 영향을 미치는 다양한 조건과 상태를 검토합니다.

기본 요건

버튼을 로그인 페이지에 추가하기 전에 다음을 완료하세요.

설정에 설명된 단계에 따라 OAuth 동의 화면을 구성하고 클라이언트 ID를 가져옵니다.
클라이언트 라이브러리를 로드합니다.

버튼 렌더링

Google 계정으로 로그인 버튼을 표시하려면 HTML 또는 자바스크립트를 선택하여 로그인 페이지에 버튼을 렌더링합니다.

HTML

HTML을 사용하여 로그인 버튼을 렌더링하고 JWT를 플랫폼의 로그인 엔드포인트로 반환합니다.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></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 참조 페이지를 확인하세요.

자바스크립트

자바스크립트를 사용하여 로그인 버튼을 렌더링하고 JWT를 브라우저의 자바스크립트 콜백 핸들러에 반환합니다.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></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 또는 자바스크립트에서 locale을 추가하여 언어를 직접 선택할 수도 있습니다.

HTML

다음 코드 스니펫은 hl를 클라이언트 라이브러리 URL에 추가하고 data-locale 속성을 프랑스어로 설정하여 버튼 언어를 프랑스어로 표시하는 방법을 보여줍니다.

<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></script>
...
<div class="g_id_signin"
  data-locale="fr">
</div>

자바스크립트

다음 스니펫은 hl를 클라이언트 라이브러리 URL에 추가하고 locale를 프랑스어로 설정한 google.accounts.id.renderButton 메서드를 호출하여 버튼 언어를 프랑스어로 표시하는 예를 보여줍니다.

<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></script>
...
<script>
google.accounts.id.renderButton(
  document.getElementById("buttonDiv"),                
  { locale: "fr" }
);
</script>

사용자 인증 정보 처리

사용자 동의가 제공되면 Google은 ID 토큰으로 알려진 JSON 웹 토큰 (JWT) 사용자 인증 정보를 사용자 브라우저 또는 플랫폼에서 호스팅하는 로그인 엔드포인트에 직접 반환합니다.

JWT를 수신하는 위치는 HTML 또는 자바스크립트를 사용하여 버튼을 렌더링하는지, 팝업 또는 리디렉션 UX 모드를 사용하는지에 따라 다릅니다.

팝업 모드

popup UX 모드를 사용하면 팝업 창에서 로그인 UX 절차를 진행합니다. 이는 일반적으로 사용자에게 방해가 되지 않는 환경이며 기본 UX 모드입니다.

다음을 사용하여 버튼을 렌더링할 때:

HTML: 다음 중 하나를 설정할 수 있습니다.
- data-callback: JWT를 콜백 핸들러로 반환합니다.
- data-login_uri: Google에서 POST 요청을 사용하여 JWT를 로그인 엔드포인트로 직접 전송합니다.
두 값이 모두 설정되면 data-callback이 data-login_uri보다 우선 적용됩니다. 예를 들어 이는 디버깅 중에 콜백 핸들러가 사용될 때 유용할 수 있습니다.
자바스크립트: callback를 설정해야 합니다. 팝업 모드는 자바스크립트에서 버튼을 렌더할 때 리디렉션을 지원하지 않습니다. 이 매개변수를 설정하면 login_uri는 무시됩니다.

JS 콜백 핸들러 내에서 JWT 디코딩에 대한 자세한 내용은 반환된 사용자 인증 정보 응답 처리를 참조하세요.

리디렉션 모드

redirect UX 모드를 사용하면 사용자 브라우저의 전체 페이지 리디렉션을 사용하여 로그인 UX 흐름을 실행하고 Google에서 POST 요청을 사용하여 JWT를 로그인 엔드포인트에 직접 반환합니다. 이 방법은 일반적으로 사용자에게 더 방해가 되지만 가장 안전한 로그인 방법으로 간주됩니다.

다음을 사용하여 버튼을 렌더링할 때:

HTML에서 data-login_uri을 로그인 엔드포인트의 URI로 설정할 수도 있습니다.
자바스크립트는 선택적으로 login_uri을 로그인 엔드포인트의 URI로 설정합니다.

값을 제공하지 않으면 JWT가 현재 페이지의 URI에 반환됩니다.

로그인 엔드포인트 URI

data-login_uri 또는 login_uri를 설정할 때 HTTPS 및 절대 URI를 사용합니다. https://example.com/path를 예로 들 수 있습니다.

HTTP는 개발 중에 localhost를 사용할 때만 허용됩니다. http://localhost/path

Google의 요구사항 및 유효성 검사 규칙에 대한 자세한 설명은 보안 자바스크립트 출처 및 리디렉션 URI 사용을 참고하세요.