Mobile Web App
This example demonstrates the usage of Passkey QR login in a mobile environment.
The ApplessMobile
object is responsible for managing user authentication and
registration.
HTML Structure
A simple HTML structure is used, including the required Keyri library.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>KeyriQR - Demo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div></div>
</body>
</html>
JavaScript
<script src="./dist/index.min.js"></script>
<script type="module">
// In a production environment these should be environment variables
import { appKey } from "./mjs/keys.mjs";
// Import the ApplessMobile class from the KeyriFrontEnd library
const { ApplessMobile } = KeyriFrontEnd;
// Initialize the ApplessMobile object with the app key
// NOTE: This app key should only be used for development environments
const mobileAppless = new ApplessMobile( null, appKey);
// Start the mobile authentication/registration process
const mobileData = await mobileAppless.start();
// Check if the user needs to register
if (mobileData.userParameters?.register === "true") {
// Prompt the user to enter a one-time pin
let ONE_TIME_PIN = prompt("Enter a number between 1 and 100");
// Finish the registration process using the provided one-time pin
let output = await mobileAppless.finish(ONE_TIME_PIN);
} else {
// Finish the authentication process
let output = await mobileAppless.finish();
}
</script>