Authentication parameter missing ionic & dialogflow

Question

This is my home.ts file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Message } from '../module/message.module';
import { ChatProvider } from '../../providers/chat/chat';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  messages: Message[] = [];

  constructor(public navCtrl: NavController,private chatprovider: ChatProvider) {

  }

  // ionViewDidLoad(){
  //   let message = new Message("hi")
  //   this.messages.push(message);
  // }

  sendMesage(message_content) {
    this.chatprovider.sendMessage(message_content.value).subscribe(res =>{
      console.log(res);
      // let message = new Message(res.result.speech);
      // this.messages.push(message);
      // message_content.value = '';
    }, err => {
      console.log(err)
    }
    )
  }
}

this is my chatprovider.ts file

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

@Injectable()
export class ChatProvider {

  url = "https://api.dialogflow.com/v1/query";
  accessToken = "df42472524af4201a5bd79b8bf930539";

  constructor(public http: HttpClient) {
    console.log('Hello ChatProvider Provider');
  }

  public sendMessage(message: string) {
    let data = {
      "lang": "en",
      "query": message,
      "sessionId": "1234"
    }
    let headers = new HttpHeaders({'Content-Type': 'application/json'});
    headers.append("Authorization","Bearer" + this.accessToken);
    return this.http.post(this.url, data,{headers: headers})
          .map(res => {
            return res
          })
  }

}

I'm getting the error response like

POST https://api.dialogflow.com/v1/query 403 () home.ts:29 HttpErrorResponse {headers: HttpHeaders, status: 403, statusText: "OK", url: "https://api.dialogflow.com/v1/query", ok: false, …}error: status: {code: 401, errorType: "unauthorized", errorDetails: "Authentication parameters missing"}proto: Objectconstructor: ƒ

HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure response for https://api.dialogflow.com/v1/query: 403 OK"name: "HttpErrorResponse"ok: falsestatus: 403statusText: "OK"url: "https://api.dialogflow.com/v1/query"proto: HttpResponseBase

Sergey Rudenko Sergey Rudenko · Accepted Answer · 2018-06-06T22:50:26

Ensure your access token is formed properly and that is has 1 space between Bearer and the access token itself: https://tools.ietf.org/html/rfc6750#section-2.1

So kinda try:

public sendMessage(message: string) {
    let data = {
      "lang": "en",
      "query": message,
      "sessionId": "1234"
    }
    let headers = new HttpHeaders({'Content-Type': 'application/json'});
    headers.append("Authorization","Bearer " + this.accessToken);
    return this.http.post(this.url, data,{headers: headers})
          .map(res => {
            return res
          })
  }

Authentication parameter missing ionic & dialogflow

1 Answers