Http.post with Dialogflow v2 in Ionic 4

Hi,

I did an Ionic bot chat with dialogflow V1. I am trying to upgrade my code to Dialogflow V2 because Dialogflow V1 API will shutdown in March 31st, 2020.

I had two problems:
1)

This is my dialogflow.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { map } from 'rxjs/operators';
import { AutenticacaoService } from '../services/autenticacao.service';

const environment = {
  clientAccessToken: '<my token from dialogflow agent console>',
};

@Injectable({
  providedIn: 'root'
})
export class DialogflowService {

  // private baseURL: string = "https://api.dialogflow.com/v1/query?v=20150910"; // OLD
  private baseURL: string = "https://dialogflow.googleapis.com/v2/projects/<my project ID>/agent"; // NEW CODE (acordind instructions -> https://dialogflow.com/docs/reference/v2-auth-setup

  private token: string = environment.clientAccessToken;

  private email: string;

  private gcloudAuth: string = "<my code indicated -> "gcloud auth application-default print-access-token">"; // see page [https://cloud.google.com/sdk/gcloud/reference/auth/application-default/print-access-token](https://cloud.google.com/sdk/gcloud/reference/auth/application-default/print-access-token) 



  ionViewWillEnter() {
    this.email = '<some email>';
  }




  constructor(
    private http: Http,
  ) {

  }

  public getResponse(query: string, email: string) {

// OLD CODE (Dialogflow v1)
    /* let data = {
      query : query,
      lang: 'pt',
      sessionId: email,
    } */

// NEW CODE TO DIALOGFLOW v2 (see site https://cloud.google.com/dialogflow/docs/quick/api#detect-intent-text-drest

    let data = {
      queryInput: {
        text: {
          query,
          languageCode: 'pt'
        }
      }
    }


    return this.http
      .post(`${this.baseURL}`, data, { headers: this.getHeaders() }).pipe(
        map(res => {
          return res.json()
        }))
  }

  public getHeaders() {
    let headers = new Headers();
    // headers.append('Authorization', `Bearer ${this.token}`); // OLD (Dialogflw v1)
    headers.append('Authorization', `Bearer ${this.gcloudAuth}`); // NEW (Dialogflow v2)
    return headers;
  }

}

This is a part of my chat bot ts code:

public sendMessage(): void {

this.dialogflowService.getResponse(this.message.content, this.email).subscribe(res => {


           //     this.mensagemobject = res.result.fulfillment.messages; // OLD (Dialogflow v1)
                this.mensagemobject = res.queryResult.fulfillment.messages; // NEW (Dialogflow v2)

         //       this.tamanho = res.result.fulfillment.messages.length; // OLD (Dialogflow v1)
                this.tamanho = res.queryResult.fulfillment.messages.length;  // NEW (Dialogflow v2)



              
                console.log(this.mensagemobject);

                for (var i = 0; i <= this.tamanho; i++) {

                  this.messages.push(
                    new Message(this.nomePersonagemAI, this.mensagemobject[i].speech, this.avatar)
                  );
                }

              });


}

I had two problems:

PROBLEM 1 (Gcloud Auth)- authentication - I ran “gcloud beta auth application-default print-access-token” in gcloud power shell console to take my gcloud auth. I putted in my ionic code (it runs), but afther some minutes, my gcloud auth expires.

run im my gcloud power shell (see https://cloud.google.com/sdk/gcloud/reference/beta/auth/application-default/print-access-token:

$ gcloud beta auth application-default print-access-token

PROBLEM 2 (INVALID_ARGUMENT):

chrome console (run with ionic serve):

"{
  "error": {
    "code": 400,
    "message": "Invalid JSON payload received. Unknown name \"query\" at 'agent': Cannot find field.\nInvalid JSON payload received. Unknown name \"sessionId\" at 'agent': Cannot find field.\nInvalid JSON payload received. Unknown name \"agent\" at 'agent': Cannot find field.",
    "status": "INVALID_ARGUMENT",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.BadRequest",
        "fieldViolations": [
          {
            "field": "agent",
            "description": "Invalid JSON payload received. Unknown name \"query\" at 'agent': Cannot find field."
          },
          {
            "field": "agent",
            "description": "Invalid JSON payload received. Unknown name \"sessionId\" at 'agent': Cannot find field."
          },
          {
            "field": "agent",
            "description": "Invalid JSON payload received. Unknown name \"agent\" at 'agent': Cannot find field."
          }
        ]
      }
    ]
  }
}
"

My ionic app was running without any problem with dialogflow v1, but i am not been able run it (using http.post) in my ionic app.

DOES ANYONE KNOW THE RIGHT WAY TO RUN HTTP.POS IN DIALOGFLOW v2 ??? (below)

 return this.http
      .post(`${this.baseURL}`, data, { headers: this.getHeaders() }).pipe(
        map(res => {
          return res.json()
        }))
  }

While you wait for better answers, I would suggest weaning this app off of Http in favor of HttpClient. That will allow you to hopefully address both problems at once: the first by migrating the authentication stuff into an interceptor, and the second at least indirectly by aligning your basic environment with that used by likely everybody else doing this with Angular today.

Hello @laoc81

where you able to solve this problem ?

Hell @samplusplus

nothing yet…

…do you have any idea???

Hey @laoc81 did you manage to find a solution?