How to integrate Dialogflow v2 with javascript frontend (Vue.js)

Question

I'm trying to integrate Dialogflow with Vue.js (and axios) according to the documentation's sample HTTP request: https://dialogflow.com/docs/reference/v2-auth-setup and detectIntent: https://dialogflow.com/docs/reference/api-v2/rest/v2beta1/projects.agent.sessions/detectIntent.

I have a service account set up with sufficient permissions, and given it the path parameters and request body as shown in the documentation, but I keep getting 'Error: Request failed with status code 400' when calling the detectIntent API.

There are a few things I'm not sure of, though:

1. How do I get a sessionId? Currently I just copy the sessionId from Firebase Function logs which shows up when entering a query through the Dialogflow console directly.

2. How do I actually implement $(gcloud auth print-access-token) in javascript code? Currently I'm running the command in the terminal and pasting the token in the code, just to test if the API works, but I have no clue how it should be implemented.

(Perhaps useful, I have fulfillment set up in a functions folder, and that is working nicely.)

Thanks in advance!

<script>
import axios from 'axios'

export default {
  name: 'myChatBot',
  mounted () {

    // Authorization: Bearer $(gcloud auth print-access-token)
    
    const session = 'projects/mychatbot/agent/sessions/some-session-id'
    const token = 'xxxxxxxxxxxx'
    axios.defaults.baseURL = 'https://dialogflow.googleapis.com'
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
    axios.defaults.headers.post['Content-Type'] = 'application/json'
    
    axios
      .post(`/v2beta1/${session}:detectIntent`, {
        "queryInput": {
          "text": "add buy milk to inbox",
          "languageCode": "en-US"
        }
      })
      .then(response => console.log(response))
      .catch(error => console.log(error))
  }

}
</script>

Answer 1

You can use JWT authorization to handle your #2 question. You just need to put your JSON file someplace safe. https://developers.google.com/identity/protocols/OAuth2ServiceAccount#jwt-auth

The reason you are getting the code 400 is because your params are a little off. Here is how your post should look (I've also added some extra code to handle token generation):

<script>
import axios from 'axios'
import { KJUR } from 'jsrsasign'

const creds = require('./YOUR_JSON_FILE')  

export default {
  name: 'myChatBot',
  data() {
    return {
      token: undefined,
      tokenInterval: undefined
    }
  },
  created() {
    // update the tokens every hour
    this.tokenInterval = setInterval(this.generateToken, 3600000)
    this.generateToken()
  },
  mounted () {
    this.detectIntent('add buy milk to inbox')
  },
  beforeDestroy() {
    clearInterval(this.tokenInterval)
  },
  methods: {
    generateToken() {
      // Header
      const header = {
        alg: 'RS256',
        typ: 'JWT',
        kid: creds.private_key_id
      }

      // Payload
      const payload = {
        iss: creds.client_email,
        sub: creds.client_email,
        iat: KJUR.jws.IntDate.get('now'),
        exp: KJUR.jws.IntDate.get('now + 1hour'),
        aud: 'https://dialogflow.googleapis.com/google.cloud.dialogflow.v2.Sessions'
      }
      
      const stringHeader = JSON.stringify(header)
      const stringPayload = JSON.stringify(payload)
      this.token = KJUR.jws.JWS.sign('RS256', stringHeader, stringPayload, creds.private_key)
    },
    detectIntent(text, languageCode = 'en-US') {
      if (!this.token) {
        // try again
        setTimeout(this.detectIntent, 300, text, languageCode)
        return
      }
      
      // error check for no text, etc.

      const session = 'projects/mychatbot/agent/sessions/some-session-id'
      axios.defaults.baseURL = 'https://dialogflow.googleapis.com'
      axios.defaults.headers.common['Authorization'] = `Bearer ${this.token}`
      axios.defaults.headers.post['Content-Type'] = 'application/json'

      axios
        .post(`/v2beta1/${session}:detectIntent`, {
          queryInput: {
            text: {
              text,
              languageCode
            }
          }
        })
        .then(response => console.log(response))
        .catch(error => console.log(error))
    }
  }
}
</script>

You can see that in QueryInput it's taking 1 of 3 different types of objects ("text" being one of those).

Answer 2

In the link, it's stated under the HTTP request session path parameters that "It's up to the API caller to choose an appropriate session id. It can be a random number or some type of user identifier (preferably hashed).

For integration with Dialogflow V2, here's an example for doing with third-party tools that are easy to integrate and start using.

Answer 3

The sessionId is an identifier you can provide that will indicate to Dialogflow whether subsequent requests belong to the same "session" of user interaction (see docs).

For a client's first request to the API, you could just generate a random number to use as a session ID. For subsequent requests from the same client (e.g. if a user is continuing to converse with your agent) you can reuse the same number.

Your implementation of the token management looks fine, as long as the service account you are using has appropriately limited access (since this token could potentially allow anyone to make requests to Google Cloud APIs). For additional security, you could consider proxying the request to Dialogflow through your own server rather than making the call from the client.