javascript - Google API 客户端 ID 未授权

Question

我正在尝试制作一个应用程序来对 YouTube 视频进行基本搜索。我正在使用 Youtube 数据 API，我去了谷歌开发者控制台并为我的域名创建了一个客户端 ID。

我下载了 Google 在其示例代码部分中提供的 auth.js 和 search.js，并将我的客户端 ID 放入显示“我的客户端 ID”的位置，但应用程序无法运行。我使用了 console.log，似乎我没有通过函数“checkAuth”。

我是不是错过了什么？？这是页面的链接:http://www.vidme.cassandraburnscreative.com/#search

这里是 auth.js 和 search.js 在一起

var OAUTH2_CLIENT_ID = 'my client ID';
var OAUTH2_SCOPES = [
  'https://www.googleapis.com/auth/youtube'
];


googleApiClientReady = function() {
  console.log("googleApiClientReady");
  gapi.auth.init(function() {
    window.setTimeout(checkAuth, 1);
    console.log("gapi.auth.init");
  });
}


function checkAuth() {
  gapi.auth.authorize({
    client_id: OAUTH2_CLIENT_ID,
    scope: OAUTH2_SCOPES,
    immediate: true
  }, handleAuthResult);
  console.log("checkAuth");
}


function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    // Authorization was successful. Hide authorization prompts and show
    // content that should be visible after authorization succeeds.
    $('.pre-auth').hide();
    $('.post-auth').show();
    loadAPIClientInterfaces();
    console.log("Load Interfaces");
  } else {

    $('#login-link').click(function() {
      console.log("nope");
      gapi.auth.authorize({
        client_id: OAUTH2_CLIENT_ID,
        scope: OAUTH2_SCOPES,
        immediate: false
        }, handleAuthResult);
      console.log("HandleAuthResult");
    });
  }
}

function loadAPIClientInterfaces() {
  gapi.client.load('youtube', 'v3', function() {
    handleAPILoaded();
    console.log("handleAPILoaded");
  });
}

function handleAPILoaded() {
  $('#search-button').attr('disabled', false);
}

function search() {
  var q = $('#query').val();
  var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
  });

  request.execute(function(response) {
    var str = JSON.stringify(response.result);
    $('#search-container').html('<pre>' + str + '</pre>');
  });
}

和html

<div class="wrapper">

<div id="buttons">
<p>Search For an Artist:</p>
      <label> <input id="query" placeholder='+ Add Artist' type="text"/>
      <button id="search-button" disabled onclick="search()">Search</button>
      </label>
</div>
    <div id="search-container">
    </div>
</div>

Answer 1

您无需连接或使用 Oauth2 即可通过 YouTube API 搜索内容。 你只需要一个 api key .

示例:

function googleApiClientReady() {
    var apiKey = 'YOUR_API_KEY';

    gapi.client.setApiKey(apiKey);
    gapi.client.load('youtube', 'v3', function() {
        isLoad = true;
    }); 

    request = gapi.client.youtube.search.list({
        q: q,
        part: 'snippet'
     });
    request.execute(function(response) {
        //your code to here
    });
}

不要忘记将此文件添加到您的 index.html 并在之后添加以下行:

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

来自文档 YouTube API