Adding user registration using a QR
This document demonstrates updating your registration flow to permit enrolling using an authentication device that is registered through a QR code.
How does it work?
For this scenario, let's assume that you already have a way for a user to sign up on your website. Typically, this involves the user providing a username or email address. For the sake of this explanation, let's assume the registration flow is as follows:
- The user enters a username.
- You create a new account for the user.
- The user indicates their notification preferences.
- The user fills out their profile.
- You take the user to the welcome page.
Mobile Identity enrolment can be inserted into the process any time after the account has been created.
- You generate a QR code.
- You show the QR code to the user.
- The user scans the QR code with the device they want to use as their authentication device.
- You wait until the user has scanned the QR code.
What parts of the API do you require?
To add Mobile Identity to your registration process, you require the following API endpoints:
POST /auth/oauth2.0/v1/access_token
to obtain an access token.POST /omi/qr/enrol
to generate a QR code.GET /omi/qr/enrol/status
to check if the user has scanned the QR code.
Example implementation
The following is an example of adding QR code registration to your registration flow.
Obtain an access token
To call the Mobile Identity endpoints, you need to obtain an access token. The application requires an access token to authenticate to the OneWelcome Identity Platform. We recommend using the OAuth2 client credentials flow to generate your access token.
You must specify the following scopes for the access token:
credential:omi:enrol:qr:admin:post
credential:omi:enrol:status:get
Generate a QR code
You must generate a QR code before you can show a QR code to the user. Generate a QR code using the /omi/qr/enrol
endpoint. The response returns the QR code as a base64-encoded PNG image. The QR code can be displayed on the webpage using the <img>
element.
Include the entire base64-encoded PNG image value in the scr-attribute
and prefix the value with data:image/png;base64,
.