2

我对 AWS 的许多方面感到满意，但对 Cognito 不满意。我已经将 Lex 风格的聊天机器人构建为 Alexa 技能，但这是我第一次尝试将 Lex 聊天机器人集成到现有网站中。该网站使用 www.codesandbox.io 在 React.js 中编码，因为我刚刚学习 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="jojo@ops.org" />);
  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);
4

1 回答 1

0

创建我identityPoolId自己的情况后，我必须附加这两个策略AmazonPollyReadOnlyAccess和AmazonLexRunBotsOnly.

为此，导航到 IAM 控制台并选择角色。在角色中找到您创建的 Cognito 角色并附加策略。

于 2019-12-20T20:22:22.933 回答