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:

14251425

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:

347347

Example of entry point in your mobile app

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

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:

780780

Minna's WebUI

Next steps

To improve the integration further, you may consider: