首页 文章

如何将Dialogflow v2与javascript前端集成（Vue.js）

提问于
浏览 次
1

我'm trying to integrate Dialogflow with Vue.js (and axios) according to the documentation'的示例HTTP请求：https://dialogflow.com/docs/reference/v2-auth-setup和detectIntent：https://dialogflow.com/docs/reference/api-v2/rest/v2beta1/projects.agent.sessions/detectIntent .

我有一个设置了足够权限的服务帐户，并为其提供了路径参数和请求正文，如文档中所示，但在调用detectIntent API时，我一直收到“错误：请求失败，状态代码为400” .

但是有一些我不确定的事情：

  • 如何获得sessionId？目前，我只是从Firebase功能日志中复制sessionId，这些日志在通过Dialogflow控制台直接输入查询时显示 .

  • 如何在javascript代码中实际实现$（gcloud auth print-access-token）？目前我正在终端中运行命令并在代码中粘贴令牌，只是为了测试API是否有效，但我不知道应该如何实现它 .

（也许很有用，我在函数文件夹中设置了实现，并且运行良好 . ）

提前致谢！

<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>
javascript vue.js axios dialogflow http-status-code-400

2 回答

  • 0

    您可以使用JWT授权来处理您的＃2问题 . 您只需要将JSON文件放在安全的地方 . https://developers.google.com/identity/protocols/OAuth2ServiceAccount#jwt-auth

    你获得代码400的原因是因为你的params有点偏差 . 以下是您的帖子的外观（我还添加了一些额外的代码来处理令牌生成）：

    <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>

    您可以在QueryInput中看到它正在使用3种不同类型的对象中的一种（"text"就是其中之一） .

    回复于
  • 2

    sessionId 是您可以提供的标识符，它将向Dialogflow指示后续请求是否属于相同的用户交互（see docs） .

    对于客户端对API的第一个请求，您只需生成一个随机数即可用作会话ID . 对于来自同一客户端的后续请求（例如，如果用户继续与您的代理商交谈），您可以重复使用相同的号码 .

    只要您使用的服务帐户具有适当的访问权限，您的令牌管理实施就会很好（因为此令牌可能允许任何人向Google Cloud API发出请求） . 为了提高安全性，您可以考虑通过自己的服务器将请求代理到Dialogflow，而不是从客户端进行调用 .

    回复于

相关问题