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

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

맞춤설정된 로그인 버튼

사용자가 Google 계정을 선택하고 동의하면 Google은 JSON 웹 토큰 (JWT)을 사용하여 사용자 프로필을 생성합니다. 로그인 및 사용자 환경 중에 발생하는 단계에 관한 개요는 작동 방식을 참고하세요. 맞춤설정된 버튼 이해하기에서는 여러 가지 조건을 검토하고 사용자에게 버튼이 표시되는 방식에 영향을 주는 상태를 변경할 수 있습니다.

기본 요건

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

버튼 렌더링

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 원탭을 표시하려면 다음 단계를 따르세요. 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 라이브러리가 HTML 문서에서 ID 속성이 g_id_onload 또는 g_id_signin가 포함된 클래스 속성 일치하는 요소가 발견되면 버튼이 렌더링되고 자바스크립트로 버튼을 렌더링합니다. 버튼이 두 번 표시되지 않도록 하려면 충돌하는 매개변수가 있을 수 있으므로 HTML 페이지에 이러한 이름과 일치하는 HTML 요소를 포함하지 마세요.

버튼 언어

버튼 언어는 브라우저의 기본값에 따라 자동으로 결정됩니다. Google 세션 사용자의 환경설정을 변경할 수 있습니다. 라이브러리를 로드할 때 src 디렉티브에 hl 매개변수와 언어 코드를 추가하고 HTML에 선택적 data-locale 또는 locale 매개변수 data-locale 또는 JavaScript에 locale를 추가하여 언어를 수동으로 선택할 수도 있습니다.

HTML

다음 코드 스니펫은 프랑스어로 버튼 언어를 표시하는 방법을 보여줍니다. hl 매개변수를 클라이언트 라이브러리 URL에 추가하고 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에서 JSON 웹 토큰 (JWT) 사용자 인증 정보를 반환합니다. 사용자 브라우저에 ID 토큰이라고 하며, 엔드포인트가 있습니다

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

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

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

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