Creating great digital products and services has never been easier. Thanks to organizations who have dedicated themselves to developing platforms that require fewer technical skills, more people than ever can now deliver value-added services to the world.
One of these great tools is Storyline, a service that allows people to create Alexa skills without any coding required. Leveraging voice-powered services allows people to interact and engage with technology in different ways. In the business world context, users who would have previously needed to hunt through menus and dashboards to get to the information they need can simply ask their phone or speaker to bring their information to them.
While Storyline is a great tool, its features are still being developed. One feature that it does not currently support is account linking. Account linking allows you to link a non-Amazon account to your Amazon account, enabling your Alexa skill to authenticate to external services. This would allow you to, for example, ask a Dropbox-enabled Alexa skill to look for a file in your repository and share it with some of your contacts.
Although Storyline doesn’t yet support this feature, you can develop your own authentication mechanism between Storyline and another service with another great no-code platform, Bubble. Bubble is an application development platform that you can use to store and manage your authentication between Storyline, Alexa and other services. You can build your own APIs (application programming interfaces) to act as an intermediary between Storyline and the other service. This allows you to create an Alexa skill that doesn’t hard-code any passwords or other means of authentication into Storyline, while at the same time making your skill more valuable to potential users.
Bubble also gives you the ability to manipulate data returned from external APIs and provide more valuable information to your Alexa users. We’ll discuss this in more detail in a future article.
As an example, let’s develop an Alexa skill to interact with Trello, a productivity platform typically used to track tasks as they go through a lifecycle. To do this, I need to develop a small application using Bubble that will store:
One of these great tools is Storyline, a service that allows people to create Alexa skills without any coding required. Leveraging voice-powered services allows people to interact and engage with technology in different ways. In the business world context, users who would have previously needed to hunt through menus and dashboards to get to the information they need can simply ask their phone or speaker to bring their information to them.
While Storyline is a great tool, its features are still being developed. One feature that it does not currently support is account linking. Account linking allows you to link a non-Amazon account to your Amazon account, enabling your Alexa skill to authenticate to external services. This would allow you to, for example, ask a Dropbox-enabled Alexa skill to look for a file in your repository and share it with some of your contacts.
Although Storyline doesn’t yet support this feature, you can develop your own authentication mechanism between Storyline and another service with another great no-code platform, Bubble. Bubble is an application development platform that you can use to store and manage your authentication between Storyline, Alexa and other services. You can build your own APIs (application programming interfaces) to act as an intermediary between Storyline and the other service. This allows you to create an Alexa skill that doesn’t hard-code any passwords or other means of authentication into Storyline, while at the same time making your skill more valuable to potential users.
Bubble also gives you the ability to manipulate data returned from external APIs and provide more valuable information to your Alexa users. We’ll discuss this in more detail in a future article.
As an example, let’s develop an Alexa skill to interact with Trello, a productivity platform typically used to track tasks as they go through a lifecycle. To do this, I need to develop a small application using Bubble that will store:
- The Trello credentials (namely the Member name for the Trello account and a token that authorizes the app to perform tasks on behalf of the user in Trello). Trello has two different authentication methods; for the purposes of this article we will use the simple authorization option.
- The ‘Amazon User ID’ associated with the Alexa device. Note: This is not an identifier that a user will have across multiple Alexa devices, or if they uninstall and reinstall your skill. For simplicity in this article I am only storing a single User ID per account, although in practice you may need a way to allow multiple IDs per user. Storyline supports sending this identifier to external APIs through its variable support.
- A PIN to support authentication of the user from their Alexa device. This is somewhat inelegant as it requires the user to say a PIN at the beginning of their interaction with our service, but is necessary to support the security of our service. For this article, we’ll use a four-digit PIN to support authentication.
Leveraging Storyline and Bubble to create a Trello Helper skill.
Since we only have an Amazon User ID to go off from Storyline, we are going to need a way to match the Amazon User ID to the account that the user sets up in our app before they can start using our Skill. We’ve developed a four-step process to match up the Alexa device with our account:
- The user creates an account in our Bubble app and request a unique (but temporary) PIN to say when they first access our Alexa skill. At this point their account is considered a Temp account as we don’t have their Amazon User ID linked to their account yet.
- When they add our Alexa skill and say their temporary PIN, Storyline passes this along with their Amazon User ID to our Bubble app via an API endpoint we will create.
- The Bubble app will then send the user an e-mail with a unique confirmation code to ensure that someone has not guessed their temporary PIN (or said their own temporary PIN incorrectly). When this occurs the account is considered to be Awaiting Confirmation.
- When the user clicks on the link in their e-mail the account will be considered Authorized and the skill can now be used. The user is taken to a page where they can update their PIN to another value if they choose.
Account authentication.
Creating the Bubble App
To create the Bubble app, go to https://bubble.is and sign up for an account. They have a free tier that will allow you to get used to the platform, although you may require a paid plan to support a production version of an Alexa service using this approach.
Once you’re signed up, create a new app. Let’s start by creating the data structures we need to support our service.
User Fields
There is already a User entity (called “things”) in Bubble – we will add some additional fields to support the data we need. Click on the Data icon in the Canvas and select User, then create the following fields:
Once you’re signed up, create a new app. Let’s start by creating the data structures we need to support our service.
User Fields
There is already a User entity (called “things”) in Bubble – we will add some additional fields to support the data we need. Click on the Data icon in the Canvas and select User, then create the following fields:
- amazonuserid (type text)
- authcode (type text) – this will store our four digit PIN. We’ve made this a text field to support leading zeros
- codestatus (type text) – this will store the status of our account: if the PIN is a temporary PIN that was auto-generated, the PIN has been used once and our account is awaiting validation, or if the account has been authorized.
- confcode (type text) – this field will be added to a URL to confirm the account once the PIN is entered for the first time by the user. Once the confirmation has been completed this code can be deleted.
- trellotoken (type text) – this field will store the token authorizing our app to interact with Trello on behalf of the user. Trello tokens can expire depending on the settings you choose when you request the token – for the purposes of this article we will assume we have requested a token that doesn’t expire.
- trellousername (type text) – this field will store the user’s Trello member name, as this is needed to search for some records in Trello.
Setting Up a Temporary PIN
On the index (home) page of our app, we will build out the user interface that will allow people who have created an account to connect their Trello account as well as generate a PIN to use to connect their Alexa device.
To generate the temporary PIN we need to have a unique four digit temporary PIN that isn’t assigned to any other user that currently has a temporary PIN (it’s OK if other users who have already authorized their accounts have the same PIN).
To do this, we want to set up two workflows – the first workflow will set the codestatus value on the user to Temp when the Generate Temporary PIN button is pressed. The second will run in the background and check to see if there are any users that have a codestatus of Temp but no PIN assigned. When it sees this situation, the workflow will create a temporary PIN and save it to the user provided no other users with a temporary PIN have that number.
To create the first workflow, we double click on the Generate Temporary PIN button and select Start/Edit Workflow.
In the workflow we want to create a Single Step that makes a change to a Thing (in this case, a User). We will set the codestatus value of the current user to Temp.
To do this, we want to set up two workflows – the first workflow will set the codestatus value on the user to Temp when the Generate Temporary PIN button is pressed. The second will run in the background and check to see if there are any users that have a codestatus of Temp but no PIN assigned. When it sees this situation, the workflow will create a temporary PIN and save it to the user provided no other users with a temporary PIN have that number.
To create the first workflow, we double click on the Generate Temporary PIN button and select Start/Edit Workflow.
In the workflow we want to create a Single Step that makes a change to a Thing (in this case, a User). We will set the codestatus value of the current user to Temp.
For the next workflow I want it to run as long as a particular condition is true.
I want the workflow to run as long as the current user’s PIN (which we’ve called authcode) is empty and their codestatus is Temp.
For the first step in this workflow, I want to create a random temporary PIN using Bubble’s Calculate Randomstring function. I can set the number of characters to four and indicate I only want digits included.
The next step in the workflow is to delete the value I just created if there is more than one user with the same Temporary PIN value.
This workflow will continue to run until a random PIN is generated that doesn’t match any other user’s temporary PIN. This means that we can have a maximum of 9999 users in the system that have not authorized their accounts.
On the screen I have a text field that displays the PIN value once it has been set.
On the screen I have a text field that displays the PIN value once it has been set.
Authorizing the Alexa Device
When the user says their PIN in Storyline, we will need to have an API endpoint that can take the PIN value and their Amazon User ID and determine whether:
- The user is trying to connect their Alexa device for the first time
- The user has already connected their device and has said the correct PIN
- The user has already connected their device but has said an incorrect PIN
We will send back a single variable in our response called result, which will tell the user what happened and what to do next if something unexpected occurred.
First, if the user has already authorized their Alexa device and the PIN matches their PIN, then we can return a simple result that says “Thanks!” and then moves onto the interactions within Storyline.
First, if the user has already authorized their Alexa device and the PIN matches their PIN, then we can return a simple result that says “Thanks!” and then moves onto the interactions within Storyline.
Next, let’s check if the user already has authorized their Alexa device and if they entered the correct PIN. If they didn’t, we will set the result to indicate that a bad PIN was entered. Note: Since this is a public endpoint you may also want to add a counter that tracks how many bad PIN entries occur for a given amazonuserid, and then prohibit further attempts until the user logs into the web app and ‘unlocks’ their account.
If this result doesn’t occur, we will then want to see if the amazonuserid is connected to any account yet. If it’s not, then we will want to update the codestatus to Awaiting Confirmation and create a random confcode that can be sent to the user in an e-mail.
Search used as the criteria to trigger the workflow step
If a confirmation code is generated, then we generate an e-mail and append the confirmation code to a link that will be used to finalize the connection between the accounts.
Lastly we will return a result to Alexa to indicate that the user should check their e-mail and click on the link to finalize the account connection.
Creating the Confirmation and Update PIN Pages
We’ll create a simple confirmation page that indicates the account connection is now complete.
On the confirmation page, we need to create a workflow when the page loads to finalize the authentication. First, we’ll double check that the confirmation code is valid; if not we’ll redirect to the home page.
Assuming the confirmation key is valid, we then want to update the user’s codestatus to Authorized for the user who matches the confirmation code matches the value passed in.
Lastly, we’ll remove the confirmation code from the user’s record to avoid having any issues with duplication of codes (or clicking on the e-mail link multiple times).
At this point the user can now interact with our Alexa skill by simply saying their PIN number whenever they load the skill.
We can also create a simple update PIN page that allows the user to change their PIN value to anything they wish.
We can also create a simple update PIN page that allows the user to change their PIN value to anything they wish.
I can set the input text variable to ensure that only digits are entered and then on the update workflow ensure that exactly four digits are entered.
PIN Input Field Setup
Workflow to Update PIN
Storyline Setup
In Storyline, we want to prompt the user at the beginning of their interaction with the skill for their PIN and send it off to our Bubble app. We then want to take the user to a landing block where they can re-enter their PIN if necessary or start interacting with the intents to manage their Trello account.
In Storyline we’ve set up a variable called pinValue which is a four digit number type. In theory you can simply have the user say their four digit PIN value without needing to say a phrase along with it, however in testing we found that adding “My PIN is” before the value ensured that the value was recognized all the time.
Once the value is captured, we go to a Check Authorization block that will pass the PIN value along with the amazonUserId value over to our authorize API we built. We have Alexa read back the response from our Bubble app to let the user know what they should do next
If the PIN entered didn’t match, the user can try re-entering the PIN from the Landing block. Otherwise they can start asking about their cards and boards in Trello to see what’s overdue, how many items are in each list, and the like.
Your Authenticated Skill
Combining Storyline and Bubble allows to build more elaborate and complex skills that can deliver more value to your user base. We hope this article helps you think of new and creative ways to leverage these tools to make the lives of others better.
If you have any questions or want to let us know if this was helpful, feel free to contact us.
If you have any questions or want to let us know if this was helpful, feel free to contact us.