Giter VIP home page Giter VIP logo

webauthn_biometric_authentication's Introduction

WebAuthn for biometric authentication

Run

As per Webauthn specification, the host's domain name (i.e. the address you visit to open the website) cannot be an IP address (see issue).
This means that when testing locally, you cannot connect to the web server through the IP of the host machine, otherwise Webauthn will fail to verify the client. Instead you'll have to connect through the host network name, which usually modems automatically set to the connected machine hostname.
Print hostname and verify that the host machine is reachable:

# Linux:
$ hostname
$ ping `hostname`

# Windows (cmd):
> echo %COMPUTERNAME%
> ping %COMPUTERNAME%

If ping fails, you'll have to go to your modem page and add a DNS entry to redirect an hostname of your choice to the host machine IP address.

Docker

  1. Download the Dockerfile
    $ wget https://raw.githubusercontent.com/marcodiri/webauthn_biometric_authentication/master/Dockerfile
  2. Open a terminal in the Dockerfile directory and run:
    # N.B. If your hostname contains uppercase letters, manually type it lowercase.
    
    # Linux:
    $ docker build -t sekm:webauthn --build-arg HOSTNAME=`hostname` .
    $ docker run --rm -it -p 8000:8000 sekm:webauthn
    
    # Windows (cmd):
    > docker build -t sekm:webauthn --build-arg HOSTNAME=%COMPUTERNAME% .
    > docker run --rm -it -p 8000:8000 sekm:webauthn
    The above commands will make the server reachable via the hostname. If you made a custom DNS entry you should set the HOSTNAME accordingly.
  3. Connect to https://hostname:8000, hostname is the one found on step 2 or the one you set in the DNS entry. As per Webauthn specification, only https is allowed, but since no certificates are available when local testing, the browser will display a warning, tell it to proceed anyway.

Usage

Your desktop and mobile devices have to be on the same network.

Register with fingerprint

  1. Connect to the webserver from desktop
  2. Click Register
  3. Choose Username and Password and click the Register button
  4. A QR code containing a link will be generated, leave this page open
  5. Scan the QR on a mobile device with biometric sensor available
  6. A webpage will open asking you to repeat the password chosen at step 2 and click Proceed
  7. The device will ask you to scan your fingerprint
  8. After that the account will be created
  9. After a short while, the desktop will be redirected to a success page.

Login with fingerprint

  1. Connect to the webserver from desktop
  2. Click Login
  3. Insert a registered Username and click the Login with biometrics button
  4. A QR code containing a link will be generated, leave this page open
  5. Scan the QR on a mobile device with biometric sensor available
  6. A webpage will open and check if the biometric sensor is the one associated with the User
  7. If positive, the device will ask you to scan your fingerprint
  8. After a short while, the desktop will be redirected to the User Profile page.

webauthn_biometric_authentication's People

Contributors

marcodiri avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.