All geek questions in one place

How to use YouTube KEY API in angularjs and view video in playlist?

I want to list a bunch of YouTube videos in a mobile app using angularjs. Preferably, I would like to list all the videos from the playlist / channel for specific users.

I got the API key from the Google Developer Console, but I don’t understand how and where to use it. In this documentation, they only go to the oauth method. https://developers.google.com/youtube/v3/code_samples/javascript#authorizing_requests I tried to use the sample code directly from this documentation only to receive a message that I need to authenticate first.

I would really appreciate help on this. How to authenticate using the api key, and secondly, how to request a video in the playlist.

ps. I am a beginner developer and I am using angularjs and ionic framework for my first training project. I am new to Codeschool courses in css, jquery, javascript, backbone and angular. DS. Thanks!

+5
source share
2 answers

1. How to use the API

If you need a channel video, you need to use the YouTube API V3 . Use youtube.search.list

with parameters:

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

How to find YouTube channel id?

You can find the channel identifier with its channel name http://mpgn.imtqy.com/YTC-ID/

Additional information youtube.search.list right here .

This is a live demonstration .

2. With Javascript?

  • First you need to create a project in console.google.developers .
  • Enable YouTube API V3 API (Enabled).
  • In your account, create a public passkey.

Also, if this is a public application, you might be interested in: How to protect a public API key?

This is the basic code for receiving the video channel:

 <!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. With AngularJS?

Using AngularJS, you need to create a Google service, for example, and you can use this service in your controllers.

Example example: https://gist.github.com/jakemmarsh/5809963 You do not need the authentication part. In this case, it is important to use deferred .

An example in the controller 

 '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 example

 .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; }; }])

You need to add this line to your index.html index

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

Hope this helps!

+14
source

You must use the Google API Client Library for the gapi object gapi be defined and google examples will work. Include this at the bottom of the page:

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

And how to determine the callback that will act with authorization and your logic:

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

In general, according to Google documentation there is

  • The application loads the JavaScript client library.

  • The application refers to its API key, which authenticates the application using Google services.

  • If the application needs access to the user's personal information, it opens a session with the Google authorization server. The auth server opens a dialog box in which the user is asked to allow the use of personal information.

  • The application downloads the API for the Google service.

  • The application initializes a request object (also called a service object), which indicates the data that will be returned by the API.

  • The application executes the request and processes the data returned by the API.

Here is the workflow of the main Google API authorization process.

+1
source

Source: https://habr.com/ru/post/1202283/

More articles:


All Articles