Facing issue while integrating bot with web/mobile client channel

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?

1 Like

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

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 JadhavChatbotError Error indexhtml1 indexhtml2

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.

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

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});

users

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.

1 Like

Hi @jperez,

Please give us more details on your requirement/issue.

Regards,
Yoga Ramya,
Kore Support Team.

Hi @riya.sharan,

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

Regards,
Yoga Ramya.

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:

  1. 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
  2. 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.
  3. Any other error on console - Please deal with the error on a case to case basis.

I hope this answers your question/ concern.

1 Like

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

1 Like

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

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.

JWTerror

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.

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

@dan.stoddart You need not delete the channel though.Incase, if you want the channel to use another application which uses HS256 instead of RS256, you can create another application by selecting the HS256 alg and then associate the new app with the channel.

Below is the difference between RS256 and HS256 algorithms:
RS256 is an asymmetric algorithm, and it uses a public/private key pair: the identity provider has a private (secret) key used to generate the signature, and the consumer of the JWT gets a public key to validate the signature.
HS256 , on the other hand, is a symmetric algorithm, with only one (secret) key that is shared between the two parties

HI @swathi.vadlamani I am facing the issue while integrating the bot the error which i am facing is :
Error: Failed to lookup view “error” in views directory “C:\SDKApp\sdk”
at Function.render (C:\SDKApp\node_modules\express\lib\application.js:579:17)
at ServerResponse.render (C:\SDKApp\node_modules\express\lib\response.js:961:7)
at C:\SDKApp\app.js:55:7
at Layer.handle_error (C:\SDKApp\node_modules\express\lib\router\layer.js:71:5)
at trim_prefix (C:\SDKApp\node_modules\express\lib\router\index.js:310:13)
at C:\SDKApp\node_modules\express\lib\router\index.js:280:7
at Function.process_params (C:\SDKApp\node_modules\express\lib\router\index.js:330:12)
at IncomingMessage.next (C:\SDKApp\node_modules\express\lib\router\index.js:271:10)
at done (C:\SDKApp\node_modules\express\lib\response.js:956:25)
at Function.render (C:\SDKApp\node_modules\express\lib\application.js:581:14) ’

Hi @siripurapurahul,

We hope you have read the responses from the above thread.
Please go through the following solutions to resolve the error, however, this error shouldn’t be blocking the bot functionality.

And

Kindly implement as mentioned on the above responses and let us know if the issue is still persistent even after making the necessary changes.

Regards,
Yoga ramya.

Heyo!

I was successfully able to follow the tutorial and connect to the sample Travel Application, but when i try to integrate with my Demo bot i am getting 401 errors.

I have triple checked my Bot_name, bot_id, client_id, and client_secret and gets rid of this error :frowning:

Anyone know where else I should look?

Hi @yogaramya.mendu I am still not able to see chat window in the browser even after following the above steps can you please refer to my index.html and tell me if anything needs to be changed so that i could modify it accordingly i have tried different urls for each different url it is throwing different error

screenshot1 screenshot2 screenshot3 screesnhot4

for url: http://localhost:3000/api/users/sts
The response in browser : respond with a resource.
The error in command prompt is :
Error: Failed to lookup view “error” in views directory “D:\dev\SDKApp\sdk”
at Function.render (D:\dev\SDKApp\node_modules\express\lib\application.js:579:17)
at ServerResponse.render (D:\dev\SDKApp\node_modules\express\lib\response.js:961:7)
at D:\dev\SDKApp\app.js:55:7
at Layer.handle_error (D:\dev\SDKApp\node_modules\express\lib\router\layer.js:71:5)
at trim_prefix (D:\dev\SDKApp\node_modules\express\lib\router\index.js:310:13)
at D:\dev\SDKApp\node_modules\express\lib\router\index.js:280:7
at Function.process_params (D:\dev\SDKApp\node_modules\express\lib\router\index.js:330:12)
at IncomingMessage.next (D:\dev\SDKApp\node_modules\express\lib\router\index.js:271:10)
at done (D:\dev\SDKApp\node_modules\express\lib\response.js:956:25)
at Function.render (D:\dev\SDKApp\node_modules\express\lib\application.js:581:14)


and for the url : http://demo.kore.net:3000/users/sts

I am not seeing any error in my command prompt

Output in the browser:

at /var/www/html/scripts/jwtservice/app.js:30:13
at Layer.handle [as handle_request] (/var/www/html/scripts/jwtservice/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/var/www/html/scripts/jwtservice/node_modules/express/lib/router/index.js:312:13)
at /var/www/html/scripts/jwtservice/node_modules/express/lib/router/index.js:280:7
at Function.process_params (/var/www/html/scripts/jwtservice/node_modules/express/lib/router/index.js:330:12)
at next (/var/www/html/scripts/jwtservice/node_modules/express/lib/router/index.js:271:10)
at /var/www/html/scripts/jwtservice/node_modules/express/lib/router/index.js:618:15
at next (/var/www/html/scripts/jwtservice/node_modules/express/lib/router/index.js:256:14)
at Function.handle (/var/www/html/scripts/jwtservice/node_modules/express/lib/router/index.js:176:3)
at router (/var/www/html/scripts/jwtservice/node_modules/express/lib/router/index.js:46:12)

@swathi.vadlamani
We are using travel planning sample bot for practicing the chatbot implementation with sdkApp.
we chose HS256 algorithm and jwtURL as “http://localhost:3000/api/users/sts”. we are getting following error in node console. browser is displaying “respond with a resource” message.

Failed to lookup view “error” in views directory “D:\dev\SDKApp\sdk”.

Even we tried with “http://demo.kore.net/users/sts” but no luck. This time browser is displaying follwoing message “Cannot GET /users/sts”

Can you please help me in resolving this issue.

Thanks in advance