Implementation guide - WebUI

👍

This guide will teach you:

• How to implement the Search WebUI in your application

User flow

This is the high-level flow we will implement:

Guide

Below follows a step by step implementation guide. If you prefer to follow a code example, take a look at this recipe.

1. Add an entry point in your app

Add an entry point somewhere in your mobile app. For example:

When a user clicks the entry point, you should make an API call to your backend.
Steps 2-4 should be implemented in your backend:

2. Get an access token

• For sandbox: copy-paste a sandbox access token from console.minna.tech.
• For production: Follow the Authentication guide

3. Create a user

Create a user using Minna's APIs:

curl --request POST \
     --url <<api_domain>>/v1/users \
     --header 'Accept: application/json' \
     --header 'Content-Type: application/json' \
     --header 'Authorization: Bearer <<authorization_bearer_value>>'
     --data '{
     "externalId": "a12-345",
     "emailAddress": "[email protected]",
     "name": {
          "first": "John",
          "last": "Doe"
     },
     "locale": "en-GB"
  }'

Response:

{
    "id": "<<user_id>>",
     "externalId": "a12-345",
     "emailAddress": "[email protected]",
     "name": {
          "first": "John",
          "last": "Doe"
     },
     "locale": "en-GB"
  }

Take note of the id property. You will need it for the next steps.

📘

Good to know

You can call POST /v1/users for already existing users. If that externalId already exists, then the user will be updated.

4. Fetch WebUI URL

Fetch a single-sign-on URL for your user to Minnas Subscription hub web ui:

curl --request GET \
     --url <<api_domain>>/v2/users/<<user_id>>/webui \
     --header 'Accept: application/json' \
     --header 'Content-Type: application/json' \
     --header 'Authorization: Bearer <<authorization_bearer_value>>'

Response:

{
    "webUi": {
      "url":"<<frontend_domain>>/subscription-search?locale=en-GB"
        "authToken":"aQcDW2I09YTbc"
        "validTo":"2019-08-02T23:59:59+01:00"
      }
}

Next, pass url and authToken from your backend to your frontend client.

5. Open WebUI URL in app

Once you have the url and authToken available in your app, follow the WebUI guide to open it.

6. Done 🎉

Good job! Now you should see the Search page in your app:

Next steps

To improve the integration further, you may consider:

• Implementing additional entry points
• Implementing user messaging