0

我正在尝试在 Spotify 应用程序中运行以下代码，但 gapi.client 被认为是未定义的。在chrome中运行时我没有这个问题。有谁知道为什么或如何发生这种情况。

<!doctype html>
<html>
  <head>
    <title>Vidify</title>
  </head>

  <body>
    <!--Add a button for the user to click to initiate auth sequence -->
    <button id="authorize-button" style="visibility: hidden">Authorize</button>
    <script type="text/javascript">

      var clientId = '591751286145-ktngvf2s76uiuuevan6mo1fft0kchl8l.apps.googleusercontent.com';

      var apiKey = 'AIzaSyB0mteDV5vDKFR-iAv4Fx4OC2gp1Yhqe9U';

      var scopes = 'https://www.googleapis.com/auth/youtube';

      function handleClientLoad() {
        console.log('API key provided - authorizing client...');
        // Step 2: Reference the API key
        gapi.client.setApiKey(apiKey);
        gapi.auth.init(checkAuth);
      }

      function checkAuth() {
        console.log('entered checkAuth - authorizing...');
        setTimeout(function() { 
            console.log("requesting auth");
            gapi.auth.authorize({ 
                client_id: clientId, 
                scope: scopes, 
                response_type:'token',
                immediate: true 
            }, handleAuthResult); 
        }, 100); 
      }

      function handleAuthResult(authResult) {
        console.log('received authResult');
        var authorizeButton = document.getElementById('authorize-button');
        if (authResult && !authResult.error) {
          console.log("auth. successful");
          authorizeButton.style.visibility = 'hidden';
          makeApiCall();
        } else {
          console.log('auth failed.');
          authorizeButton.style.visibility = '';
          authorizeButton.onclick = handleAuthClick;
        }
      }

      function handleAuthClick(event) {
        // Step 3: get authorization to use private data
        console.log('retry');
        gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
        return false;

      }

      // Load the API and make an API call.  Display the results on the screen.
        function makeApiCall() {
            console.log("loaded client");
            gapi.client.setApiKey(apiKey);
            // Step 4: Load the Google+ API
            gapi.client.load('youtube', 'v3', function() {
                console.log('youtube API loaded...');
                // Step 5: Assemble the API request
                var qVar = "Kanye West Amazing"
                // changed. added: type
                var request = gapi.client.youtube.search.list({
                    type: 'video',
                    part: 'id',
                    q: qVar
                });
                // Step 6: Execute the API request
                request.execute(function(resp) {

                    console.log(resp);
                    var vid = document.createElement('vid');
                    vid.value = resp.items[0].id.videoId;
                    console.log(vid.value);
                    var youtube_url = "http://www.youtube.com/watch?v=";
                    youtube_url += vid.value;
                    youtube_url += "&rel=0";
                    window.open(youtube_url);
                });
              });
          }
    </script>

    <script src="https://apis.google.com/js/client.js?onload=makeApiCall"></script>

  </body>
</html>

你认为这与加载外部 API 有什么关系，还是只是谷歌 API 很特别 :)

4

0 回答 0