1. Home
  2. Docs
  3. Tutorials
  4. Add Account Linking to your Conversational App

Add Account Linking to your Conversational App

In the previous guide, you built a “what happened today” conversational application that can recognize requests from users and serve the dynamic information the user is requesting using web APIs. In this tutorial, we will add an account linking feature to our application, to connect the identity of the end user with a user in your system. We will also show how to use the end user data to serve dynamic personalized content to the end user.

Some of the information in this guide is more developer-centric, but don’t be discouraged. If you follow the steps as they’re outlined, you will have a deployed, working “what happened today” app.

Customize your authorization page

  1. Open the Authorization tab from the left menu
  2. Inside, you can find an HTML template for your authorization page. You can change the look and feel, add or remove form fields as you wish.
  3. To preview your authorization page, click the “Preview Authorization Page” in the editor’s top menu
  4. Let’s do some changes to our authorization page:
    • Change the body background to blue by locating the CSS code
      body {
              background-image: url("https://167a9.https.cdn.softlayer.net/80167A9/s1.mob-server.com/login/osman-rana-293978.jpg");
              background-size: 120% 140%;
              background-repeat: no-repeat;
              background-position: bottom bottom;
              margin-top: 30px !important;
          }

      And changing it to

      body {
              background-color: blue !important;
              margin-top: 30px !important;
          }

      Click save, and reopen the preview page to view the changes

    •  To validate the user’s credentials you will need to add a call to your authorization server in the function “checkLogin” and to call the function “checkLoginOnSuccess” on success or “checkLoginOnFail” on failure.
    • To store the user’s details in Conversation.one secured resource server, call the function “authorizeSucess”. You can see the example code in the provided template
      var pin = $("#user_pincode").val();
      
      var data = {};
      data.firstname = $('#user_firstname').val();
      data.lastname = $('#user_lastname').val();
      data.name = $("#business_fields_name").val();
      data.password = $("#business_fields_pass").val();
      data.email = $("#user_email").val();
      data.mobile = $("#user_mobile").intlTelInput("getNumber");
      data.validationtest = "1234567890";
      var resource_data = JSON.stringify(data);
      authorizeSucess(data.name, resource_data, pin);

      You can remove some of the stored fields, or add new ones as needed. For example, you might need to store an authorization key to your backend system.

Fetch user data in your response code

To access the users data, use the function “sdk.conversationHelper.getBackendContext”. The function will verify that account linking is enabled and will fetch the users’ data from the secured resource server. On first access, the function will ask the user to provide the user selected PIN code.

  1. Make sure you have an “EnterPINCode” intent. If not add one.
  2. Edit the code response of the “whatHappenedToday” intent to the code:
    var backendcontext = sdk.conversationHelper.getBackendContext(context, req, res);
    if (!backendcontext) return;
    var today = new Date();
    var day = today.getDate();
    var month = today.getMonth()+1;
    return fetch("http://history.muffinlabs.com/date/"+month+"/"+day)
     .then(function(res) {
        return res.json();
     }).then(function(json) {
        var events = json.data.Events;
        var randomEvent = Math.floor(Math.random() * (events.length));
        var selectedEvent = events[randomEvent];
        res.say("Hi "+ backendcontext.firstname+".");
        res.say('On this day,'+selectedEvent.year+' - '+selectedEvent.text.replace(/(\(.*\))/g,''));
     });

    The first two lines fetch the user’s data. The code “res.say(“Hi “+ backendcontext.firstname+”.”);” is using a stored users data to provide a personalized response.

Try it out

Now that your app has account linking enabled, and can fetch the stored users’ data, try out what you have so far.

In the chat console on the right, type in a request. The request can be a little different than the examples you provided in the User Says section. This can be something like “what popped up today”. After you type the request, hit “Send”.

The chatbot will ask you to link your account. Click on the Open log-in window” and fill in your data.

You can use any value for user name and password. To verify those values, connect it to your own authentication server as described above

Now the chatbot will ask for your pre-selected PIN code, once provided you will get a personalized response from the chatbot.

What’s next?

In the next part, you’ll use entities to extract parameter values from natural language inputs.

Next

 

Was this article helpful to you? Yes 1 No

How can we help?