Facing issue while integrating bot with web/mobile client channel

ankitsaini345 · January 23, 2019, 5:14am

I am following this tutorial to integrate a bot with sdkApp provided in the same tutorial, but I am getting the following error

And after updating path (19th point), chat window disappears.

Please help me with editing the index.html file inside “/SDKApp/sdk/UI” folder.

swathi.vadlamani · January 23, 2019, 5:22am

Hi @ankitsaini345 please try the steps given below and check once again.

To download and install node.js on your computer, go to https://nodejs.org/en/download/, and then select your OS as .pkg for Mac, and .msi for Windows. In a Terminal window, run the node -v command to verify installation and version, for example, v6.10.2
Make sure you have all packages form node installed on your system. Use the following commands for installing the required packages after installing node.js
npm install express
npm install body-parser
npm install jwt-simple
For hosting the bot on your web application, you should have a web app running along with a JWT service. So please open generateJWT.js file and define the clientSecret value as shown below and save:
var clientSecret = req.body.clientSecret;
Download your web applications web-sdk folder, unzip it, go to UI folder and EDIT index.html file and enter the following details and save. Sample attached.

“clientSecret”: “{client secret}”
$.ajax({
url: “http://localhost:3000/api/ /users/getJWT”, //this is sample url of my localhost. This should include the url where you are hosting the bot.
botOptions.userIdentity = ‘ ‘;// Provide users email id here
botOptions.clientId= "{client id} "; // secure client-id
_botOptions.botInfo= {name:"{bot name}","id":"{bot id"}; // bot name is case sensitive

You find all these values in Apps and Agents - Web/Mobile SDK in your bot.
Once you save the index.html, run it .

Keep me posted.

ankitsaini345 · January 23, 2019, 7:13am

Hi Swathi,

I did all the steps but still getting the same error.

Error: Failed to lookup view “error” in views directory “C:\Users\sainankc\Downloads\Kore.ai\SDKApp\sdk”
at Function.render (C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\application.js:579:17)
at ServerResponse.render (C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\response.js:961:7)
at C:\Users\sainankc\Downloads\Kore.ai\SDKApp\app.js:55:7
at Layer.handle_error (C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\router\layer.js:71:5)
at trim_prefix (C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\router\index.js:310:13)
at C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\router\index.js:280:7
at Function.process_params (C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\router\index.js:330:12)
at IncomingMessage.next (C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\router\index.js:271:10)
at done (C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\response.js:956:25)
at Function.render (C:\Users\sainankc\Downloads\Kore.ai\SDKApp\node_modules\express\lib\application.js:581:14)

Thanks,
Ankit Saini

swathi.vadlamani · January 23, 2019, 7:19am

@ankitsaini345 Can u share your index.html? I am sharing a screencap of sample index.html for your reference. The url is see is pointing to my local host.

If you are using Kore’s web chnanel then the URL should be “[http://demo.kore.net/users/sts”]

ankitsaini345 · January 23, 2019, 9:40am

The problem was with the localhost URL. Now its working.

Thanks
Ankit

swathi.vadlamani · January 23, 2019, 9:41am

Glad we could help you!
Thanks
Swathi

riya.sharan · January 24, 2019, 5:12am

Hi Swathi,
I have developed an angular UI application and need to integrate the bot with the same.

How can I open the chat bot with a button in my index file?

jperez · January 28, 2019, 4:43am

@swathi.vadlamani Do you help me with JWT configuration? I don´t know how do it.

mitalee.jadhav · February 20, 2019, 6:25am

Hi @swathi.vadlamani ,

I am also following the same tutorial (https://developer.kore.ai/docs/bots/kore-web-sdk/kore-ai-web-sdk-tutorial/) and I am also facing the same issue. I followed all the instructions you mentioned to @ankitsaini345 but still facing issue. I think I am missing something. I am attaching the snapshot of the error and index.html.

I am still not clear with the JWT url that we need to mention. Which URL we need to mention in botOptions.JWTUrl. I think the problem is with URL only. Please guide me.

Thanks & Regards,
Mitalee Jadhav

Subrahmanyam · February 20, 2019, 6:39am

Could you please check if the bot has been published? If not, please pass the developer email of the bot as user identity at index.html.

Once the bot is published on admin, as the bot is of purpose consumer, any identity can be passed in the index.html and the bot responds.

mitalee.jadhav · February 20, 2019, 6:55am

Bot is published and I am also passing user’s email id as user identity at index.html which I have blurred.

yogaramya.mendu · February 22, 2019, 7:57am

Hi @mitalee.jadhav,

Please re-check if you have implemented the following steps as per the instructions:

As mentioned on Step 17, you have downloaded the SDKApp.
As mentioned on Step 19, you have configured the index.html.
Try with “isAnonymous”: true also.
As JWT URL try with http://localhost:3000/api/users/sts .

Note: SDKApp and WebSDK are different.
Please ensure that you have unzipped the content of WebSDK into SDKApp/sdk (example: Under C:\KoreWDSK\SDKApp\sdk you should be able to see libs, UI, UI-JavaScript directories etc.)

If all the mentioned steps are correctly implemented, you should not have any issue in the command node startServer.js.

Invoke http://localhost:3000/api/users/sts in the browser.

If you get CORS error, while connecting to the chat window, then open the file - SDKApp\routes\users.js

Include the following snippet:

res.header(‘Access-Control-Allow-Origin’, “*”);

between

var token = jwt.sign(options, clientSecret);

and

res.send({“jwt”:token});

Now, invoke http://localhost:3000/api/users/sts in the browser to check.

We will update the documentation as per the requirement.

Regards,
Yoga Ramya,
Kore Support Team.

yogaramya.mendu · February 22, 2019, 7:57am

Hi @jperez,

Please give us more details on your requirement/issue.

Regards,
Yoga Ramya,
Kore Support Team.

yogaramya.mendu · February 27, 2019, 9:47am

Hi @riya.sharan,

Please find the response for this query in Integrating Bot with WebApp developed in Angular

Regards,
Yoga Ramya.

swagata.sengupta · February 28, 2019, 8:42am

Mitalee,

On the error that you are getting on console, it does not stop any connectivity to bot.

In your case, you are probably serving the index.html as https://localhost:3000. You can try opening the index.html as a file (right click --> open with chrome etc.) and you will not see any error on console.

Reasons for console error while serving a page could be (not limited to) the following:

If you get error on line 2830 of chatWindow.js for initGapi() function, this is only google speech related. You can get rid of this error by making
isSpeechEnabled: false, allowGoogleSpeech: false,
in index.html
You may get error for missing resources - favicon.ico and libs/img/emojione.sprites.png
You can feel free to add these resources at the mentioned path and it should work.
Any other error on console - Please deal with the error on a case to case basis.

I hope this answers your question/ concern.

dan.stoddart · March 28, 2019, 7:17pm

Hello,

I am facing the same issue and I’m hoping someone can advise.

I have followed all the steps of the tutorial:

https://developer.kore.ai/docs/bots/advanced-topics/kore-web-sdk/kore-ai-web-sdk-tutorial/

and have the files and folders of the web-core-sdk project in the SDKApp/sdk folder

When i load http://localhost:3000/UI/

I see:

“error verifying the jwt”

and I see this in the browser console:

bots.kore.ai/api/oAuth/token/jwtgrant:1 POST https://bots.kore.ai/api/oAuth/token/jwtgrant 401
kore-bot-sdk-client.js:324 Error: Unable to process request, received bad 401 error
at handleTransportResponse (kore-bot-sdk-client.js:840)
at Object.handleRequestTranportRes (kore-bot-sdk-client.js:1392)
at Object.wrapper [as callback] (kore-bot-sdk-client.js:7401)
at on_end (kore-bot-sdk-client.js:3212)
at XMLHttpRequest.on_state_change (kore-bot-sdk-client.js:3162)

I am using this value in the index.html:

botOptions.JWTUrl=“http://localhost:3000/api/users/sts”;

but have also tried:

botOptions.JWTUrl=“http://demo.kore.net/users/sts”;

As well as setting isAnonymous to both true and false.

Am i missing a step?

Thanks,
Dan

dan.stoddart · March 28, 2019, 7:17pm

Hello,

I am also facing this issue (the issue of the original post) and I’m hoping you can help.

When loading http://localhost:3000/UI/ I see:

“error verifying the jwt”

and in the web console this:

POST https://bots.kore.ai/api/oAuth/token/jwtgrant 401
kore-bot-sdk-client.js:324 Error: Unable to process request, received bad 401 error
at handleTransportResponse (kore-bot-sdk-client.js:840)
at Object.handleRequestTranportRes (kore-bot-sdk-client.js:1392)
at Object.wrapper [as callback] (kore-bot-sdk-client.js:7401)
at on_end (kore-bot-sdk-client.js:3212)
at XMLHttpRequest.on_state_change (kore-bot-sdk-client.js:3162)

In my index.html I have this:

botOptions.JWTUrl =“http://localhost:3000/api/users/sts”;

and have also tried

botOptions.JWTUrl =“http://demo.kore.net/users/sts”;

and neither works.

I can see from the server logs that the token is being generated locally (in the SDKApp project)

I’m hoping someone can advise. My bot is published and I’ve double checked the bot info (client id, client secret etc)

Am i missing a step?

Thanks,
Dan

dushyantk2 · March 29, 2019, 3:49pm

Hi Team ,

Even i am facing the same issue. I have done all the steps which are mentioned in the document. In my case i am using enterprise bot.
Could you please help me to solve this issue.

swagata.sengupta · March 29, 2019, 3:57pm

Have you started the SDKApp (node.js app)? You will need to have WedSK contents unzipped into SDK App. Start SDK App.

Hope you all have read through this post in the thread above.
https://test-discourse.kore.ai/t/facing-issue-while-integrating-bot-with-web-mobile-client-channel/521/13?u=swagata.sengupta

dan.stoddart · April 2, 2019, 4:10am

Hello,

I resolved my issue by deleting the “Web/Mobile Client” Channel and recreating it with the H256 algo selected (maybe I had originally selected the other algo I’m not sure)

Thanks,
Dan