DEV Community: Ming

Goodbye to passwords with WebAuthn: the future of online identity protection

Ming — Tue, 03 Jan 2023 08:44:59 +0000

Goodbye to passwords with WebAuthn: the future of online identity protection

The shortcomings of traditional authentication methods:

As the internet becomes more prevalent, we rely more and more on online services to complete our daily work and entertainment. However, online identity authentication has always been a thorny problem, and traditional authentication methods such as passwords, SMS/email verification codes, OTPs (one-time passwords), or two-factor authentication all have some drawbacks.

Passwords: Using passwords for authentication is the most common method, but passwords can be prone to brute force attacks, leaks, or being forgotten, making them not secure or convenient.
SMS/email verification codes: When using SMS/email verification codes for authentication, a code is sent to the user's phone and the user must enter it on the website or app to log in. However, SMS verification codes can be intercepted or deceived, leading to authentication failure.
OTP (one-time password): OTP is a method of authentication using a single-use password. OTPs typically generate a dynamic password that is changed every so often, and the user must enter it on the website or app to log in. OTP allows for authentication when the device is not nearby, but if the OTP is intercepted or deceived, it can also lead to authentication failure.
Two-factor authentication: Also known as two-factor authentication, this is a method of authentication that requires a user to provide two different types of credentials in order to pass authentication. Typically, two-factor authentication requires something the user knows (such as a password) and something the user has (such as a phone). While two-factor authentication is more secure than a single factor (such as a password), it can still be inconvenient and vulnerable to interception or deception.

What is WebAuthn?

Is there a way to authenticate identity that is both secure and doesn't compromise user experience? That's where WebAuthn comes in. WebAuthn is a new, browser-based online identity authentication technology developed by the World Wide Web Consortium (W3C) that allows users to authenticate themselves using hardware-based identity verification devices such as Apple TouchID and Windows Hello, or biometric sensors on mobile devices. WebAuthn aims to provide users with a more secure and convenient way to authenticate online identity, and is supported by most modern web browsers.
Here's how WebAuthn works:

The user registers their identity during their first login.
The user's device generates a private key.
The user's device signs the login information with the private key.
The server verifies the signature and confirms the user's identity. During this process, a password is not used. Instead, WebAuthn uses digital signature technology to verify the user's identity, which uses public key encryption algorithms to provide even greater security.

What problems does WebAuthn solve for identity verification?

WebAuthn has many advantages over traditional password authentication methods. First, it provides higher security. Because it doesn't use passwords, it doesn't pose a security threat to accounts due to password leaks.

In addition, WebAuthn can use multiple verification methods, including fingerprint recognition and facial recognition, which are very difficult to impersonate, thereby greatly improving account security.

Second, WebAuthn provides a more convenient login experience. Users only need to register their identity during their first login, after which they can use WebAuthn for quick login. Users don't have to remember passwords and don't have to worry about the hassle of forgetting passwords.

Of course, WebAuthn also has some drawbacks. For example, it can only be used on devices that support WebAuthn, so it may not be suitable for older devices. In addition, to create a public-private key pair for a website or app, the user must first register on the website or app, and for users unfamiliar with WebAuthn, it may take some time to learn and understand this method of identity verification.

Overall, WebAuthn's appearance today, with passwords under frequent attack, provides us with higher security and a more convenient login experience.

What does web-authn-completed-app do?

web-authn-completed-app is a demo of a WebAuthn-based authentication process that aims to help interested developers better understand and develop WebAuthn more quickly.

The project is built with Vue3 + Typescript + Vite3 for the client, Express for the server, and MySQL8 for the database. The project also includes detailed instructions on how to operate and start the app in different scenarios to make it easier for developers to deploy and further develop.

The demo can be accessed online at https://web-authn.x-dev.club

Source code is available on github

The demo has been demonstrated on WIN10 and Android devices, but compatibility with devices and browsers is also a consideration.

To use the demo, you will need one of the following devices:
- An Android device with a biometric sensor
- An iPhone or iPad with iOS 14 or later and Touch ID or Face ID
- A MacBook Pro or Air with macOS Big Sur or later and Touch ID
- A Windows 10 19H1 or later device with Windows Hello
You will also need one of the following compatible browsers:
- Google Chrome 67 or later
- Microsoft Edge 85 or later
- Safari 14 or later

Note: all user data registered through https://web-authn.x-dev.club will not be used and is only for demo user statistics. If you have any concerns, you can email itgumx@163.com to request the deletion of your data.

Notify users when a new version of your site is available and prompt them to refresh the page.

Ming — Mon, 18 Jul 2022 03:01:07 +0000

🔔 version-rocket 🚀

English | 简体中文

Notify users when a new version of your site is available and prompt them to refresh the page.
When you finish deploying your app, send a deployment message to Lark Group Chat

About

version-rocket checks the version in the user's current browser against the version file in the remote server.

If a new version is available, a new version update prompt will be displayed to and the user will be given an operation button to refresh the page. Alternatively, version-rocket can notify you by receiving a callback function to support custom user interface.

