google-chrome 2 years ago

Build your first WebAuthn app (Japanese | English subtitles)

Please wwitch on/off English subtitles by clicking on the CC icon.

Have you ever wondered how to enable biometric authentication on the web? This codelab walks you through how to use WebAuthn to implement reauthentication experience on your website using a biometric sensor. 


Before you begin

The Web Authentication API, also known as WebAuthn, lets you create and use origin-scoped, public-key credentials to authenticate users.


The API supports the use of BLE, NFC, and USB-roaming U2F or FIDO2 authenticators - also known as security keys - as well as a platform authenticator, which lets users authenticate with their fingerprints or screen locks.


In this codelab, you build a website with a simple reauthentication functionality that uses a fingerprint sensor. Reauthentication protects account data because it requires users who already signed in to a website to authenticate again when they try to enter important sections of the website or revisit the website after a certain amount of time.


Prerequisites

- Basic understanding of how WebAuthn works

- Basic programming skills with JavaScript


What you'll do

- Build a website with a simple reauthentication functionality that uses a fingerprint sensor


What you'll need

One of the following devices:


- An Android device, preferably with a biometric sensor

- An iPhone or iPad with Touch ID or Face ID on iOS 14 or higher

- A MacBook Pro or Air with Touch ID on macOS Big Sur or higher

- Windows 10 19H1 or higher with Windows Hello set up


One of the following browsers:

- Google Chrome 67 or higher

- Microsoft Edge 85 or higher

- Safari 14 or higher


Info here:

https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0


Start here:

https://glitch.com/edit/#!/webauthn-codelab-start?path=README.md%3A1%3A0

Google
2008 - present