Azure Bot Framework DirectLine v3 Start a Conversation - error 403 Forbidden

Question

I am implementing a bot using Azure Bot Framework into my website using DirectLine v3. I am trying to start a conversation as explained here: https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-start-conversation?view=azure-bot-service-4.0

When I send a HTTP Post I receive a response error of status 403 Forbidden. Could someone advice on why am I getting a 403 forbidden response? I am using this in an Angular application.

Code for my HTTP Post:

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;
            }
        )
    }
}

I use it in the Angular component here:

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

Here is the DirectLine setup on Azure:

Here is error in the Console:

And I get this error description in the Network Tab:

So the message says that there is a missing secret or token (I have secret provided). I think I must be doing something wrong when I set up my HTTP Post as Azure is unable to find my secret. If I am correct in assuming that this is the error, how do I send the HTTP Post properly for Azure to find the secret key?

Answer 1

OK, I figured out an answer to this. So in order to authenticate with Azure Bot Framework DirectLine API, I had to use a HTTP Interceptor in my Angular application. Essentially, when I send a HTTP Post request, it as intercepted by the interceptor and a header is added there with the authorization secret. See the Interceptor code:

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);
    }
}

Here is the code for where I do a post, which is ALMOST the same as the one above, with the exception of a secret variable:

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;
            }
        )
    }
}

In the app.module.ts file in my Angular application, the interceptor is imported in this way (see providers):

@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 { }

The end result is that I am getting the correct response from Azure Bot Service DirectLine connection:

This provides the answer to my own question and now I can continue developing my application further :)