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 Registration

  • In order to perform registration, we need the frontend to handle a username input, which then is transferred to mobile for creating an account.
  • Init an iFrame tag with custom source, where username is something you need to create or give your user the possibility to create, and the link is always false.

https://api.keyri.co/widget/${SERVICE_ID}/register?username='Elon Musk'&link=false



Ask your users to input any required account info. In this case, we're asking for name and email address..
Ask your users to input any required account info. In this case, we're asking for name and email address..





In this example, the Keyri widget is loaded when the user clicks "Next". This can also be lazy loaded automatically once the user inputs your required registration fields.
In this example, the Keyri widget is loaded when the user clicks "Next". This can also be lazy loaded automatically once the user inputs your required registration fields.



User Login

  • Init an iFrame tag with custom source, where username is something you need to create or give your user possibility to create and the link is always false.

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

An example login page
An example login page



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 created POST ${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.