Mijn Burgerprofiel Embed SDK

@govflanders/mbp-embed-sdk lets a page embedded in Mijn Burgerprofiel communicate with its host application. An embed can set host UI metadata, navigate, read host context, schedule notifications, and request runtime SSO when it has been configured for that purpose.

What is Mijn Burgerprofiel?

Digitaal Vlaanderen provides Mijn Burgerprofiel for the Flemish government and local municipalities. Citizens use it through the mobile app or at burgerprofiel.be.

An external service can provide content or functionality in Mijn Burgerprofiel as an embedded page, rather than sending the user to a separate website or building a custom integration for every host.

An integration has three parts:

1. The host environment opens the content. This can be burgerprofiel.be in an iframe or a mobile app in a webview.
2. The embedded page is the provider page shown in the host.
3. MbpEmbedClient is the SDK client used by the embedded page.

How an embed connects

A host application opens the embedded page in an iframe or webview. The page creates an MbpEmbedClient and connects it to the host. After the connection succeeds, the client sends requests to the host through the SDK.

┌──────────┐                  ┌───────────────┐                ┌───────────────┐
│   Host   │                  │ Embedded Page │                │ mbp-embed-sdk │
└────┬─────┘                  └───────┬───────┘                └───────┬───────┘
     ├────┐                           │                                │
     │    │ Listens for connections   │                                │
     │    │  [status = loading]       │                                │
     │◄───┘                           │                                │
     │       Load page                │    createMbpEmbedClient(id)    │
     ├───────────────────────────────►├───────────────────────────────►│
     │                                │◄───────────────────────────────┤
     │                                │                                │
     │                                │            connect()           │
     │                                ├───────────────────────────────►│
     │      <connection request>      │                                │
     │◄----------------------------------------------------------------┤
     ├────┐                           │                                │
     │    │ Validate connection       │     <connection response>      │
     │◄───┘                           │                                │
     │                                │                           ┌────┤
     │                                │       Validate connection │    │
     │                                │                           └───►│
     │                                │      success | exception       │
     │                                │◄───────────────────────────────┤
     │                                │                                │
     │                                │    setStatusLoading(false)     │
     │                                ├───────────────────────────────►│
     │      <status request>          │                                │
     │◄----------------------------------------------------------------┤
     ├────┐                           │                                │
     │    │ Show embedded page        │                                │
     │    │  [status = ready]         │                                │
     │◄───┘                           │        <status updated>        │
     │----------------------------------------------------------------►│
     │                                │◄───────────────────────────────┤
     │                                │                                │
Copy

Documentation

Begin with Getting started to install the SDK, create a client, connect it, and test an embed.

Use the feature guides when the embed needs more than the basic connection:

• Navigation covers back navigation, exit confirmation, external pages, embeds, and host routes.
• Notifications covers local reminders, remote-push consent, and notification settings.
• SSO authentication covers initial and runtime SSO handover tokens.

See Client.MbpEmbedClient for the complete client API, including UI and context methods.