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

Question

我想在一个用户帐户上创建一个 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 的指南。 我注意到的第一件事是他们正在使用一个库，我在 googleapis 下的 npm 上找到了它并安装了它。 当我尝试在 React 中调用它时使用

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

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

接下来我尝试了 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，这是我得到的确切响应：

火狐

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”。

铬

获取 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 净::ERR_ABORTED 404

---

就我所知，我不知道从这里做什么，所以非常感谢任何帮助。我希望这不会太令人费解，但我已尝试尽可能清楚地表达我的问题。

Answer 1

所以我能够授权 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 (react) 中使用的函数来进行 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)
    })
}

实际上我第一次尝试时大部分是正确的，我只是授权不正确。

以下是帮助我制定解决方案的几个来源：

• Passport.js oauth tutorial
• Googles OAuth 2.0 Playground
• Passport.js Documentation
• Passport.js facebook oauth example

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

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

感谢阅读:)