当我使用谷歌你管 API 获取搜索结果时,它给出 403 错误
Posted
技术标签:
【中文标题】当我使用谷歌你管 API 获取搜索结果时,它给出 403 错误【英文标题】:when I used google you tube API get search result it is give 403 error 【发布时间】:2020-08-09 22:27:19 【问题描述】:// 当我收到来自 youtube API 的响应时,它在下面的代码服务和组件中给了我一个 403 错误,它给出了一个带有 404 错误的响应,并显示消息“已超过未经身份验证使用的每日限制。继续使用需要注册。”
export class YoutubeServiceService
constructor(
private http: HttpClient,
@Inject(YOUTUBE_API_KEY) private apiKey: string,
@Inject(YOUTUBE_API_URL) private apiUrl: string
)
search(query: string): Observable<SearchResult[]>
const params: string = [
`q=$query`,
`part=$this.apiKey`,
`part=snippet`,
`type=video`,
`maxResults=8`,
].join('&');
const queryUrl = `$this.apiUrl?$params`;
return this.http.get(queryUrl).pipe(map((response) =>
return <any>response['items'].map((item) =>
console.log('raw items', item);
return new SearchResult(
id: item.id.videoId,
title: item.snippet.title,
description: item.snippet.description,
thumbnailUrl: item.snippet.thumbnailUrl.high.url,
);
);
)
);
//这是一个搜索组件,这里我想搜索输入框中的任何字符串来获取数据
import
Component,
OnInit,
Output,
ElementRef,
EventEmitter,
from '@angular/core';
import SearchResult from '../search-result.model';
import YoutubeServiceService from '../youtube-service/youtube-service.service';
import Observable, fromEvent from 'rxjs';
import map, filter, debounceTime, switchAll ,tap from 'rxjs/operators';
@Component(
selector: 'app-search-box',
template: `<input type="text" class="form-control" placeholder="search"
autofocus >`
)
export class SearchBoxComponent implements OnInit
@Output() loading: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output() results: EventEmitter<SearchResult[]> = new EventEmitter<
SearchResult[]
>();
constructor(private youtube: YoutubeServiceService, private el: ElementRef)
ngOnInit(): void
fromEvent(this.el.nativeElement, 'keyup')
.pipe(
map((e: any) => e.target.value), //extract the value of the input
filter((text: string) => text.length > 1) ,// filter pout if empty
debounceTime(250), //only once every 250s
tap(() => this.loading.emit(true)), //enable loading
map((query: string) => this.youtube.search(query)), //search, discarding old events if new input comes in
switchAll()
)
.subscribe(
(results: SearchResult[]) =>
//on sucess
this.loading.emit(false);
this.results.emit(results);
,
(err: any) =>
//on error
console.log(err);
this.loading.emit(false);
,
() =>
// on completion
this.loading.emit(false);
);
【问题讨论】:
【参考方案1】:在您的 search()
函数中,您似乎将 API 密钥设置为“部分”查询参数。 YouTube 数据 API 参考指定应在“key”查询参数中提供您的 API 密钥。
尝试像这样设置params
字符串:
const params: string = [
`q=$query`,
`key=$this.apiKey`,
`part=snippet`,
`type=video`,
`maxResults=8`,
].join('&');
我假设 YOUTUBE_API_URL
指向 /search 端点,您可以在 https://developers.google.com/youtube/v3/docs/search/list 查看文档。
【讨论】:
以上是关于当我使用谷歌你管 API 获取搜索结果时,它给出 403 错误的主要内容,如果未能解决你的问题,请参考以下文章
在 IONIC 中使用谷歌 API 比较多个地址时如何获取关闭地址
如何使用谷歌地图 API 获取阿联酋国家/地区的邮政编码区域?