Keyri QR Login for AlphaPoint-Powered Web Apps
What does the process look like?
-
Install the keyriAPEX.js (opens in a new tab) script on your login page
-
Host KeyriQR.html (opens in a new tab) from the same origin as your login page (for example, in your
/public
directory) -
Embed
KeyriQR.html
as an iFrame on your login page in your desired div
This does the following:
-
The iFrame on the page displays the Keyri dynamic QR code (Widget), which listens for encrypted data coming from your mobile app and decrypts it once the data arrives
-
After the user scans the QR code, keyriAPEX.js listens to the iframe for the user's decrypted API credentials:
APIKey
,APISecret
,UserId
-
keyriAPEX.js uses this data to authenticate the user with the APEX WebSocket API to get a
SessionToken
-
It deprovisions the
APIKey
from step 2 in APEX's system via their WebSocket API -
It stores the
SessionToken
in localStorage -
It directs the user to the logged-in state
How do I use it?
Simply include the keyriAPEX.js script on your login page. After the page is
loaded, instantiate the class webApex
with these arguments:
-
The div element you want the QR code to render inside
-
The APEX API WebSocket URL
-
The KeyriQR URL (your iframe)
// 1.) Get an element off of the DOM you want to load our iFrame into
let targetElement = document.querySelector('.login-form__container-right');
// 2.) These are the URLs that the class will need
let ApexSocketURL = 'wss://apexapi.{yourDomain}/WSGateway';
let KeyriURL = './KeyriQR.html'; //
// 3.) Instantiate the class
let webApex = new WebAPEX(ApexSocketURL, KeyriURL, targetElement);
// 4.) Connect
await webApex.connect();
// 5.) Listen for errors IF you want to handle them
webApex.on('error', (err) => {
console.log('ERROR DATA:', err);
});