We use the Web Worker API based on javascript to do the polling loop, will not affect the browser rendering process.

Features

Support all modern browsers
Available version real-time monitoring
Support personalized version popup text and theme, also support custom UI
Sync deployment message to Lark group chat after successful deploy
Card text and templates for deployment messages support customization
Support TypeScript
Npm package support

Screenshots

The first picture prompts user to refresh the page.
The second picture personalize the popup text and theme, great for when you need to customize the text and theme.
The third picture shows that after the successful deployment of the project, the deployment message will be sent to the group chat to inform the team members.
The fourth picture @All with optional settings based on third picture

Usage

Install

Get Started

Install the latest version, use


 function, this function compatible with

 ```pollingCompareVersion```

, and support customize popup text and theme (Recommended)
<br/>

#### Use the default theme



```javascript

// 1. Step one: import checkVersion(), and use
import { checkVersion } from 'version-rocket'
import { version } from '../package.json'

checkVersion({
  localPackageVersion: version,
  originVersionFileUrl: `${location.origin}/version.json`,
})


/**
 * 2. Step two:
 * generate-version-file shortcut command to create the version.json file.
 * 
 * The parameter is the directory where you want to create version.json.
 * 
 * If you don't pass the parameter, it will be created in the dist directory by default.
*/ 

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "generate:version": "generate-version-file dist public"
    ...
  },
  ...
}

Complete the above two steps, the version monitoring function can be used normally 🎉🎉

Personalize popup text and theme


import { checkVersion } from 'version-rocket'
import {version} from '../package.json'

checkVersion(
  {
    localPackageVersion: version,
    originVersionFileUrl: `${location.origin}/version.json`,
  },
  {
    title: 'Title',
    description: 'Description',
    primaryColor: '#758bfd',
    rocketColor: '#ff8600',
    buttonText: 'Button Text',
  }
)

Personalize popup image


import { checkVersion } from 'version-rocket'
import {version} from '../package.json'

checkVersion(
  {
    localPackageVersion: version,
    originVersionFileUrl: `${location.origin}/version.json`,
  },
  {
    imageUrl: 'https://avatars.githubusercontent.com/u/26329117',
  }
)

If you are using version 1.0.9 and later, call the pollingCompareVersion method

It is recommended to upgrade to the latest version and experience the function of customizing popup text and theme


// 1. Step one: import pollingCompareVersion, and use
import { pollingCompareVersion } from 'version-rocket'
import { version } from '../package.json'

pollingCompareVersion(version, `${location.origin}/version.json`, 30000, (data) => {
    console.log(data)
})

// 2. Step two: see above: "Use the default theme"

See "Attributes/Parameters" table for more personalized settings📄

Support push notification of successful deployment to Lark group chat


/**
 * 1. Step one:
 * You need to create a send-lark-config.json file first, it store the field for setting the text for the message card. 
 * 
 * Then, you can just execute the send-lark-message shortcut command. By default, the send-lark-config.json file in the current path is selected.
 * 
 * MESSAGE_PATH (optional): If you want to customize the file path and file name, you can set the MESSAGE_PATH parameter to pass it in.
 * 
 * PACKAGE_JSON_PATH (optional): If you want to customize the path to the package.json file, you can do so by passing in the PACKAGE_JSON_PATH environment variable. We will get the package.json file from the root path by default.
*/

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "send-lark-message:test": "MESSAGE_PATH=./lark-message-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-lark-message"
    ...
  },
  ...
}


// Step two: send-lark-config.json example
{
    // card title
    "title": "TEST FE Deployed Successfully",
    // deploy project name
    "projectName": "TEST",
    // deploy branch name
    "branch": "Staging",
    // project url
    "accessUrl": "https://test.com",
    // remind group chat members: true/false
    "isNotifyAll": true,
    // lark robot webhook url
    "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx",
    // deploy type
    "deployTools": "Jenkins",
    // the deploy time zone that you want to display, default "Asia/Shanghai"
    "expectConvertToTimezone": "America/New_York"
}

Personalize the deployment message template


// send-lark-config.json example
{
    // message card template content
    "message": {
        "msg_type": "text",
        "content": {
            "text": "New message reminder"
        }
    },
    // webhook link for the Lark bot
    "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx"
}

Attributes/Parameters


 function parameter table

| Params | Type | Description | Default | Required |
| --- | --- | --- | --- | --- |
| config | object | Version monitoring configuration item |  | Yes |
| config.originVersionFileUrl | string |  The path to the version.json file on the remote server | | Yes |
| config.localPackageVersion | string | The version of the current application usually takes the version field of package.json for comparison with the version.json file of the remote server |  | Yes |
| config.pollingTime | number | Time interval for polling monitoring, in ms | 5000 | No |
| config.onVersionUpdate | function(data) | Callback function for custom version hint UI (if you want to customize the popup UI, you can get the return value through the callback function to control the appearance of the popup) |  | No |
| options | object | Configuration items for popup text and themes (not customize the popup UI, but use it if you need to modify the text and themes) | | No |
| options.title | string | Popup title | Update | No |
| options.description | string | Popup description | V xxx is available | No |
| options.buttonText | string | Popup button text | Refresh | No |
| options.imageUrl | string | Popup image |  | No |
| options.rocketColor | string | The popup picture's theme color of the rocket, after setting Options.imageUrl is invalid | | No |
| options.primaryColor | string | The theme color of the popup, it will affect the hint image background color and button background color, after setting imageUrl is invalid | | No |
| options.buttonStyle | string | The CSS configuration of pop-up buttons can override the default button style | | No |

####

 ```pollingCompareVersion```

 function parameter table

| Params | Type | Description | Default | Required |
| --- | --- | --- | --- | --- |
| localPackageVersion | string | The version of the current application usually takes the version field of package.json for comparison with the version.json file of the remote server |  | Yes |
| originVersionFileUrl | string | The path to the version.json file on the remote server | | Yes |
| pollingTime | number | Time interval for polling monitoring, in ms | | Yes |
| onVersionUpdate | function(data) | Callback function for custom version hint UI (if you want to customize the popup UI, you can get the return value through the callback function to control the appearance of the popup) ) | | No |


## Link
- [Timezone List](https://jp.cybozu.help/general/zh/admin/list_systemadmin/list_localization/timezone.html)

🔔 version-rocket 🚀

Ming — Mon, 04 Jul 2022 06:28:31 +0000

🔔 version-rocket 🚀

English | 简体中文

Notify users when a new version of your site is available and prompt them to refresh the page.
When you finish deploying your app, send a deployment message to Lark Group Chat

About

version-rocket checks the version in the user's current browser against the version file in the remote server.

We use the Web Worker API based on javascript to do the polling loop, will not affect the browser rendering process.

Features

Compatible with all modern browsers
The version prompt interface supports customization, and the content of the deployment message card can be customized.
Available version real-time monitoring
Synchronize deployment message to Lark group chat after successful deployment.
Npm package support

Screenshots

The first picture prompts user to refresh the page.
The second picture shows that after the successful deployment of the project, the deployment message will be sent to the group chat to inform the team members.
The third picture @All with optional settings based on second picture

Usage

Install

npm install version-rocket -S

Get Started


// 1. Import version-rocket, and invoke pollingCompareVersion method
import { pollingCompareVersion } from 'version-rocket'
import { version } from '../package.json'

/**
 * @param 1: current version
 * @param 2: remote server version.json file path
 * @param 3: time interval of rotation monitoring (in ms), default 5000ms
 * @param 4: custom version tip ui callback(optional)
 */
pollingCompareVersion(version, `${location.origin}/version.json`, 30000, (data) => {
    console.log(data)
})


/**
 * 2.
 * generate-version-file shortcut command to create the version.json file.
 * The parameter is the directory where you want to create version.json.
 * If you don't pass the parameter, it will be created in the dist directory by default.
*/ 

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "generate:version": "generate-version-file dist public"
    ...
  },
  ...
}

If you want to push the successful deployment message to the group chat where lark Robot is located, please continue.


/**
 * 3.
 * You need to create a send-lark-config.json file first, it store the field for setting the copy for the message card. 
 * Then, you can just execute the send-lark-message shortcut command. By default, the send-lark-config.json file in the current path is selected.
 * If you want to customize the file path and file name, you can set the MESSAGE_PATH parameter to pass it in.
*/

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "send-lark-message:test": "MESSAGE_PATH=./lark-message-config.json send-lark-message"
    ...
  },
  ...
}


// send-lark-config.json example
{
    // card title
    "title": "TEST FE Deployed Successfully",
    // deploy project name
    "projectName": "TEST",
    // deploy branch name
    "branch": "Staging",
    // project url
    "accessUrl": "https://test.com",
    // remind group chat members: true/false
    "isNotifyAll": true,
    // lark robot webhook url
    "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx",
    // deploy type
    "deployTools": "Jenkins",
    // the deploy time zone that you want to display, default "Asia/Shanghai"
    "expectConvertToTimezone": "America/New_York"
}

Link

Timezone List

DEV Community: Ming

Goodbye to passwords with WebAuthn: the future of online identity protection

Goodbye to passwords with WebAuthn: the future of online identity protection

The shortcomings of traditional authentication methods:

What is WebAuthn?

What problems does WebAuthn solve for identity verification?

What does web-authn-completed-app do?

Links:

Notify users when a new version of your site is available and prompt them to refresh the page.

🔔 version-rocket 🚀

About

Features

Screenshots

Usage

Install

Get Started

Personalize popup text and theme

Personalize popup image

If you are using version 1.0.9 and later, call the pollingCompareVersion method

Support push notification of successful deployment to Lark group chat

Personalize the deployment message template

Attributes/Parameters

🔔 version-rocket 🚀

🔔 version-rocket 🚀

About

Features

Screenshots

Usage

Install

Get Started

If you want to push the successful deployment message to the group chat where lark Robot is located, please continue.

Link