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的使用,我将在下篇博文中揭露 , 敬请期待吧