Browser QR Widget Quickstart

1. Serve KeyriQR.html (available here (opens in a new tab)) from the same origin as your authentication page (e.g., a /public directory)

2. RECOMMENDED: serve everything on your page's origin with the header X-Frame-Options: SAMEORIGIN (examples of how to do so here (opens in a new tab)) (opens in a new tab)

3. Embed an iframe in your authentication page in the desired DOM element with ./KeyriQR.html as its src

<iframe
  src="./KeyriQR.html"
  id="qr-frame"
  frameborder="0"
  height="300"
  width="300"
  scrolling="no"
  style="border: solid 5px white;"
></iframe>

Now add an event listener to the iframe to listen for messages from it, processing that data however you would like. The example below assumes the mobile app is sending an auth token and places that auth token into local storage. Other options include passing the data into different functions and POSTing to your backend.

window.addEventListener('message', (evt) => {
  // Make sure the event is one from our iFrame
  if (
    evt.data.keyri &&
    evt.data.data &&
    document.location.origin == evt.origin
  ) {
    const { data } = evt;
 
    // Since you're sending the data, your situation will differ,
    // but for this example, we'll store the data in localStorage and reload
    if (!data.error) {
      localStorage.token = data.data.token;
      document.location.reload();
    } else {
      // Made up code...
      showErrorModal({ title: 'Uh Oh', body: 'Helpful Error Message' });
    }
  }
});

Local Development

To work in a local development environment, add the following query-string to your iframe's src attribute (please note that this only works for localhost - any port is fine).

?Host=your.registered.domain.com&appKey=your_app_key, where your.registered.domain.com is the domain with which you registered on (https://app.keyri.com (opens in a new tab)) and your_app_key is is the "Application Key" listed under "Setup & Credentials" in the same dashboard. Example as follows:

<iframe
  src="./KeyriQR.html?Host=your.registered.domain.com&appKey=your_app_key"
  id="qr-frame"
  frameborder="0"
  height="300"
  width="300"
  scrolling="no"
  style="border: solid 5px white;"
></iframe>