Попытка встроить чат-бот AWS Lex на сайт React, ошибка: ошибка: отсутствуют учетные данные в конфигурации (подробности см. В консоли)

Question

Я доволен многими аспектами AWS, но не знаком с Cognito. Я создал чат-ботов в стиле Lex в качестве навыков Alexa, но я впервые пытаюсь интегрировать чат-робота Lex в существующий веб-сайт. Сайт написан на React.js с использованием www.codesandbox.io, так как я только изучаю React. Я чувствую себя комфортно с C#, но React является новым для меня. Если какой-то из приведенного ниже кода, кажется, мало что делает, это просто потому, что я тестирую разные компоненты, функции, классы и т. Д. В любом случае, я создал простого чат-бота в Lex и попытался интегрировать его в этот сайт React., но получаю сообщение об ошибке - Ошибка: отсутствуют учетные данные в конфигурации (подробности см. в консоли), когда я пытаюсь пообщаться с ботом. Любые идеи? Я не уверен, что делаю неправильно.

import React from "react";
import ReactDOM from "react-dom";
import bootstrap from "bootstrap"; // eslint-disable-line no-unused-vars
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
import LexChat from "react-lex";
import AWS from 'aws-sdk';

AWS.config.update({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials({
    IdentityPoolId: "us-west-2:<redacted>"
  })
});

class CDataRow extends React.Component {
  render() {
    return (
      <h1>
        Name:{this.props.myname}
        <br />
        Email:{this.props.email}
      </h1>
    );
  }
}

const TitleCard = props => (
  <div class="container">
    <div class="media">
      <span class="media-left">
        <img
          src="https://content.mactores.com/2017/05/19105931/Amazon-Rekognition.png"
          alt="..."
        />
      </span>
      <div class="media-body">
        <h3 class="media-heading">
          {props.titleheading} <h5>{props.subtitle}</h5>
        </h3>
      </div>
    </div>
  </div>
);

const Datarow = props => (
  <div>
    <b>Name:{props.myname}</b>
    <br />
    <b>Email:{props.email}</b>
  </div>
);
const Layout = props => (
  <div>
    <header>Super Header of Document</header>
    <main>{props.children}</main>
    <footer>Super Footer Copyright mystuff 2018 (C)</footer>
  </div>
);
const DomainOutside = props => (
  <div>
    <div class="panel panel-default">
      <div class="panel-body">{props.children}</div>
    </div>
  </div>
);
const TabListRow = props => (
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div class="card">
          <h5 class="card-header">{props.cardtitle}</h5>
          <div class="card-body">
            <p class="card-text">{props.cardcontent}</p>
          </div>
          <div class="card-footer">{props.cardfooter}</div>
        </div>
      </div>
      <div class="col-md-10">
        <h2>{props.blockheader}</h2>
        <p>{props.blockcontent}</p>
        <p>
          <a class="btn" href="#">
            View details »
          </a>
        </p>
      </div>
    </div>
  </div>
);

function App(props) {
  console.log(<CDataRow myname="JoJo" email="[e-mail]" />);
  return (
    <div>
      <TitleCard
        titleheading="{Lex Integration Test}"
        subtitle="Embedding Lex into a website"
      />
      <LexChat
        botName="TestReactBot"
        IdentityPoolId="us-west-2:<redacted>"
        placeholder="Placeholder text"
        style={{ position: "absolute" }}
        backgroundColor="#FFFFFF"
        height="430px"
        headerText="Store help"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App version="1" />, rootElement);

Answer 1

После создания моего identityPoolId В моем случае мне пришлось прикрепить эти две политики AmazonPollyReadOnlyAccess а также AmazonLexRunBotsOnly.

Для этого перейдите в консоль IAM и выберите Роли. В разделе "Роли" найдите созданные вами роли Cognito и прикрепите политики.