Google 원탭 표시

사이트에 원탭 프롬프트를 추가하여 사용자가 웹 앱에 가입하거나 로그인할 수 있도록 합니다. HTML 및 자바스크립트를 사용하여 프롬프트를 렌더링하고 맞춤설정합니다.

기본 요건

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

로그인 페이지에 Google 계정으로 로그인 버튼을 추가합니다.

프롬프트 렌더링

One Tap을 표시하려는 모든 페이지에 코드 스니펫을 배치합니다.

HTML

원탭 프롬프트를 표시하여 JWT 사용자 인증 정보를 로그인 엔드포인트로 반환합니다.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

data-login_uri 속성은 웹 앱의 로그인 엔드포인트 URI입니다. Google에서 발급한 ID 토큰과 함께 로그인 엔드포인트로 전송되는 맞춤 데이터 속성을 추가할 수 있습니다.

선택적으로 data-skip_prompt_cookie 속성과 쿠키를 사용하여 콘텐츠를 변경할 수 없는 정적 HTML 페이지에 One Tap 프롬프트가 표시되는지 여부를 제어합니다. 지정된 쿠키가 설정되면 프롬프트가 표시되지 않습니다.

선택적 data-context 속성을 사용하여 프롬프트 제목에 사용되는 텍스트를 변경합니다. 예를 들어 data-context: "signup"은 "로그인"을 "가입"으로 변경합니다.

기본적으로 사용자가 프롬프트 외부를 클릭하면 원탭 프롬프트가 자동으로 닫힙니다. data-cancel_on_tap_outside 속성을 false로 설정하면 이 동작을 사용 중지할 수 있습니다.

지원되는 속성의 전체 목록은 g_id_onload 참조를 확인하세요.

JavaScript

One Tap 프롬프트를 표시하여 JWT 사용자 인증 정보를 브라우저의 자바스크립트 콜백 핸들러로 반환합니다.

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

자바스크립트에서 One Tap 프롬프트를 구성하려면 먼저 initialize() 메서드를 호출해야 합니다. 그런 다음 prompt() 메서드를 호출하여 프롬프트 UI를 표시합니다.

선택적 context 필드를 사용하여 프롬프트 제목에 사용되는 텍스트를 변경합니다. 예를 들어 context: 'signup'은 "로그인"을 "가입"으로 변경합니다.

기본적으로 사용자가 프롬프트 외부를 클릭하면 One Tap 프롬프트가 자동으로 닫힙니다. cancel_on_tap_outside 속성을 false로 설정하면 이 동작을 사용 중지할 수 있습니다.

데이터 옵션의 전체 목록은 idConfiguration 참조를 확인하세요.

프롬프트 상태

자바스크립트 콜백 함수를 사용하여 프롬프트 UI 상태 알림을 수신 대기합니다.

알림은 다음 순간에 전송됩니다.

  • 표시 순간: prompt() 메서드가 호출된 후에 발생합니다. 알림에는 UI가 표시되는지 여부를 나타내는 불리언 값이 포함됩니다.

  • 건너뛴 순간: 자동 취소, 수동 취소 또는 Google에서 사용자 인증 정보를 발급하지 못하는 경우(예: 선택한 세션이 Google에서 로그아웃된 경우) One Tap 프롬프트가 닫힐 때 발생합니다.

    이 경우 다음 ID 공급업체가 있는 경우 계속 진행하는 것이 좋습니다.

  • 해제된 순간: Google에서 사용자 인증 정보를 성공적으로 가져오거나 사용자가 사용자 인증 정보 가져오기 흐름을 중지하려는 경우 발생합니다. 예를 들어 사용자가 로그인 대화상자에 사용자 이름과 비밀번호를 입력하기 시작하면 google.accounts.id.cancel() 메서드를 호출하여 One Tap 프롬프트를 닫고 해제된 순간을 트리거할 수 있습니다.

HTML

data-moment_callback 속성을 사용하여 자바스크립트 콜백 함수를 지정합니다. 알림을 수신하려면 콜백 핸들러가 필요합니다.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

사용자가 로그인하거나 가입할 수 있도록 여러 ID 공급업체와 통신하여 사용 가능한 사용자 인증 정보를 찾을 수 있습니다. 다음 ID 공급업체를 호출할 수 있도록 프롬프트 UI 상태를 알고 싶을 수 있습니다.

JavaScript

콜백 핸들러를 google.accounts.id.prompt에 매개변수로 전달합니다. 여기서는 화살표 함수를 사용하여 알림 업데이트를 처리합니다.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

버튼 및 프롬프트

Google 계정으로 로그인 버튼과 One Tap 프롬프트가 단일 페이지에 함께 표시될 수 있습니다.

HTML

g_id_onload 및 g_id_signin 요소를 모두 포함하여 Google 계정으로 로그인 버튼과 원탭 프롬프트를 모두 표시합니다.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

renderButton() 및 prompt() 함수를 동시에 호출하여 Google 계정으로 로그인 버튼과 원탭 프롬프트를 표시합니다.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

원탭을 가리지 않음

이 섹션은 FedCM이 사용 중지된 경우에만 적용됩니다. FedCM이 사용 설정된 경우 브라우저는 페이지 콘텐츠 위에 사용자 프롬프트를 표시합니다.

최종 사용자가 표시된 모든 정보를 볼 수 있도록 Google 원탭은 다른 콘텐츠로 가려서는 안 됩니다. 그렇지 않으면 경우에 따라 팝업 창이 트리거될 수 있습니다.

페이지 레이아웃과 요소의 Z-색인 속성을 다시 한번 확인하여 Google 원탭이 다른 콘텐츠로 가려지지 않도록 합니다. 테두리의 단일 픽셀만 가려져도 UX 흐름 변경이 트리거될 수 있습니다.

사용자 인증 정보 응답

사용자 인증 정보 응답에는 Google에서 서명한 JWT가 포함됩니다. 응답은 자바스크립트 콜백 함수를 사용하여 브라우저로 반환되거나 로그인 엔드포인트로 리디렉션을 통해 플랫폼으로 반환됩니다.

JS 콜백

HTML 또는 자바스크립트를 사용하여 콜백을 구성합니다.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

예를 들어 handleCredentialResponse는 JWT를 디코딩하고 ID 토큰 필드 중 일부를 콘솔에 출력합니다.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

리디렉션

사용자 인증 정보를 플랫폼의 로그인 엔드포인트로 반환하려면 OAuth 2.0 웹 클라이언트의 승인된 리디렉션 URI 설정에 URL을 추가합니다.

HTML 또는 자바스크립트를 사용하여 리디렉션 URI를 구성합니다.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});