Блог

Я хочу взаимодействовать с API Dialogflow CX из моего приложения React. Соответствующий код выглядит следующим образом:

 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 .

Я создал учетную запись службы и загрузил закрытый ключ в виде файла JSON в соответствии с https://cloud.google.com/docs/authentication /.

Как мне затем использовать это для аутентификации моего вызова API?

Согласно документам, использование ключа учетной записи службы (того, который вы загрузили в виде файла JSON) предназначено только для

Доступ к личным данным от имени учетной записи службы за пределами облачных сред Google

Они используются, когда:

1. пользователь не присутствует для аутентификации; или
2. запросы на стороне сервера, которым не нужен пользователь.

Для вашего варианта использования я предполагаю, что это для последнего, поскольку вы используете Dialogflow. Переместите этот вызов api в свой серверный код, например, настроив облачную функцию, lambda или приложение expressjs, запущенное где-нибудь.

Не запускайте этот запрос в React по 2 основным причинам:

1. React работает на стороне клиента, что означает, что пользователи будут иметь доступ к вашему исходному коду, включая ваш закрытый ключ. Большой риск для безопасности.
2. Dialogflow не нуждается в аутентификации пользователя для работы.

Чтобы добавить аутентификацию по вашему запросу и использовать Dialog CX, вы можете выполнить следующие шаги, которые в общих чертах описаны здесь. Обратите внимание, эти шаги предназначены для случаев, когда ваш сервер работает в GCP или вне его. У Google есть встроенная функциональность, если ваш код выполняется в GCP, но я объясню ту, которая работает везде. Все это должно быть в вашем приложении cloud function / lambda / expressjs, поэтому, если вы не знакомы с этим исследованием, как его настроить и как вы можете сначала вызвать это в React.

1. установите dot-env и требуйте его npm install dotenv или yarn add dotenv
2. требуется dotenv в приложении require('dotenv').config()
3. Загрузите закрытый ключ json и сохраните его где-нибудь в папке вашего проекта)
4. добавьте .env в свой .gitignore файл, если его там еще нет
5. создайте .env файл и добавьте это в него GOOGLE_APPLICATION_CREDENTIALS="[PATH TO YOUR PRIVATE KEY]"
6. установите библиотеку Dialogflow CX npm install @google-cloud/dialogflow-cx
7. Используйте библиотеку Dialogflow в соответствии с ее документами здесь . Закрытый служебный ключ будет автоматически обнаружен при использовании библиотеки.
8. В рабочей среде обязательно добавьте GOOGLE_APPLICATION_CREDENTIALS="[PATH TO YOUR PRIVATE KEY]" в качестве переменной среды облачную функцию, lambda, docker или что-то еще, что вы будете использовать.

В качестве дополнительного примечания обновите свои закрытые ключи и удалите их из папки проекта React, если вы уже зафиксировали их в своем репозитории github.

В конце концов, я не смог заставить его работать, добавив учетные данные JSON .env в (did install dotenv ). Что я в итоге сделал:

• Переместите вызов API на мой экспресс-сервер
• Добавьте файл 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}`
   );
   

  } перехват (ошибка) {
  возврат next (ошибка)
  }
  })