使用Google的API通过React创建YouTube播放列表

时间:2018-11-26 21:59:16

标签: javascript node.js reactjs youtube youtube-api

我想在用户帐户上创建一个YouTube播放列表,但是我一直在努力验证对YouTube v3 api的POST身份。

我将从显示这个问题有多远开始。


YouTube API文档

Youtube API Documentation提供了有关创建播放列表的详细信息,并且在API Explorer中有一个有效的示例

我在请求正文中输入了以下代码:

{
  "snippet":
  {
    "title":"Test Playlist"
  }
}

这成功在我的YouTube帐户上创建了具有相同标题的播放列表。因此,我可以看出,标题是体内必不可少的,并且需要使用以下一种范围的OAuth 2.0身份验证(如果未启用则会显示错误):youtube,youtube.force-ssl,youtubepartner。

第一次尝试做出反应

我尝试的第一件事与此类似:

fetch('/youtube/v3/playlists', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': 'Bearer' + api.youtube,
    },
    body: JSON.stringify({
      "snippet":
      {
      "title":"Test"
      }
    })
  }).then(response => response.json()).then(data => {
    console.log(data)
  })

api.youtube包含我的YouTube api密钥。 此格式的大多数格式来自我在同一程序中使用的另一个API,用于从Spotify中获取数据有效。 我从中得到的响应将显示“登录失败”或“身份验证错误”(类似这些内容)

无论如何,这很重要,因为我知道我的第一个障碍是获得身份验证。

身份验证

YouTube API文档包含名为Implementing OAuth 2.0 Authorization的指南,我遵循了client side web apps的指南。 我注意到的第一件事是他们正在使用一个库,我在npm上的googleapis下找到了它并安装了它。 当我尝试在React中使用

调用它时
const {google} = require('googleapis');

我不会深入了解该错误,但做出反应说“无法将未定义的对象转换为对象”,并发现了一个问题,该问题说googleapis是针对服务器端而非客户端的,我尝试构建react应用并将其放入在herokuapp上,但出现了相同的错误。有人建议在npm(这是googleapis的节点包装程序)上使用gapi-client

接下来要做的是尝试在npm页面上的示例,它与用于配置客户端对象的google示例非常相似。我有它,所以导入部分和功能在我的app.js顶部,然后在按下按钮后激活gapi.load部分(这可能是无用的信息,但有w / e)

import gapi from 'gapi-client';

//On load, called to load the auth2 library and API client library.
gapi.load('client:auth2', initClient);

function initClient() {
  gapi.client.init({
    discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
    clientId: 'YOUR_CLIENT_ID',
    scope: 'https://www.googleapis.com/auth/drive.metadata.readonly'
  }).then(function () {
    // do stuff with loaded APIs
    console.log('it worked');
  });
}

我从API控制台复制了我的客户端ID,这是我得到的确切响应:

FireFox

  

with源的加载失败   “ https://apis.google.com//scs/apps-static//js/k=oz.gapi.en.WcpMzqgmJZU.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNsTS1p4dx0iMhlrwEpiaXw4iMjOg/cb=gapi.loaded_0”。

Chrome

  

获取   https://apis.google.com//scs/apps-static//js/k=oz.gapi.en.WcpMzqgmJZU.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNsTS1p4dx0iMhlrwEpiaXw4iMjOg/cb=gapi.loaded_0   net :: ERR_ABORTED 404


就我所知,我不知道该怎么办,因此非常感谢您的帮助。我希望这不会太令人费解,但我已经尽力尽可能清楚地传达了我的问题。

1 个答案:

答案 0 :(得分:0)

因此,我能够授权YouTube API并创建播放列表。 我有一个托管在localhost:8888上的后端(无关紧要是什么托管)。

这是我放入server.js文件(用于后端)的示例代码

var express = require('express');
var app = express();
var passport = require('passport');
app.use(passport.initialize());
var YoutubeV3Strategy = require('passport-youtube-v3').Strategy;

passport.use(new YoutubeV3Strategy({
    clientID: YOUR_CLIENT_ID,
    clientSecret: YOUR_CLIENT_SECRET,
    callbackURL: 'http://localhost:8888/redirect',
    scope: ['https://www.googleapis.com/auth/youtube']
},
function (accessToken, refreshToken, profile, cb) {
    var user = {
        accessToken: accessToken,
        refreshToken: refreshToken
    };
    return cb(null, user)
}
));

passport.serializeUser(function(user, cb) {
    cb(null, user);
});

passport.deserializeUser(function(obj, cb) {
    cb(null, obj);
});

app.get('/authenticate', passport.authenticate('youtube'))
app.get('/redirect', passport.authenticate('youtube', { failureRedirect: '/login' }),
function(req, res) {
    res.redirect('http://localhost:3000' + '?access_token=' + req.user.accessToken)
})

app.listen(8888)

这是使用Passport.js为我做oauth,可以在网站上找到很多文档。

在反应中,我有一个按钮,它将打开localhost:8888 / authenticate,然后它将重定向回我的应用程序。如果您使用的是此方法,则需要确保在Google API凭据上,您的javascript来源为http://localhost:8888,重定向URI为http://localhost:8888/redirect,并具有正确的范围和应用程序类型。

这是我在app.js(反应式)中用于执行POST的功能

getAPIdata() {
    let parsed = queryString.parse(window.location.search);
    let accessToken = parsed.access_token
    fetch('https://www.googleapis.com/youtube/v3/playlists?part=snippet', {
        method: 'POST',
        headers: {
            'Content-type': 'application/json',
            'Authorization': 'Bearer ' + accessToken,
        },
        body: JSON.stringify({
            'snippet':
            {
                'title':this.state.inputTitle
            }
        })
    }).then(response => response.json()).then(data => {
        console.log(data)
        window.alert('https://www.youtube.com/playlist?list=' + data.id)
    })
}

实际上我对第一次授权不正确的第一次尝试基本上是正确的。

以下是一些帮助我解决问题的资料来源:

希望这对某人有帮助,您只需更改策略即可使用我在server.js中使用的相同代码来验证大多数服务。

可以here找到我应用程序的实时版本。在控制台中,它显示了POST请求的响应,如果您有任何问题,这应该会有所帮助。我知道警报是不良的ui,但这不是预期的用途。

感谢您的阅读:)