时间戳

首页 > 解决方案 > 尝试登录后使用 YoutubeAPI 出错

javascript - 尝试登录后使用 YoutubeAPI 出错

问题描述

我有 index.html 的反应应用程序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script src="https://apis.google.com/js/api.js"></script>
    <script src="https://apis.google.com/js/platform.js"></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>

App.js 我正在尝试登录并获取 youtube 的 api 客户端

import './App.css';
import LeftSideBar from './leftSideBar/LeftSideBar'
import Home from './Home/Home'
import SignIn from './SignIn/SignIn'
import Dashboard from './Dashboard/Dashboard'

import {
    BrowserRouter as Router,
    Switch,
    Route,
} from 'react-router-dom';
import React from 'react';

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            authorized: false
        }
    }

    componentDidMount() {
        const onInit = (auth2 => {
            this.setState(() => ({
                authorized: window.gapi.auth2.getAuthInstance().isSignedIn.get()
            }))
        }).bind(this)

        const onError = err => {
            console.log('error', err)
        }

        window.gapi.load('auth2', function () {
            window.gapi.auth2
                .init({
                    client_id:
                        process.env.REACT_APP_GOOGLE_CLIENT_ID,
                })
                .then(onInit, onError)
        })
    }
    authenticate() {
        return window.gapi.auth2.getAuthInstance()
            .signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
            .then(function() { console.log("Sign-in successful"); },
                  function(err) { console.error("Error signing in", err); });
    }
    loadClient() {
        window.gapi.client.setApiKey(process.env.REACT_APP_GOOGLE_YT_API_KEY);
        return window.gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
            .then(function() { console.log("GAPI client loaded for API"); },
                  function(err) { console.error("Error loading GAPI client for API", err); });
    }
    signIn = () => {
        // const auth2 = window.gapi.auth2.getAuthInstance()
        // auth2.signIn().then(user => {
        //     const profile = user.getBasicProfile()
        //     console.log('Full Name: ' + profile.getName())
        //     console.log('Given Name: ' + profile.getGivenName())
        //     console.log('Family Name: ' + profile.getFamilyName())
        //     console.log('Image URL: ' + profile.getImageUrl())
        //     console.log('Email: ' + profile.getEmail())
      
        //     const id_token = user.getAuthResponse().id_token
        //     console.log('ID Token: ' + id_token)
        //     this.setState(() => ({
        //         authorized: true
        //     }))
        // })
        // window.gapi.auth2.getAuthInstance()
        // .signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
        // .then(() => { console.log("Sign-in successful"); },
        //       (err) => { console.error("Error signing in", err); }
        // )
        // .then(() => {
        //     window.gapi.client.setApiKey(process.env.REACT_APP_GOOGLE_YT_API_KEY);
        //     window.gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
        //     .then(() => { console.log("GAPI client loaded for API"); },
        //           (err) => { console.error("Error loading GAPI client for API", err); });
        // })
        this.authenticate().then(this.loadClient)
    }

    signOut = () => {
        const auth2 = window.gapi.auth2.getAuthInstance()
        auth2.signOut().then(() => { 
            this.setState(() => ({
                authorized: false
            }))
        })
        
    }

    render() {
        return (
            <div className="App">
                <Router>
                    <LeftSideBar
                        authorized={ this.state.authorized }
                        signOut={ this.signOut.bind(this) }
                        signIn={ this.signIn.bind(this) }
                    />
                    <div className="content">
                        <Switch>
                            <Route path="/dashboard">
                                <Dashboard />
                            </Route>
                            <Route path="/signIn">
                                <SignIn signIn={ this.signIn.bind(this) }/>
                            </Route>
                            <Route path="/">
                                <Home />
                            </Route>
                        </Switch>
                    </div>
                </Router>
            </div>
        );
    }
}

export default App;

验证功能时代码崩溃：

GET https://accounts.google.com/o/oauth2/iframerpc?action=issueToken&response_type=token%20id_token&login_hint=AJDLj6JUa8yxXrhHdWRHIV0S13cA6Bo70KdWCw7FlkUDiotfvf4EDwe1ulWoTttq1WBl_4cii-OjhpVzSXdoDL5wJik51F98Gyzc9TGnQBfkcVUu_R6fBV09nxsIenLt1DRkCZM96tEQ&client_id=20176736559-mu75ue3gimbftv2kvildmso7ravgpn5a.apps.googleusercontent.com&origin=http%3A%2F%2Flocalhost%3A3000&scope=openid%20profile%20email&ss_domain=http%3A%2F%2Flocalhost%3A3000 403
{type: "tokenFailed", idpId: "google", error: "server_error"}

我尝试了什么：

  1. 清除浏览器缓存。
  2. 清除Cookies。
  3. 添加可以使用 youtube API 登录的测试用户。

在 mozilla（chrome 中没有）我收到 CORS 错误：

https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.ru.xFQqjEcWHG0.O/m=auth2/rt=j/sv=1/d=1/ ed=1/am=AQ/rs=AGLTcCPC2FcRB9YLvVCRMWCM0s9CW8TZuw/cb=gapi.loaded_0。（请求的资源上不存在“Access-Control-Allow-Origin”标头）。

标签： javascriptreactjsgoogle-apiyoutube-api

解决方案

推荐阅读