如何使用Angular 14和SwaggerUI ASp.netCore 6 Web API正确传递我的API密钥

Question

这是一个愚蠢的问题，但我不知道如何检查，我不确定如何在调用我在.Net 6 CWA 中创建的API时传递我的API密钥

我目前在Heroku:上托管Web API

根据UI的卷曲看起来是这样的：

curl -X 'GET' 
'https://chuckwarsapi.herokuapp.com/search?Query=luke' 
-H 'accept: */*' 
-H 'ApiKey: xxxxx'

我在我的组件中这样调用API

return this.httpClient.get(`https://chuckwarsapi.herokuapp.com/search?Query=${query}&ApiKey=${this.API_KEY}`);

我已经在我的SPA上建立了一个拦截器，但这并没有帮助，因为我仍然有

error
: 
"Api Key was not provided"

我在.Net上添加API密钥的方法是通过一些MiddleWare来检查API密钥是否存在

中间件代码：

private const string APIKEYNAME = "ApiKey";
public async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
{
if (!context.HttpContext.Request.Headers.TryGetValue(APIKEYNAME, out var extractedApiKey))
{
context.Result = new ContentResult()
{
StatusCode = 401,
Content = "Api Key was not provided"
};
return;
}
var appSettings = context.HttpContext.RequestServices.GetRequiredService<IConfiguration>();
var apiKey = appSettings.GetValue<string>(APIKEYNAME);
if (!apiKey.Equals(extractedApiKey))
{
context.Result = new ContentResult()
{
StatusCode = 401,
Content = "Api Key is not valid"
};
return;
}
await next();
}

我知道Api密钥必须被称为ApiKey，但我不确定如何在url中传递它。或者当我调用时，els如何向它提供api密钥

这里是拦截器代码：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

request = request.clone({
setHeaders: {
Authorization: `ApiKey xxxxx`
}
});
return next.handle(request);
}

拦截器在我的模块中被调用为：

providers: [
{ provide: HTTP_INTERCEPTORS, useClass: ApiInterceptorService, multi: true },
],

.net端的Appsettings.json：

{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
"ApiKey": "xxxxx"
}

Answer 1

您应该在请求中传递ApiKey标头，而不是Authorization标头

request = request.clone({
setHeaders: {
ApiKey: `xxxxx`
}
});