Azure Bot Framework DirectLine v3开始对话-错误403禁止访问

时间:2019-01-22 14:04:19

标签: angular azure http-post

我正在使用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帖子时,我收到状态为403禁止的响应错误。有人可以建议我为什么收到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设置: Azure Bot Framework DirectLine Setup

这是控制台中的错误: Console Error

然后在“网络”选项卡中得到以下错误描述: Error message in the Network tab

因此该消息表明缺少一个机密或令牌(我提供了机密)。我认为在设置HTTP Post时我一定做错了,因为Azure无法找到我的秘密。如果我正确地假设这是错误,那么如何正确发送HTTP Post以使Azure找到密钥?

提前谢谢!

1 个答案:

答案 0 :(得分:0)

好的,我找到了答案。因此,为了通过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连接中获得了正确的响应:

Response to the HTTP post request

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