Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

2020 Safari & WebPrivacy & Security

WWDC20 · 16 min · Safari & Web / Privacy & Security

Meet Face ID and Touch ID for the web

Face ID and Touch ID provide a frictionless experience when logging in — and now you can use them on your websites in Safari with the Web Authentication API. Discover how to add this convenient and secure login alternative to your website.

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 3 snippets

Feature detection javascript · at 7:44 ↗
// Feature detection

const isAvailable = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();

if (isAvailable) {
    // Continue to enrollment or sign in
    // ...
}
Enrollment javascript · at 8:42 ↗
// Enrollment

const options = {
    publicKey: {
        rp: { name: "example.com" },
        user: {
            name: "[email protected]",
            id: userIdBuffer,
            displayName: "John Appleseed"
        },
        pubKeyCredParams: [ { type: "public-key", alg: -7 } ],
        challenge: challengeBuffer,
        authenticatorSelection: { authenticatorAttachment: "platform" },
        attestation: "direct"
    }
};

const publicKeyCredential = await navigator.credentials.create(options);
Sign in javascript · at 11:42 ↗
// Sign in

const options = {
    publicKey: {
        challenge: challengeBuffer,
        allowCredentials: [{
             type: "public-key",
             id: credentialIdBuffer,
             transports: ["internal"]
        }]
    }
};

const publicKeyCredential = await navigator.credentials.get(options);

Resources