I am trying to use dialogflow's integration called "Dialogflow messenger" (This isn't the interface to microsoft messenger). The integration is at beta stage, but I would have expected it to work at this bsaic level. When I configure it, if I click "try it here" ini the dialogflow console all is well.
I copied and pasted the dialogflow messenger integration into an html page on my laptop but when I open the page I get a CORS error.
Here is what I pasted - copied from the integration item
I copied and pasted the dialogflow messenger integration into an html page on my laptop but when I open the page I get a CORS error.
Here is what I pasted - copied from the integration item
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
chat-icon="417a4c06-c7a0-4fb4-8b42-8d4ba853f941_x.png"
intent="WELCOME"
chat-title="SupaMoov"
agent-id="xxx"
language-code="en"
></df-messenger>
here is the error:
SupaChat%20-%20google-1.html:1 Access to XMLHttpRequest at 'https://dialogflow.cloud.google.com/v1/integrations/messenger/webhook/xxx/sessions/dfMessenger-20080482' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How do I resolve this?
The problem is that you can't insert the html and open it directly from your file system. You need to open from a web server that could be with NodeJs, Java, php or whatever you want. Then put this script at the end of the body.
If it can be useful for you, I am intesively expimenting with this and I have prepared three videos in Youtube that can help to
Create the chatbot for dialoflow messenger,
Launch a web server with NodeJs and personalize the imagen of the chatbot
How to capture the javascript event in your web that generate the interactions with the chatbot.
I have prepare a Youtube list with those videos (in spanish but code can be understood easily) https://www.youtube.com/playlist?list=PLnNbmcjjevxs_Uj-hAeekSbb4Yb7FZERe
I hope that this could help.
I got in touch with Google support. Their answer is:
"to work you have to run it within a web server, you can try xampp"
Not great! I was looking to convert from IBM watson to dialogflow, but the watson integration is much more sophisticated, so I'll be staying with IBM.
I also had this problem.
I decided to publish it on an S3 (Static Site) on Amazon.
Just put the html and another files in Bucket.
Complete information here:
https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html
You can paste the embedding code into an embed code block in a Google Site and then you will not need a web server.
Here is the embed button Once you click embed, then click Embed code and paste in the code from Dialogflow.
You can also work on it on your local host using a simple Flask script.
from flask import Flask, request, send_from_directory,render_template
app = Flask(__name__, static_url_path='/static',template_folder='./')
#app.route("/")
def shadow():
return render_template("shadow.html")#assuming this is the name of your html file
if __name__ == "__main__":
app.run(host='localhost' , port=5000 , debug=True)
Then just open it at http://localhost:5000/ in your browser.
There is a dependency as this is assuming you have installed Python3 and Flask in your system.
To install Flask using Python 3.x
pip install flask
Or if you have Python2 by default, you would need to do
pip3 install Flask
This is of course, if you are working locally that is.
CORS is a mechanism that restricts requests coming from a different origin (domain). This is usually common when testing locally so when you deploy, the error will go away.
Usually, A request coming from a different origin is known as a cross-origin request. Cross-origin requests are vital for when your site needs to load data from other services. Essentially, CORS allows servers to specify who can access their resources and how.
-- The easiest and most reliable way to CORS in Safari is to disable CORS in the develop menu.
Enable the develop menu by going to Preferences > Advanced.
Then select “Disable Cross-Origin Restrictions” from the develop menu.
MAKE SURE YOU SWITCH IT BACK WHEN YOU FINISH TESTING.
-- I believe Firefox has a plugin you can install as well.
-- There are other more technical ways of fixing this via middleware, but this is a simple workaround.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
The way I solve having a webchat with Dialogflow is by using the WebChat by Voximplant Kit.
Is very simple to use and allows you to connect your DF ES or CX Agent through a JS function.
You can test the platform and then having human agents connected than can answer the questions that the DF Agent can't. Don't forget about that.
Web Chat creation with Voximplant Kit in action demo video
Web Chat Documentation
JS Script to create a Function to Connect the Dialogflow Agent with a Queue created in Voximplant Kit.
I hope this simplifies your life! You can reach me out in Discord.
You can just create an html index just like overhere on my github page. Here is 5 minute guide to github pages, Will take less than 15 minutes for the whole process.
Related
I am using Python to directly run a script of automatically replying user's comments.
I have a client secrets file after applying for a web-application. However, when I run for credentials, it first asks me to Please visit this URL to authorize this application and then when I clicked on it, it gives me this error:
Error 400: redirect_uri_mismatch The redirect URI in the request, urn:ietf:wg:oauth:2.0:oob, can only be used by a Client ID for native application. It is not allowed for the WEB client type. You can create a Client ID for native application at.
What application should I have applied for the OAuth in this case.
I know that this issue could be related to redirect URL. But because I am running this out of my script on my local computer, I am wondering what my URL should be.
You have to acknowledge that your issue above is precisely due to the redirect URI mismatch. The error response you got from the API is indicating you this.
To fix you issue, you'll have to have the same redirect URI set on your project within Google developers console and, at the same time, within your Python script.
If you indeed are running your application on your desktop (laptop) computer, then follow on the error message advice: within Google developers console, do set your project type to be of Desktop kind.
I have successfully created a Node.js server with Express and also installed nodemailer to send the data from the 'Contact Me' form from my front-end React app. I have uploaded this on Heroku.
I have a question though - since this endpoint is set up on this public domain, in theory, someone could inspect my source code, find the URL, and build a script out to make a ton of POST requests with random data to blow up my inbox.
Is there anything that can be done to stop this sort of behavior? Where would I even start to research into this?
I think Captcha could help you.
CORS is what you're looking for. I recommend reading up a lot more on it since it will pay off greatly for your web development journey! https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
The short answer is that you must set a Access-Control-Allow-Origin: <yoursite>.com header in CORS policy for your Node.js app (install it from npm), which will turn down any requests made by a 3rd party actor who inspects the form destination address.
I am trying to host my web app on localhost. I am using directline 3.0 and I want to push the messages into a window using websockets. I don't want to embed the bot. I already have the GET and POST request so I can send and receive the conversation by running the javascript files with the bearer tokens and get back the conversation running by sending and receiving messages from the bot but I want this to take place on the localhost website on a chat based window without embedding.
How can I do this? How do I link the chat window of websockets to the GET and post files so i can send the messages in real time.
I would recommend you integrate Direct Line directly (no pun intended) into you project by using the BotFramework-DirectLineJS package. This package is built specifically for communicating with a bot without using WebChat as the UI component.
There is a v3 example that you can reference. The project splits between the DirectLineBot and the DirectLineClient. The DirectLineBot demonstrates a v3 bot. You'll need to update this folder to include your v4 bot. The DirectLineClient works the same with v3 or v4. So, as your client connects, generates a token, and begins sending activities, your v4 bot should pick these up and respond accordingly. Similarly, your client should pick up the bot's responses.
At this point, you need to update your client to display the activities as they are sent and received from the user / bot.
You might also consider looking over this unofficial "plain ui" sample from the WebChat dev. It uses React however it does not rely on WebChat as the UI component. I was able to spin it up in about 5 mins. It is purposefully stripped of any styling and simply posts activities to the page as text/json objects.
You could remove the input field and configure the page to accept inputs to render on the page. It might be a useful starting place and could fit well with the above DirectLineJS option.
If none of those options are agreeable, then you will need to use Axios, Fetch, or some similar package to make your GET, POST, etc., calls between your client and bot.
Hope of help!
Is it possible to use google apps script in my HTML? I want to be able to write to a spreadsheet from a form in purely Javascript from an external framework such as Node.js.
https://developers.google.com/apps-script/
Google Apps Script's syntax is Javascript, however it is a unique server-side framework that does not behave as a library to applications outside of the Apps Script servers. (No, you won't be able to use Google Apps Script in your node.js app.)
However, that doesn't mean that your node.js app (or any other app on the web) can't interact with your spreadsheet. For instance, your app could authenticate as you using the OAuth API, then access the spreadsheet through the Google Drive API. For an example of this, see Accessing Google Spreadsheets from Node.js
Alternatively, you could roll your own spreadsheet API in Google Apps Script, to support read / write of your sheet via HTTP requests from your node.js app. There are plenty of examples of that, for example Insert new rows into Google Spreadsheet via cURL/PHP - HOW?.
Sure you can. You can use HtmlService to create your web form, then send the submission data to your Spreadsheet with server functions.
Nowadays you could use the Google Apps Script API to call your Google Apps Script code from other platforms like Node.js, actually the official docs include a quickstart for Node.js.
You can you use HtmlService, but maybe can be helpfull to read the Google Hosted Libraries https://developers.google.com/speed/libraries/
To use a Javascrtip library inside GAS, I recommend JQuery.
But Maybe, you can use Node.js inside your external website and make a AJAX Request (get or post) to a GAS and return from GAS this:
ContentService.createTextOutput(e.parameter.callback + "("+Utilities.jsonStringify(JSONDATA)+")").setMimeType(ContentService.MimeType.JSON);
After that, process it inside your AJAX request...
Mogsad is right that you might be better of with Google Drive API to interact with your Spreadsheet!
...But depending on your exact need you might have some possible interaction between external service and google apps scrip using Content service Google Dev link.
Content Service can send back several information upon GET request (ATOM, CSV, ICAL, JAVASCRIPT, JSON, RSS, TEXT, VCARD, XML). By playing around with url parameters you can get information out and in a spreadsheet, send an email, trigger some action etc!.
But that is far from a real external library and direct interaction with server side functions!
I am trying to implement a Google+ sign in option as part of a chrome extension using the one-time code flow as described here.
While making a request using the javascript Google API package a popup opens with an "origin_mismatch" error. This is obviously since I need to add my origin to the relevant Client Id on the Google API console.
My origin is : chrome-extension://<my extension id> however when trying to add that on the API console I get an error saying "Invalid URI: chrome-extension://..." which probably means this scheme is not supported.
Any idea what I can do instead?
I've faced the same problem. I think Google has changed the validation for javascript origins and doesn't allow origins from chrome-extension any more. Google gives you the Chrome Identity API instead (https://developer.chrome.com/apps/app_identity)
But there is a workaround. If you already have at least one chrome-extension://[ext_id] origin in your client ID and you have for example the older version of your extension with this extension ID, you can:
install this extension
go to C:\Users\username\AppData\Local\Google\Chrome\User Data\Default\Extensions (for windows)
find your extension there and open the manifest.json
copy the line "key":"[your_key]" and paste it into your developed manifest
and after next build you should get the extension with the same id as it was in the working one. Also it won't change any more.