Javascript 使用Google'；s API

我想在用户帐户上创建YouTube播放列表，但我很难验证YouTube v3 api的帖子

我将首先展示我在这个问题上取得了多大进展

---

YouTube API文档 提供了有关创建播放列表的详细信息，并在中提供了一个工作示例

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

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

这成功地在我的YouTube帐户上创建了一个具有相同标题的播放列表。因此，从这一点我可以看出，正文中需要一个标题，它需要OAuth 2.0身份验证（如果未启用，将显示一个错误），使用一个作用域：youtube、youtube.force-ssl、youtube-Partner

第一次尝试反应 我尝试的第一件事与此类似：

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文档包含一个名为“我遵循指南”的指南。 我注意到的第一件事是他们正在使用一个库，我在googleapis下的npm上找到了这个库并安装了它。 当我试着打电话进来的时候

const {google} = require('googleapis');

我不会深入讨论错误，但react说“不能将未定义的转换为对象”，并发现一个问题，即googleapis是为服务器端而不是客户端设计的，我尝试构建react应用程序并将其放在herokuapp上，但得到了相同的错误。还有人建议在npm上使用，npm是googleapis的节点包装器

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

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

FireFox

加载具有源的的的失败 “”

Chrome

得到 net：：ERR_中止404

---

---

这是我所能得到的，我不知道从这里该做什么，所以非常感谢任何帮助。我希望这不会太复杂，但我已经尽可能清楚地表达了我的问题。

因此我能够授权YouTube API并创建播放列表。 我有一个后端托管在localhost:8888上（react托管在什么上并不重要）

下面是我放在server.js文件中的示例代码（用于后端）

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

在react中，我有一个按钮将打开localhost:8888/authenticate，然后重定向回我的应用程序。如果您正在使用它，您需要确保在您的googleapi凭证上有javascript源代码as和重定向URI as以及正确的作用域和应用程序类型

这是我在app.js（react）中用来发布帖子的函数

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中使用的代码，通过更改策略来验证大多数服务

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

感谢阅读：）

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)

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)
    })
}