I'm working on integration of react app with aws Lex Chatbot,
I have followed the manual process specified in this doc's - https://aws-amplify.github.io/docs/js/interactions
And each and every-time, when i send a message, I'm getting triggered with following error message
ERROR: Unhandled Rejection (MissingRequiredParameter): Missing required key 'userId' in params
Can someone pls help me with this...
This is the way i'm sending my request
Amplify.configure({
Auth: {
identityPoolId: 'us-east-1:xxxx-xxxx',
region: 'US_EAST_1',
},
Interactions: {
bots: {
"Chatbot": {
"name": "Chatbot",
"alias": "Bot1",
"region": "US_EAST_1",
},
},
}
});
Component:
<ChatBot
title="My Bot"
theme={myTheme}
botName="Chatbot"
welcomeMessage="Welcome, how can I help you today?"
onComplete={this.handleComplete.bind(this)}
clearOnComplete={true}
conversationModeOn={true}
/>
Related
I have difficulties integrating a Amazon Lex v2 chatbot on a React Native app using Amazon Amplify.
I installed aws-amplify dependencies, and on my index.js file added the following lines:
import {Amplify} from 'aws-amplify';
import {AWSLexV2Provider} from '#aws-amplify/interactions';
Amplify.addPluggable(new AWSLexV2Provider());
const interactionsConfig = {
Auth: {
identityPoolId: 'XX-XXXX-X:………',
region: 'east-us-1',
},
Interactions: {
bots: {
// LexV2 Bot
MyChatbotName: {
name: 'MyChatbotName',
aliasId: '---',
botId: '---',
localeId: '---',
region: '---',
providerName: 'AWSLexV2Provider',
},
},
},
};
Amplify.configure(interactionsConfig);
I can call my chatbot using Python Boto3, so all the data I put in interactionsConfig.Interactions.bots should be okay.
But when I try to call my chatbot on App.tsx, with the following code:
async function callChatbot() {
let userInput = 'I would like to have informations about a disease';
// Provide a bot name and user input
const response = await Interactions.send('MyChatbotName', userInput);
// Log chatbot response
console.log(response.message);
}
callChatbot();
I got an error:
WARN Possible Unhandled Promise Rejection (id: 0):
Error: No value provided for input HTTP label: sessionId.
Error: No value provided for input HTTP label: sessionId.
I suppose this is an identification issue, but the identity pool I use is supposed to have full Lex, Amplify and Cognito access…
I changed many settings in identity pool, I even tried to add user pool but still the same error… I already installed react-native-url-polyfill, react-native-get-random-values and uuid to get rid of previous errors.
Do you know what I should do? Thanks! :)
I'm integrating auth0 from the tutorial into my own application and have encountered a couple of problems with authentication reflected in the auth0 logs.
This occurs on hitting my react login button:
Login.js
import React from "react";
import { useAuth0 } from "#auth0/auth0-react";
import '../components/App.css'
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return <button class="btn btn-primary" onClick={() => loginWithRedirect()}>Log In</button>;
};
export default LoginButton;
However on the Auth0 Application logs I see that I am successfully authenticated and I also get a Failed Exchange, Successful Login and a Warning During Login.
Fixed Log: Warning During Login
Here's the text of the log for Warning During Login:
You are using Auth0 development keys which are only intended for use
in development and testing. This connection (google-oauth2) should be
configured with your own Development Keys to enable the consent page
to show your logo instead of Auth0's and to enable SSO for this
connection. AUTH0 DEVELOPMENT KEYS ARE NOT RECOMMENDED FOR PRODUCTION
ENVIRONMENTS. To learn more about Development Keys please refer to
https://auth0.com/docs/connections/social/devkeys.
This was fixed by following these instructions on the Auth0 website. Essentially:
Creating a google project and OAuth credentials
Adding the credentials inside my Auth0 connected apps
Broken: Login Successful
The log shows that it was a successful login. However on my application, I click the Login button and the expected auth0 modal does not appear.
{
"date": "2020-10-14T09:14:06.549Z",
"type": "s",
"connection_id": "",
"client_id": "<MyClientId>",
"client_name": "<MyClientName>",
"ip": "<MyIP>",
"user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
"details": {
"prompts": [],
"completedAt": 1602666846548,
"elapsedTime": null,
"session_id": "m0AeJer-FhZ0rb9UFPWgvDkvN7MW36h_"
},
"hostname": "<MyHost>",
"user_id": "<MyUserID>",
"user_name": "<MyUserName>",
"auth0_client": {
"name": "auth0-react",
"version": "1.1.0"
},
"log_id": "90020201014091409270008789595401783120816526823843168290",
"_id": "90020201014091409270008789595401783120816526823843168290",
"isMobile": false,
"description": "Successful login"
}
And looking at the response headers in safari, the token request has 401'd
URL: https://<testdomain>.auth0.com/oauth/token
Status: 401
Source: Network
Address: <testaddress>
Initiator:
auth0-spa-js.production.esm.js:15
Fixed Log: Failed Exchange
After ensuring that I was connecting to goole properly I saw that the issue persisted. Looking at the log I get the following under the heading of a Failed Exchange.
{
"date": "2020-10-14T09:14:07.304Z",
"type": "feacft",
"description": "Unauthorized",
"connection_id": "",
"client_id": "<MyClientId>",
"client_name": null,
"ip": "<TheIP>",
"user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
"details": {
"code": "*************Rw7"
},
"hostname": "<MyHostName>",
"user_id": "",
"user_name": "",
"log_id": "90020201014091410270002070951766882711015226887425228818",
"_id": "90020201014091410270002070951766882711015226887425228818",
"isMobile": false
}
This question fixed the Failed Exchange issue for me. Change your Auth0 Application properties settings to:
Application Type: Regular Web Application
Token Endpoint Authentication Method: None
This however, unearthed a new issue...
Broken Log: Failed Silent Auth
There's a number of fixes I did here so I'll document them in the answer.
Warning During Login
This was fixed by ensuring the my credentials provider had been properly set up. In this case google. For instructions on how to add google as a credentials provider see here.
Failed Exchange
This was fixed by going to the auth0 dashboard application settings and modifying the setting Application Type to Regular Web Application and the setting Token Endpoint Authentication Method to None.
Login Successful (but not really)
This disappeared once I fixed the Failed Exchange above.
Failed Silent Auth
This was never "fixed" and the error still appears on the log. However the comment on this question prompted me to revisit my Allowed Web Origins and Allowed Origins (CORS) on my auth0 to the below:
https://<mydomain>.eu.auth0.com, http://localhost:3000
This was the last issue in the chain and I could now use login and logout as expected.
I'm using CodeSandbox to make a Gatsby app and I'm trying to use Prismic for the backend. I set it up nicely, I'm sure, and I installed gatsby-source-prismic to my project. However, when I add it to my config file and restart the project, it throws an error saying "Invalid Plugin Options". This is what's in my plugin file:
{
resolve: `gatsby-source-prismic`,
options: {
repositoryName: `firstprism`,
accessToken: `XXX`
},
},
Here's the stack:
ERROR
gatsby-source-prismic - invalid plugin options
ERROR
Expected a value of type record<string,object> forschemas but received undefined.
Error:
index.cjs:650 new StructError
[sandbox]/[superstruct]/lib/index.cjs:650:19
index.cjs:707 Function.Struct.assert
[sandbox]/[superstruct]/lib/index.cjs:707:13
index.cjs:679 Struct
[sandbox]/[superstruct]/lib/index.cjs:679:19
gatsby-node.js:74 validatePluginOptions
[sandbox]/[gatsby-source-prismic]/dist/gatsby-node.js:74:50
gatsby-node.js:1042
[sandbox]/[gatsby-source-prismic]/dist/gatsby-node.js:1042:25
Generator.next
gatsby-node.js:52
[sandbox]/[gatsby-source-prismic]/dist/gatsby-node.js:52:71
new Promise
gatsby-node.js:48 __awaiter
[sandbox]/[gatsby-source-prismic]/dist/gatsby-node.js:48:12
gatsby-node.js:1029 Object.sourceNodes
[sandbox]/[gatsby-source-prismic]/dist/gatsby-node.js:1029:55
api-runner-node.js:256 runAPI
[sandbox]/[gatsby]/dist/utils/api-runner-node.js:256:37
api-runner-node.js:375 resolve
[sandbox]/[gatsby]/dist/utils/api-runner-node.js:375:15
debuggability.js:384 Promise._execute
[sandbox]/[bluebird]/js/release/debuggability.js:384:9
promise.js:518 Promise._resolveFromExecutor
[sandbox]/[bluebird]/js/release/promise.js:518:18
promise.js:103 new Promise
[sandbox]/[bluebird]/js/release/promise.js:103:10
api-runner-node.js:374 Promise.mapSeries.plugin
[sandbox]/[gatsby]/dist/utils/api-runner-node.js:374:12
I just ran into this issue. It appears it is now required to provide JSON schemas, as described here in the docs : https://github.com/angeloashmore/gatsby-source-prismic#providing-json-schemas
edit: please also refer to https://github.com/angeloashmore/gatsby-source-prismic/blob/master/docs/migrating-from-v2-to-v3.md
It's like this
options: {
repositoryName: 'your-repository-name',
accessToken: `${process.env.API_KEY}`,
linkResolver: ({ node, key, value }) => post => `/${post.uid}`,
schemas: {
page: require("./src/schemas/page.json"),
},
},
instead of this now
options: {
repositoryName: `your-repository-name`,
accessToken: `${process.env.API_KEY}`,
linkResolver: ({ node, key, value }) => post => `/${post.uid}`,
page: require("./src/schemas/page.json"),
},
I am trying to create an App Engine service via Deployment Manager.
My deployment-manager.yaml file looks like below
imports:
- path: create-app-engine-std.py
resources:
- name: create-app-engine-std-app
type: create-app-engine-std.py
properties:
name: app-engine-std-app
appsId: projectId
zip:
sourceUrl: https://storage.googleapis.com/some-bucket/xyz.zip
filesCount: 2
version: v1
runtime: nodejs8
My create-app-engine-std.py look like below
def GenerateConfig(cxt):
deployment = {}
if cxt.properties['zip']:
deployment = {
'zip': {
'sourceUrl': cxt.properties['zip']['sourceUrl'],
'filesCount': cxt.properties['zip']['filesCount']
}
}
resources = [{
'type': 'gcp-types/appengine-v1:apps.services.versions',
'name': 'app-engine-std-app',
'properties': {
'servicesId': 'app-engine-std-test-app',
'appsId': cxt.properties['appsId'],
'deployment': deployment,
'runtime': cxt.properties['runtime'],
'threadsafe': True,
'id': cxt.properties['version']
}
}]
return {'resources': resources}
When I execute the deployment command I get following error
message: '{"ResourceType":"gcp-types/appengine-v1:apps.services.versions","ResourceErrorCode":"500","ResourceErrorMessage":"An
internal error occurred."}'
I tried using the apps.services.versions.create API but I always get following error although I am owner of the project
{
"error": {
"code": 403,
"message": "The caller does not have permission",
"status": "PERMISSION_DENIED"
}
}
Can someone guide me why I am getting the internal error and why can't I use the API. Thanks...
I'm implementing PayPal's In-Context Checkout and am using Advanced In-Context JavaScript settings (https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)
My app is a React app. So I can't use PP API as they suggest it, that is just throw a code between <script> ... </script> tags somewhere in the page under their buttons. My React components have state and data that I need to send to server within PP function calls. So I placed PP code in componentDidMount method. And for some reason PP throws this error:
checkout.js:4734 Uncaught SecurityError: Blocked a frame with origin "http://example.com:3000" from accessing a frame with origin "https://www.sandbox.paypal.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
(anonymous function) # checkout.js:4734
checkout.js:4515 GET http://www.paypalobjects.com/api/oneTouch.html net::ERR_EMPTY_RESPONSE
Here is the code:
componentDidMount() {
window.paypalCheckoutReady = function() {
paypal.checkout.setup(config[NODE_ENV].ppMerchantID, {
locale: 'en_US',
environment: 'sandbox',
buttons: [
{
container: 'checkoutBtnContainer',
type: 'checkout',
color: 'gold',
size: 'medium',
shape: 'pill',
click: (ev)=>{
paypal.checkout.initXO();
$.post('/checkout', {
checkoutData: this.props.checkoutData,
})
.done(res => {
paypal.checkout.startFlow(res.link);
})
.fail(err => {
paypal.checkout.closeFlow();
});
}
}
],
});
};
},
I know about cross-origin policy. I don't understand why it is the case here. Why the code works fine if I throw it on the page between <script> ... </script> tags, but PP throws an error if I use it in my React component. What is the cause of that? Is it React fault or PayPal's?
UPD: No, below is not a solution for the problem. Occasionally Paypal's checkout.js script throws the error.
However, it solves this issue
Apparently,
1) there was no this:
window.paypalCheckoutReady = function() {
// wrong this is here
}
I changed to:
window.paypalCheckoutReady = () => {
// correct this is here now
}
I don't like .bind(this).
2) I removed <form /> tag and set plain <div> instead:
// before
<form id="checkoutBtnContainer" method="post" action="/checkout"></form>
// after
<div id="checkoutBtnContainer"></div>
I don't know why and how, but all works fine now.