6min

Frontend

This is where you put the Keyri QR code on your desktop agent login screen (e.g. website and smart TV).

All you need to do is install our widget via iFrame. The only prerequisite, aside from installation of the Keyri SDK in your mobile apps and integration in your backend, is registering your project on the Keyri admin panel at app.keyri.com (i.e., grab your serviceID from the admin panel).

There are 2 ways to init a widget for user Registration and Login and the only difference between them is a URL that is used to init an iFrame.

User Login

  • Init an iFrame tag with custom source as follows with your {SERVICE_ID} obtained from your Keyri Dashboard.

https://api.keyri.co/widget/${SERVICE_ID}/login?link=false

Example login page with Keyri iFrame on the right
Example login page with Keyri iFrame on the right

Example Code for Common User Registration and Login

  • Place iFrame anywhere on your client (see example above where QR code is an iFrame embedded into web portal).
  • Add listeners to your iFrame element, made for communication between mobile and web to ensure a secure connection and validation of handshake.
React
|

Where src is our widget iFrame URL and action is a processor which will handle iFrame events.

Action will return 2 items for validation: sessionKey and sessionId, which then must be passed to an API you created on your backend ${your-backend-based-url}/session (see Backend documentation).

Get a cake by its ID
GET
Code examples
Params
JS
|
200
404
|

In response, if validation passed and handshake succeeded between mobile -> widget -> web -> your backend -> our backend, you will receive a userObject with all required information.



Updated 20 Jan 2022
Did this page help?
Yes
No