1。如何使用API

Question

我想使用angularjs在我的移动应用中列出一堆来自YouTube的视频。我希望列出用户/频道特定播放列表的所有视频。

我从Google Developer Console获得了API KEY，但我不知道如何以及在何处使用它。在本文档中，他们只讨论了oauth方法。 https://developers.google.com/youtube/v3/code_samples/javascript#authorizing_requests 我尝试直接使用该文档中的示例代码来获取一条消息，说我必须首先进行身份验证。

我真的很感激一些帮助。如何使用api密钥进行身份验证，其次如何将请求发送到播放列表中。

PS。我是一名新手开发人员，我正在使用angularjs和离子框架进行我的第一个学习项目。我是新出的Codeschool的css，jquery，javascript，backbone和angular的课程。 DS。谢谢！

Answer 1

1。如何使用API

如果您想要频道的视频，则需要使用YouTube API V3。使用youtube.search.list

参数：

part=id, snippet
channelId=ID OF THE CHANNEL
order=date
type=video

如何查找YouTube频道的ID？

您可以在http://mpgn.github.io/YTC-ID/

的频道名称中找到频道的ID

youtube.search.list右here的更多信息。

这是 live demo 。

2。用Javascript？

首先，您需要在console.google.developers中创建项目。
启用API YouTube API V3（设置为开启）。
在凭据部分中，创建公共访问密钥。

此外，如果它是公共应用，您可能会感兴趣：How to protect my public API key ?

这是获取频道视频的基本代码：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <script>

function googleApiClientReady() {

    var apiKey = 'your api key';

    gapi.client.setApiKey(apiKey);
    gapi.client.load('youtube', 'v3', function() {

        request = gapi.client.youtube.search.list({
            part: 'snippet',
            channelId: 'UCqhNRDQE_fqBDBwsvmT8cTg',
            order: 'date',
            type: 'video'

        });

        request.execute(function(response) {
                console.log(response);

        });
    });

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

3。使用AngularJS？

使用AngularJS，您需要创建一项服务＆＃39; google＆＃39;例如，您可以在控制器中使用该服务。

示例示例：https://gist.github.com/jakemmarsh/5809963 您不需要具有身份验证的部分。在这种情况下，使用deferred非常重要。

控制器

中的示例

'use strict';

function init() {
    window.initGapi(); // Calls the init function defined on the window
}
angular.module('team')
    .controller('VideosCtrl', function ($scope, $window, $sce, googleService) {

        $window.initGapi = function() {
            $scope.$apply($scope.getChannel);
        };

        $scope.getChannel = function () {
            googleService.googleApiClientReady().then(function (data) {
                $scope.channel = data;
            }, function (error) {
                console.log('Failed: ' + error)
            });
        };
    });

服务 googleService

中的示例

.service('googleService', ['$http', '$q', function ($http, $q) {

    var deferred = $q.defer();
    this.googleApiClientReady = function () {
        gapi.client.setApiKey('YOU API KEY');
        gapi.client.load('youtube', 'v3', function() {
            var request = gapi.client.youtube.playlistItems.list({
                part: 'snippet',
                playlistId: 'PLila01eYiSBjOtR8oqXkY0i5c1QS6k2Mu',
                maxResults: 8
            });
            request.execute(function(response) {
                deferred.resolve(response.result);
            });
        });
        return deferred.promise;
    };
}])

您需要将此行添加到index.html

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

希望它对你有所帮助！

Answer 2

您必须使用Google APIs Client Library才能定义gapi对象，并且Google的示例将有效。将其包含在页面底部：

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

然后定义将使用授权和逻辑进行的回调：

googleApiClientReady = function() {
  gapi.auth.init(function() {
    // Other code following the example
  });
}

一般来说，Google documentation有

应用程序加载JavaScript客户端库。



该应用程序引用其API密钥，该密钥使用Google服务对应用程序进行身份验证。



如果应用程序需要访问用户的个人信息，则会打开与Google身份验证服务器的会话。 auth服务器打开一个对话框，提示用户授权使用个人信息。



该应用程序会加载Google服务的API。



应用程序初始化一个请求对象（也称为服务对象），该对象指定API返回的数据。



应用程序执行请求并处理API返回的数据。

以下是基本Google API授权流程的working example

如何在angularjs中使用API KEY和在播放列表中列出视频？

2 个答案:

1。如何使用API

2。用Javascript？

3。使用AngularJS？

如何在angularjs中使用API​​ KEY和在播放列表中列出视频？

2 个答案:

1。如何使用API​​

2。用Javascript？

3。使用AngularJS？

如何在angularjs中使用API KEY和在播放列表中列出视频？

1。如何使用API