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

사용자가 웹 앱에 가입하거나 로그인할 수 있도록 사이트에 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 Tap을 표시하려면 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 세션 사용자의 환경설정에 따라 자동으로 결정됩니다. 라이브러리를 로드할 때 src 디렉티브에 hl 매개변수와 언어 코드를 추가하고 HTML에 선택적 data-locale 또는 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를 콜백 핸들러에 반환합니다.
  • data-login_uri: Google이 POST 요청을 사용하여 로그인 엔드포인트로 JWT를 직접 전송합니다.

두 값이 모두 설정된 경우 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에서 JWT를 현재 페이지의 URI로 반환합니다.

로그인 엔드포인트 URI

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

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

Google의 요구사항 및 유효성 검사 규칙에 관한 자세한 내용은 안전한 JavaScript 출처 및 리디렉션 URI 사용을 참고하세요.