YouTube 数据 API 查询量激增

Posted 2023-02-22

【中文标题】YouTube 数据 API 查询量激增

【英文标题】：Massive spike in YouTube Data API queries

【发布时间】：2020-10-02 08:16:05

【问题描述】：

我注意到我达到了 YouTube 数据 API 的 10,000 个单位配额限制，这似乎不正确，因为我只是为我的应用提取播放列表视频。 Here's what I'm talking about.

我检查了谷歌开发者的控制台，发现我的单位使用率正在上升，所以我从 heroku 中删除了应用程序并获得了一个新密钥，它似乎已经停止了。这是使用 API 的代码。

import React,  Component  from 'react'
import  gapi  from 'gapi-script';
import '../css/YouTube.css'
import Animated from "react-animated-css";
import Spinner from 'react-bootstrap/Spinner'
import Button from 'react-bootstrap/Button'
import  FiArrowUpCircle  from "react-icons/fi";

export default class YouTube extends Component 
    constructor(props)
        super(props);
        this.state = 
            videos: [],
            loading: true
        ;
        this.loadClient = this.loadClient.bind(this);
        this.execute = this.execute.bind(this);
        this.swap = this.swap.bind(this)
    

    componentDidMount()   
        gapi.load("client:auth2", function() 
            gapi.auth2.init(client_id: "Placeholder client id");
            ); 
        this.loadClient().then(this.execute).then((array) => 
            for (let i=0; i < array.length; i++)
                array[i] = `https://www.youtube.com/embed/$array[i]`;
            
            this.setState(videos: array, loading: false)
        );        
    

    swap(i1,i2)
        let tempVids = this.state.videos;
        let link1 = tempVids[i1],
        link2 = tempVids[i2];
        tempVids[i1] = link2;
        tempVids[i2] = link1;
        this.setState(videos: tempVids, loading: false)

    

    loadClient()
        gapi.client.setApiKey("old api key");
        return 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); );
    

    execute()
        return gapi.client.youtube.playlistItems.list(
            "part": [
                "snippet"
            ],
            "playlistId": "UUvgfXK4nTYKudb0rFR6noLA"
            )
                .then(function(response, array=[]) 
                        let videos = response.result.items;
                        for (let video of videos)
                            let id = video.snippet.resourceId.videoId;
                            array.push(id)
                        
                        return array;
                    ,
                    function(err)  console.error("Execute error", err););
    

    render() 
        return (
            <div>
                <div className='load'>
                    <>this.state.loading ? <Spinner animation="border" role="status" variant='light'></Spinner> : <div></div></>
                </div>
                <Animated animationIn='fadeInLeft'>
                    <div class='videos'>
                            <iframe className='primary' title='0'   src=this.state.videos[0] frameBorder="0" allow="accelerometer; autoplay; 
                            encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                            <a rel="noopener noreferrer" target="_blank" href='https://www.youtube.com/user/UFC/videos'><h2>More Videos</h2></a>
                            <hr></hr>
                            <div className='bottom'>
                                <div className='secondary'>
                                    <iframe className='primary' title='1'   src=this.state.videos[1] frameBorder="0" allow="accelerometer; autoplay; 
                                    encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                                    <Button onClick=this.swap.bind(this,0, 1) variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>' '
                               </div>
                               <div className='secondary'>
                                    <iframe className='primary' title='2'   src=this.state.videos[2] frameBorder="0" allow="accelerometer; autoplay; 
                                    encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                                    <Button onClick=this.swap.bind(this,0, 2) variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>' '
                               </div>
                               <div className='secondary'>
                                    <iframe className='primary' title='3'   src=this.state.videos[3] frameBorder="0" allow="accelerometer; autoplay; 
                                    encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                                    <Button onClick=this.swap.bind(this,0, 3) variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>' '
                               </div>
                               <div className='secondary'>
                                    <iframe className='primary' title='4'   src=this.state.videos[4] frameBorder="0" allow="accelerometer; autoplay; 
                                    encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                                    <Button onClick=this.swap.bind(this,0, 4) variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>' '
                               </div>
                            </div>
                    </div>
                </Animated>
            </div>
        )
    

但是我宁愿这些尖峰没有发生，在使用我的新密钥并重新部署到 heroku 之前如何防止这些尖峰发生？

【问题讨论】：

您确定没有任何逻辑会意外地破坏 API 吗？还是很多用户？

这是一个个人项目，所以很多用户是不可能的。我来看看逻辑。

我了解到我真的不应该在前端使用 API 密钥，我会将 API 请求移动到节点服务器，看看问题是否得到解决。

【参考方案1】：

我将所有 API 内容隐藏在 Node 服务器和环境变量中。我将服务器部署到 heroku 并从前端的服务器获取。这解决了这个问题。