Azure Bot Framework DirectLine v3 开始对话 - 错误 403 Forbidden

Question

我正在使用 DirectLine v3 在我的网站中实现一个使用 Azure Bot Framework 的机器人。我正在尝试按照此处的说明开始对话：https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-start-conversation?view=azure-bot-service-4.0

当我发送 HTTP Post 时，我收到状态为 403 Forbidden 的响应错误。有人可以建议我为什么会收到 403 禁止响应吗？我在 Angular 应用程序中使用它。

我的 HTTP 帖子的代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import 'rxjs/Rx';


@Injectable()
export class BotFramework {
    secret = 'SECRET';
    constructor(private httpClient: HttpClient) {}

    authenticate() {
        const headerAuth = new Headers({
            'Authorization': 'Bearer ' + this.secret
        });
        return this.httpClient.post('https://directline.botframework.com/v3/directline/conversations',{
        observe: 'response',
        response: 'json',
        })
        .map(
            (response) => {
                const data = response;
                console.log('Returned response: ' + response);
                return data;
            }
        )
    }
}

我在这里的 Angular 组件中使用它：

 //Azure Bot Framework code goes here
  setTimeout(() => {
    this.botFramework.authenticate()
      .subscribe(
        (authentification: any) => {
          console.log(authentification);
          (error) => console.log('Authentification error: ' + error);
        }
      )
  }, 1000)

这是 Azure 上的 DirectLine 设置：

这是控制台中的错误：

我在“网络”选项卡中收到以下错误描述：

所以消息说缺少秘密或令牌（我提供了秘密）。我想我在设置 HTTP Post 时一定做错了，因为 Azure 无法找到我的秘密。如果我正确地假设这是错误，我如何正确发送 HTTP Post 以便 Azure 找到密钥？

Answer 1

好的，我想出了一个答案。因此，为了使用 Azure Bot Framework DirectLine API 进行身份验证，我必须在我的 Angular 应用程序中使用 HTTP 拦截器。 本质上，当我发送一个 HTTP Post 请求时，它被拦截器拦截，并在那里添加了一个带有授权密钥的标头。查看拦截器代码：

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from 

'@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { BotFramework } from '../Services/botFrameworkDirectLine.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private botFramework: BotFramework) {}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('Intercepted', req);
        const copiedReq = req.clone({headers: req.headers.set('Authorization',
        this.botFramework.secret)});
        return next.handle(copiedReq);
    }
}

这是我发帖的代码，与上面的几乎相同，除了一个秘密变量：

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'
import 'rxjs/Rx';


@Injectable()
export class BotFramework {
    secret = 'Bearer SECRET';
    constructor(private httpClient: HttpClient) {}

    authenticate() {

        return this.httpClient.post(
            'https://directline.botframework.com/v3/directline/conversations',{
        observe: 'body',
        response: 'json',
        })
        .map(
            (response) => {
                const data = response;
                console.log('Returned response: ' + response);
                return data;
            }
        )
    }
}

在我的 Angular 应用程序的 app.module.ts 文件中，拦截器是以这种方式导入的（请参阅提供程序）：

@NgModule({


declarations: [
    AppComponent,
    HeaderComponent,
    BreadcrumbComponent,
    TopicComponent,
    HubComponent,
    ComputerHardwareComponent,
    BotComponent,
    PopularTopicsComponent,
    LoginComponent,
    GraphicsCardsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    HttpModule
  ],
  providers: [
    KeywordExtractor,
    Translator,
    BotFramework,
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

最终结果是我从 Azure Bot Service DirectLine 连接获得了正确的响应：

这为我自己的问题提供了答案，现在我可以继续进一步开发我的应用程序了 :)