JavaScript API 사용

원하는 경우 JavaScript 코드만 사용하여 원탭 메시지를 트리거하거나 'Google 계정으로 로그인' 버튼을 렌더링할 수 있습니다.

JavaScript에서 원탭 메시지를 구성하려면 먼저 initialize() 메서드를 호출해야 합니다. 그런 다음 prompt() 메서드를 호출하여 프롬프트 UI를 표시합니다. 다음 코드 스니펫을 참고하세요.

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

프롬프트 UI 상태 알림을 수신하려면 prompt() 메서드에 콜백 함수를 제공합니다. 다음 코드 스니펫을 참고하세요.

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

아래의 코드 예는 JavaScript에서 원탭 및 Google 계정으로 로그인 버튼을 모두 렌더링하는 방법을 보여줍니다.

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