如何正确地向 Dialogflow CX API 的 Axios 请求添加授权？

Question

我想从我的 React 应用程序与 Dialogflow CX API 通信。相关代码如下所示：

componentWillMount() {
    let payload = {
        "queryInput": {
            "text": {
                "text": "Hi!"
            },
            "languageCode": "en"
        },
        "queryParams": {
            "timeZone": "America/Los_Angeles"
        }
    }
    axios.post('https://global-dialogflow.googleapis.com/v3/' + this.state.projectId + '/sessions/' + this.state.sessionId + ':detectIntent', payload)
        .then(response => {
            this.setState({ dialogResponse: response });
        })
        .catch(error => {
            console.log(error)
        })

    console.log(this.state.dialogResponse)
}

然而，响应是401。

我已经创建了一个服务帐户并按照 https://cloud.google.com/docs/authentication/.

将私钥下载为 JSON 文件

然后如何使用它来验证我的 API 通话？

Answer 1

根据 docs，使用服务帐户密钥（您作为 JSON 文件下载的密钥）仅适用于

Accessing private data on behalf of a service account outside Google Cloud environments

这些在以下情况下使用：

用户不在场无法进行身份验证；或
不需要用户的服务器端请求。

对于您的用例，我假设它适用于后者，因为您使用的是 Dialogflow。 在您的服务器端代码 上移动此 api 调用，例如通过在某处设置云函数、lambda 或 expressjs 应用程序运行ning。

不要运行 React 上的这个请求有两个主要原因：

React 是客户端，这意味着用户可以访问您的源代码，包括您的私钥。 安全隐患大。
Dialogflow 不需要对用户进行身份验证即可工作。

要在您的请求中添加身份验证并使用 Dialog CX，您可以遵循这些大致基于 here 的步骤。请注意，这些步骤适用于您的服务器运行在 GCP 之内或之外的情况。如果您的代码运行s 在 GCP 中，Google 具有内置功能，但我将解释适用于任何地方的功能。所有这些都应该在你的云 function/lambda/expressjs 应用程序中，所以如果你不熟悉该研究如何设置一个以及你如何首先在 React 中调用它。

安装 dot-env 并需要它 npm install dotenv 或 yarn add dotenv
需要在应用程序中使用 dotenv require('dotenv').config()
下载私钥json将其保存在您的项目文件夹中）
将 .env 添加到您的 .gitignore 文件中（如果尚不存在）
创建 .env 文件并将其添加到其中 GOOGLE_APPLICATION_CREDENTIALS="[PATH TO YOUR PRIVATE KEY]"
安装 Dialogflow CX 库npm install @google-cloud/dialogflow-cx
根据其文档使用 Dialogflow 库 here。使用库时会自动检测私钥
在生产环境中，确保将 GOOGLE_APPLICATION_CREDENTIALS="[PATH TO YOUR PRIVATE KEY]" 作为环境变量添加到云函数、lambda、docker 或您将要使用的任何内容。

作为补充说明，刷新您的私钥并将其从您的 React 项目文件夹中删除 如果您已经将它们提交到您的 github 存储库。

Answer 2

最后，我无法通过将 JSON 凭据添加到 .env（已安装 dotenv）来使其正常工作。我最终做了什么：

将 API 调用移至我的 Express 服务器
将 JSON 文件添加到我的项目文件夹

使用@google-cloud/dialogflow-cx库如下：

 const { SessionsClient } = require('@google-cloud/dialogflow-cx');
 const client = new SessionsClient({
   keyFilename: "./my-file-name.json" //include the JSON file here!
 });

 ...

 app.get('/input', async (req, res, next) => {
   try {
     const sessionId = Math.random().toString(36).substring(7);
     const sessionPath = client.projectLocationAgentSessionPath(
       projectId,
       location,
       agentId,
       sessionId
     );
     console.info(sessionPath);

 const request = {
   session: sessionPath,
   queryInput: {
     text: {
       text: 'Hi there',
     },
     languageCode,
   },
 };

 const [response] = await client.detectIntent(request);
 for (const message of response.queryResult.responseMessages) {
   if (message.text) {
     console.log(`Agent Response: ${message.text.text}`);
   }
 }
 if (response.queryResult.match.intent) {
   console.log(
     `Matched Intent: ${response.queryResult.match.intent.displayName}`
   );
 }
 console.log(
   `Current Page: ${response.queryResult.currentPage.displayName}`
 );

} 赶上（错误）{ return 下一步（错误） } })

如何正确地向 Dialogflow CX API 的 Axios 请求添加授权？

How do I correctly add authorization to my Axios requests to Dialogflow CX API?

reactjs

google-authentication

dialogflow-cx