Создание списка воспроизведения YouTube с помощью React с использованием API Google - PullRequest
Новая
       5

Создание списка воспроизведения YouTube с помощью React с использованием API Google

0 голосов
/ 27 ноября 2018

Я хотел бы создать плейлист YouTube в учетной записи пользователя, но я изо всех сил пытался аутентифицировать POST в API YouTube v3.

Начну с того, как далеко я продвинулся с этой проблемой..

Документация API YouTube

Документация API Youtube содержит подробную информацию о создании списка воспроизведения и рабочий пример в API Explorer * 1011.*

Я ввел следующий код в тело запроса: 

{
  "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 содержит мой API-ключ YouTube.Большая часть форматирования для этого была получена от другого API, который у меня есть в той же программе, для получения данных от spotify, который работает.Ответ, который я получил от этого, сказал бы: «Ошибка входа в систему» ​​или «Ошибка аутентификации» (что-то в этом роде)

В любом случае, это важно, потому что я знаю, что моим первым препятствием является получение аутентификации.

Аутентификация

Документация по API YouTube содержит руководство под названием Реализация авторизации OAuth 2.0 Я следовал руководству по клиентским веб-приложениям .Первое, что я заметил, это то, что они используют библиотеку, я нашел это на npm под googleapis и установил.Когда я попытался вызвать это в React, используя 

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

, я не буду углубляться в ошибку, но отреагировал, сказав: «Не удалось преобразовать неопределенное в объект», и обнаружил проблему, в которой говорилось, что googleapis предназначен дляна стороне сервера, а не на стороне клиента, я попытался создать приложение реакции и поместить его в herokuapp, но получил ту же ошибку.Кто-то еще предложил использовать gapi-client на npm, который является оболочкой узла для googleapis.

Следующее, что я сделал, это попробовал пример на странице npm, которая очень похожа на GoogleПример для настройки объекта клиента.У меня это есть, поэтому часть импорта и функция находятся в верхней части моего app.js, а затем часть gapi.load активируется после нажатия кнопки (это может быть бесполезной информацией, но с е) 

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, и это точный ответ, который я получил:

FireFox

Загрузка не удалась для с источником «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”.

Хром

GET 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 голосов
/ 01 декабря 2018

Итак, я смог авторизовать API YouTube и создать плейлист.У меня есть серверная часть, размещенная на 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и тогда он будет перенаправлен обратно в мое приложение.Если вы используете это, вам нужно убедиться, что в ваших учетных данных API Google у вас есть источник 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 для аутентификации большинства сервисов, просто изменив стратегию.

Живая версия моего приложения может быть найдена здесь .В консоли он показывает ответ на запрос POST, это должно помочь, если у вас есть какие-либо проблемы.Я знаю, что предупреждение плохое, но это не было предназначением.

Спасибо за чтение:)

...