Keyri QR Login for AlphaPoint-Powered Web Apps

What does the process look like?

1. Install the keyriAPEX.js (opens in a new tab) script on your login page

2. Host KeyriQR.html (opens in a new tab) from the same origin as your login page (for example, in your /public directory)

3. Embed KeyriQR.html as an iFrame on your login page in your desired div

This does the following:

1. 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

2. After the user scans the QR code, keyriAPEX.js listens to the iframe for the user's decrypted API credentials: APIKey, APISecret, UserId

3. keyriAPEX.js uses this data to authenticate the user with the APEX WebSocket API to get a SessionToken

4. It deprovisions the APIKey from step 2 in APEX's system via their WebSocket API

5. It stores the SessionToken in localStorage

6. 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:

1. The div element you want the QR code to render inside

2. The APEX API WebSocket URL

3. 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);
});