Youtube api 使用第三方登陆认证 OAuth 2.0 （WEB）

1. 项目原因，需要撸一遍 Google Youtube API ，然后测试接入第三方客户端的可能性。所以硬着头皮，打开 youtube data api v3 ，好吧全是英文，慢慢一行行看吧。从 google console 平台创建 APP_KEY 和 Client_id ,domain服务器域名添加绑定，再到基本的APP_KEY拼接简单搜索调用请求，一路顺畅……

2. 然后，然后，卧槽，坑来了。内容太多，英文水平又可怜，好多都是描述半截就没了，需要带用户认证的请求，一直没搞懂怎么请求，然后终于找到了一个页面：

https://developers.google.com/youtube/v3/guides/auth/client-side-web-apps

虽然非常长，但是一路看下来，受益匪浅，但前提必须选到 OAUTH 2.0 ENDPOINTS ，因为第一个选项卡是不需要签名的。

3. 基本思路，和谷歌账号第三方登陆差不多，通过引用api 配置client_id实现谷歌账号的第三方登录，然后重定向一个绑定好的域名，然后在这个域名后缀的参数中获取access_token，然后就可以拿着这个access_token去请求youtube数据了。

4. 具体操作：

（1）谷歌第三方授权登录（JS）：

function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': '583441793114-apixxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
                'redirect_uri': 'http://api.xxx.com',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}
oauthSignIn();

（2）出现界面：（因为我以前登陆过，所以直接选中账号后，点击账号，就重定向我绑定的域名xxxx.com）

（3）重定向跳转页面到xxx.com后，网页地址栏，我绑定的域名xxx.com#后面就会出现一大堆参数，就说明授权成功，然后JS获取参数即可

function getAccessToken(){
			var queryString = location.hash.substring(1);

			var params = {};
			var regex = /([^&=]+)=([^&]*)/g, m;
			while (m = regex.exec(queryString)) {
			  params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
			  // Try to exchange the param values for an access token.
			  exchangeOAuth2Token(params);
			}

			/* Validate the access token received on the query string. */
			function exchangeOAuth2Token(params) {
			  var oauth2Endpoint = 'https://www.googleapis.com/oauth2/v3/tokeninfo';
			  if (params['access_token']) {
			    var xhr = new XMLHttpRequest();
			    xhr.open('POST', oauth2Endpoint + '?access_token=' + params['access_token'],true);
			    xhr.onreadystatechange = function (e) {
	
			      var response = JSON.parse(e.currentTarget.response);
			      // Verify that the 'aud' property in the response matches YOUR_CLIENT_ID.
			      console.log(response);
			      if (xhr.readyState == 4 &&
			          xhr.status == 200 &&
			          response['aud'] &&
			          response['aud'] == '583441793114-api36q9s2611f8e7d2ja8ljhd8eu9num.apps.googleusercontent.com') {
			        localStorage.setItem('oauth2-access-token', JSON.stringify(params) );
			    
			      } else if (xhr.readyState == 4) {
			        console.log('There was an error processing the token, another ' +
			                    'response was returned, or the token was invalid.')
			      }
			    };
			    xhr.send(null);
			  }
			}
		}
		getAccessToken();

（4）把对象化的数据格式化存在本地，方便其他页面调用，该返回数据格式：

此刻，就拿到 access_token 啦，离成功终于不远啦！

（5）再另外一个页面，通过拿到本地存储的access_token请求当前用户的节目频道

var obj = JSON.parse(localStorage.getItem('oauth2-access-token'));
getData();

function getData(){
    $.get("https://www.googleapis.com/youtube/v3/channels", { 
        'part': "snippet,contentDetails,brandingSettings,topicDetails,auditDetails", 
        'mine': true,
        'access_token': obj.access_token,
        'maxResults': 20
    },function(data){
        console.log(data);
   	});
}

打印出来数据格式为：

ok ！大功告成，可以访问Youtube个人中心的的频道信息了！功夫不负有心人，学好英语，真心很重要。至于API的具体使用，以及配合Youtube播放器API的使用，我将在下篇博文中揭露 , 敬请期待吧

Youtube api 使用第三方登陆认证 OAuth 2.0 （WEB）

猜你喜欢