BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] gapiが定義されていない - gapi.auth2.initでGoogleサインインができない問題

2022-02-04 05:52:08

質問

Googleサインインを実装し、ユーザーのプロファイル情報を取得しようとしています。 エラーが発生します。Uncaught ReferenceError: gapi is not defined. なぜでしょうか？ 

<!doctype html>
<html>
<head>      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
    <script type="text/javascript">
    $(function(){
        gapi.auth2.init({
            client_id: 'filler_text_for_client_id.apps.googleusercontent.com'
        });
    });
</head>
<body>
</body>
</html>

解決方法は？

があるために起こります。 async と defer 属性で指定します。 gapi というスクリプトタグの後に読み込まれます。 gapi.auth2.init ...

を待つために gapi このコードを実行する前に、次のようにscriptタグでonloadクエリパラメータを使用することができます。 

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
<script>
window.onLoadCallback = function(){
  gapi.auth2.init({
      client_id: 'filler_text_for_client_id.apps.googleusercontent.com'
    });
}
</script>

また、多くの場所で必要な場合は、プロミスを使用してより良い構造にすることができます。 

// promise that would be resolved when gapi would be loaded
var gapiPromise = (function(){
  var deferred = $.Deferred();
  window.onLoadCallback = function(){
    deferred.resolve(gapi);
  };
  return deferred.promise()
}());

var authInited = gapiPromise.then(function(){
  gapi.auth2.init({
      client_id: 'filler_text_for_client_id.apps.googleusercontent.com'
    });
})


$('#btn').click(function(){
  gapiPromise.then(function(){
    // will be executed after gapi is loaded
  });

  authInited.then(function(){
    // will be executed after gapi is loaded, and gapi.auth2.init was called
  });
});

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します