如何使用 Angular 8.0.2 隐藏 API 密钥

Question

>我正在尝试调用twitch API。要调用此 api，我们需要指定一个用户密钥。如何在代码中隐藏密钥？我不知道该怎么做。

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.2 (cli-only)
@angular-devkit/core         8.0.2 (cli-only)
@angular-devkit/schematics   8.0.2 (cli-only)
@schematics/angular          8.0.2 (cli-only)
@schematics/update           0.800.2 (cli-only)
rxjs                         5.5.12

在我的应用程序.组件.ts 文件中

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaderResponse, HttpHeaders, HttpResponse, HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'TwitchApp';
twitch_api_key:string = 'test';
twitch_api_Url:string = 'https://api.twitch.tv/helix/users?id=44322889';
limit:string = '10';
constructor(private http: HttpClient,){}
ngOnInit(){
this.request();
}
request(){
let header = new HttpHeaders({
'Client-ID': this.twitch_api_key
})
var options = {headers: header}
this.http.get(this.twitch_api_Url,options).subscribe(
res => {
console.log(res)
},
(err: HttpErrorResponse) => {
console.log(err.error);
console.log(err.name);
console.log(err.message);
console.log(err.status);
}
)
}
}

在主要.js在网络浏览器中

constructor(http) {
this.http = http;
this.title = 'TwitchApp';
this.twitch_api_key = 'test';
this.twitch_api_Url = 'https://api.twitch.tv/helix/users?id=44322889';
this.limit = '10';
}

谢谢

Answer 1

使用代理，您会遇到相同的问题。由于代理只是充当客户端和您的 api 之间的中间人，因此您现在仍然必须以某种方式对代理进行身份验证，否则人们可以查看控制台并了解如何点击代理以从您的 API 返回他们想要的内容;因此，在我看来，代理或多或少只是在路上踢罐子。

要一劳永逸地回答这个问题，您要么需要查看 oauth2 客户端授权，要么需要启动服务器端渲染所有内容。我相信还有其他技术与这两种解决方案一样有效，但是很难找到真正安全的替代解决方案。

Answer 2

这个问题在这个问题中得到了回答：如何保护JavaScript API访问令牌？

总而言之，无法在客户端代码中完全隐藏 API 密钥。如果您直接从客户端代码发出请求，无论您做什么，任何人都可以进入浏览器开发工具并获取您的 API 密钥。

当我过去遇到这个问题时，我用一个绝对不想公开的密钥，我已经通过创建 API 的代理解决了它。在这种情况下，API 密钥安全地位于 API 代码中，这是安全的，因为它是服务器端的。然后，您的客户端代码将调用您的 API，而不是 Twitch API。然后，您的 API(服务器代码(将调用 Twitch 并将结果返回给您的客户端。这几乎是将密钥完全保密的唯一方法。