Welcome to one more Dialogflow Tutorial to advance your chatbot development journey. In this tutorial we are going to take you through implementation of Account Linking feature in Dialogflow for Google Assistant.
Account linking can be highly useful when you already have users on your website and you want to offer them same services on Google Assistant or Facebook Messenger. Using Account Linking, your users can use the same account of your website to login into your Google Assistant chatbot. In this Dialogflow tutorial, we are going to explain how to setup Account Linking in Dialogflow using NodeJS.
For this tutorial, we have some pre-requisites. You should have
- Basic knowledge of Dialogflow and NodeJS
- NodeJS pre-installed on your system
- NGROK or any other tunneling software installed on your system
Let’s start!
1. First login to your google account and go to the Dialogflow home page and click on the Go to console.
2. Now click the dropdown [ if you have created the dialogflow project earlier ] or click on the create new agent.
3. Now provide the name for the agent and choose the default language for agent then select time zone from the dropdown and then click on create button.
4. Now we will create an intent. By clicking on “create the first one” or click the + on left side bar intent menu.
5. Now name the intent and then click on the save button.
6. Add the training phrases for the intent.
7. Click on the right side link named as Google assistant. This will open up a new window.
8. Click on Develop tab in the top bar in newly opened window.
9. Click on the Account linking on the left side bar menu then select No, I only want to allow account creation on my website. Then click on next.
10. Select OAuth from first dropdown and Implicit from the second one. Now click next button.
11. Now we will need ClientID for that goto https://console.cloud.google.com/apis/credentials.
12. Now find New Actions on Google App below OAuth 2.0 client IDs tab and copy your ClientID.
13. Paste the ClientId in the first tab and in the second input give the authorization URL. Authorization URL is one on which google passes the request when user visits the agent first time or agent unliked from the agent and visited again. Authorization URL contains a form where user will give the necessary details you want. We will make a simple form and then serve it with ngrok for now. So you need to generate permanent token on authorization URL for each user. Now click on the next button.
14. 4th step is optional so we are going to leave it blank.
15. In the 5th step we need to provide some testing instructions then we will save the configurations.
16. Now we will be back on the screen left on step 6. And we will enable fulfillment and then we will save the intent.
17. Now we will be doing coding part. For that make a directory and inside it, open terminal and type npm init then follow the instructions and setup a new npm project.
18. After initiating project directory now its time to install necessary modules type :
npm install action-on-google body-parser express
19. Download the zip file of code (fill up the form at the end of the blog) and extract it. Now goto signupDemo folder and open index.js file and paste your clientID which you copied earlier.
20. Now run the server with command “node index.js“. This will start the server on 4444 port. You need to run ngrok on the same port.
21. Now run the ngrok or your preferable tunneling software tool on the same port as npm server is running. Here our port is 4444. If you are using ngrok then open new terminal and type “sudo ngrok http 4444“
22. Copy the https link from the ngrok terminal.
23. Paste the ngrok-link in google dialogflow. To do that open the browser tab left from step-16. Now click on left side menu Fulfillment and enable the webhook paste the ngrok url here.
24. Open Google assistant in mobile or in browser. If using browser then change the display to ‘Phone’ to see the details.
25. Open action on google from right side bar.
26. In action on google screen click on Talk to my test app located at left side bottom corner.
27. Change the surface to Display.
28. Agent will speak something like “Here’s the test version of my test app ” or “Getting the test version of my test app. Hi! How are you doing?”.
29. Type sign up and press enter after that agent will ask you to link your account. Type yes and press enter.
30. Now a new browser window will open the URL which you have given on step 13 as Authorization URL. This URL consist of 4 things:
-
- response_type=token
- client_id
- redirect_uri
- user_locale
31. You need to generate token on your account linking page and process the request. Token can be anything unique for each user. This token will be used in further conversation to determine whether the user is logged in or not.
We have provided one more js file in folder tokenServer, run index.js with
node index.js
and run ngrok on the same port as your node server is running. If you are using ngrok for testing then you need to change the url given on step 13 each time you get new new url.
32. You need to redirect user on the given redirect_uri after processing your necessary steps.
33. Ask necessary details needed for signup and generate unique token for customer and store it permanently.
34. After redirecting user to the redirect_uri user will be get back at the google assistant and then your bot/agent will continue the conversation.
Once this process is done, everytime a signed in user will access your chatbot, you will find the access token in the request. Using that access token, you can confirm whether the user is signed in or not and prepare response accordingly.
Download Webhook code
To download the code of webhook and tokenserver please sign up to the form below:
Fill up the form below to download the code of webhook and tokenserver.
So, that’s how Account Linking can be integrated and tested in dialogflow for Google Assistant chatbot. If you still face any difficulty then feel free to post your question in the comments.
If you are looking for Chatbot Development services or to integrate Transaction API in your action then do contact us or send your requirement at letstalk@pragnakalp.com. We would be happy to offer our expert services.
