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>