Google API 客户端 ID 未授权

Question

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

我下载了谷歌示例代码部分的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密钥。

示例：

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