什么是无密码认证以及如何实施

热门技术勘探工
614 阅读9分钟

什么是无密码认证以及如何实现它

无密码认证是一种用户管理方法，用户在登录系统或应用程序时无需使用密码或秘密。它不使用基于知识的因素（如密码），而是通过所有权因素（如电子邮件账户）或继承性因素（如人脸识别）来验证用户的身份。

这篇文章是与Frontegg合作创作的。感谢你支持使SitePoint成为可能的合作伙伴。

有许多认证方法被用作密码的替代品:

  • 一次性代码(OTC)
  • 魔法链接
  • 生物识别登录（指纹、FaceID、语音识别）
  • 智能卡或物理令牌
  • 数字证书

Passwordless Authentication methods

无密码认证的普及

你可能已经在不知不觉中使用 "无密码认证 "了。许多银行应用程序使用指纹和语音识别来验证用户。Slack以使用神奇的链接来验证用户而闻名。

在过去的几年里，无密码认证的使用稳步增长。认证供应商Auth0预测，无密码认证将在2027年超过密码的使用。Gartner预测，到2022年，"60%的大型和全球企业，以及90%的中型企业，将在50%以上的用例中实施无密码方法--比2018年的5%要高"。

网络中的大型企业也在尽最大努力加速该技术的采用。在2022年的世界密码日，谷歌、微软和苹果宣布他们计划扩大对创建的通用无密码登录标准的支持。
在2022年6月的苹果公司宣布了他们新的'Passkeys'功能，用于登录网站和应用程序。这一宣布本质上意味着苹果将使用Touch ID或Face ID为该网站创建一个数字密钥。这消除了创建和写下密码的需要。

无密码认证的好处

无密码认证提供了安全和用户体验的好处:

  1. 减少网络钓鱼和密码盗窃的风险:用户不容易受到网络钓鱼的攻击，他们会被带到虚假的网站并输入他们的登录凭证。如果用户不输入密码，他们就不会受到暴力攻击、密码数据泄露和其他类型的凭证盗窃的影响。
  2. 减少凭证重复使用: 在多个服务和账户中重复使用密码会给用户和你的系统带来更大的风险，这是无法预防的。据报道，64%的人在其他账户中使用在一次漏洞中暴露的相同密码。
  3. 没有更多的记忆练习:你的用户不需要记住这么多账户的用户名和密码。有时不得不在多次登录失败后一次又一次地重新设置他们的密码。
  4. 更快的登录:我们都很忙。一个强大的密码建议至少有16个字符，与扫描指纹或打开一个神奇的链接相比，需要花很长时间才能打出来。

无密码认证的局限性

无密码认证并不完美，从安全和经验的角度来看，有一些局限性:

  • 不熟悉的用户体验:许多人习惯于输入或自动填入密码。改用魔法链接或OTC对用户来说可能是一个冲击。
  • 被盗的设备或SIM卡交换的风险:如果你的用户的手机被盗或成为SIM卡交换骗局的受害者，通过短信发送一次性代码会使你的用户处于弱势。
  • 生物识别安全并不完美:指纹扫描器、TouchID和FaceID多年来已被成功入侵。

依靠任何单一因素进行认证，无论是否有密码，都会带来一定程度的风险。我们建议尽可能地使用多因素认证（MFA）。

无密码认证是否安全？

是的，无密码认证被认为是安全的，但它并不是完全没有风险。没有密码的账户不必担心密码落入恶意的人手中。这种情况可能通过数据泄露、暴力黑客、设备丢失或放错位置的便条纸而发生。

与无密码认证相关的许多风险也同样适用于其他方法。

如果黑客能够进入你的电子邮件账户，而你使用Magic Links进行无密码认证，他们将能够轻松登录。然而，如果你使用普通密码，这种风险也是一样的。坏人只需要点击 "重置密码"，并将重置链接发送到那个相同的电子邮件地址。

最后，就像其他系统一样，无密码认证系统也容易受到颠覆或绕过安全措施的直接攻击。无论你的行为多么安全，存储和验证你的凭证的系统永远不会完全安全。

指纹验证以及其他生物识别因素要难得多，但并非不可能欺骗，并提供了一种非常安全的方式来授权自己。

无密码认证与多因素认证（MFA）的对比

多因素认证是一种在登录时使用多种认证因素的方法。一个非常常见的情况是，用用户名和密码登录账户，然后被发送一个6位数的一次性代码（OTC）来确认你的设备所有权。

在这个例子中，OTC因素是没有密码的。相反，如果你使用一个指纹和一个一次性代码，那么你就有一个完全无密码的MFA设置。

如何在你的网站上实施无密码认证

将无密码认证整合到您的应用程序或网站中比以往更容易。根据你现有的基础设施，现在有许多选项供你选择。

  • **用户管理解决方案。**这些供应商提供完全管理的服务，不仅提供传统和无密码认证，而且还提供用户管理和权限管理:

    • 何时使用:新的系统建设、初创公司和希望避免所有低价值和高风险开发工作的团队。
    • 什么时候不使用: 如果你有一套非常定制的认证或用户管理要求，可能不适合他们的系统。
    • 供应商: Frontegg,Okta/Auth0,FusionAuth,Trusona,AppWrite

  • 认证服务提供者:这些服务提供用户认证、访问管理和其他服务，如会话管理。

    • 何时使用:你有现有的用户管理服务，并希望有人来处理密码和认证问题。
    • 什么时候不使用:你的开发经验或资源有限。如果你有一个简单的身份和访问管理模式，你可能要考虑上面提到的全面管理解决方案。
    • 供应商: AWS Cognito,Google Identity Platform,Microsoft Azure AD

使用React的无密码认证 - 快速运行

为了证明为你的用户引入无密码方法是多么容易，我们将用一个叫Frontegg的供应商带你完成一个5分钟的教程。一个自我服务和端到端的用户管理平台，在其他用户管理功能中，提供了几种形式的无密码登录方法。

构建登录和认证服务是非常耗时的，并不能为用户流增加价值，但如果你弄错了，就会造成损害。随着提供认证的服务变得更好、更便宜，为你的应用程序建立你自己的密码验证系统的理由应该不多。

  1. 创建你的免费Frontegg账户

通过他们的网站创建你的Frontegg账户。请确保你在入职过程中选择Magic Code或Magic Link作为你的无密码选项!

Passwordless Options

  1. 开始整合过程

一旦你完成了创建你的登录框并选择了你的无密码方法，你会看到一个选项： 发布到开发。

Frontegg使用环境（Dev, QA, Staging, Production），为你的认证环境提供独特的子域、密钥和URL。

现在你会被带到一个页面，上面有一些示例代码，更重要的是，你的 "baseURL "和 "clientID"。让这个页面打开，然后转到你的IDE进行下一步。

  1. 创建React应用程序（如果你已经有了自己的应用程序，就跳过这一步）。

在你的终端输入以下命令，创建一个新的Reactreact应用程序，并导航到新的目录。

npx create-react-app app-with-frontegg
cd app-with-frontegg

  1. 安装并导入Frontegg

运行下面的命令来安装Frontegg React库和react-router。如果你的应用程序中已经安装了 react-router，你可以跳过安装它。

npm install @frontegg/react react-router-dom

  1. 配置登录设置

在src/index.js 文件中，添加以下代码。然后回到你的Frontegg页面，从代码例子中找到`baseUrl`和'clientID'。

注意：一旦这个入职流程完成，这些值总是可以在你工作区的管理部分找到。

import React from 'react';
import ReactDOM from 'react-dom'; // For react 17
// For react 18: import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

import { FronteggProvider } from '@frontegg/react';

const contextOptions = {
  baseUrl: '## YOUR BASE URL ##',
  clientId: '## YOUR CLIENT ID ##'
};

// For react 18: 
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
ReactDOM.render(
    <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
        <App />
    </FronteggProvider>,
    document.getElementById('root')
);

  1. 重定向到登录

使用Frontegg useAuth钩子，你可以确定一个用户是否被认证。如果用户没有被认证，你可以通过useLoginWithRedirect钩子将用户重定向到登录（如下面的例子所示）。

import './App.css';
// import { useEffect } from 'react';
import { ContextHolder } from '@frontegg/rest-api';
import {
  useAuth, useLoginWithRedirect
} from "@frontegg/react";

function App() {
  const { user, isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();
  // Uncomment this to redirect to login automatically
  // useEffect(() => {
  //   if (!isAuthenticated) {
  // loginWithRedirect();
  //   }
  // }, [isAuthenticated, loginWithRedirect]);
  const logout = () => {
    const baseUrl = ContextHolder.getContext().baseUrl;
    window.location.href = `${baseUrl}/oauth/logout` +
                           `?post_logout_redirect_uri=` +
                           `${window.location}`;
  };
  return (
    <div className="App">
      { isAuthenticated ? (
        <div>
          <div>
            <img src={user?.profilePictureUrl}
                 alt={user?.name}
            />
          </div>
          <div>
            <span>Logged in as: {user?.name}</span>
          </div>
          <div>
            <button onClick={() => alert(user.accessToken)}>
              What is my access token?
            </button>
          </div>
          <div>
            <button onClick={() => logout()}>
              Click to logout
            </button>
          </div>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>
            Login
          </button>
        </div>
      )}
    </div>
  );
}

export default App;

  1. 登录

运行npm start 或在浏览器中打开http://localhost:3000，然后点击Login 按钮。 你应该看到你新创建的登录和注册页面。

注意，这里没有密码栏 🎉。

Frontegg Signup

点击注册，进入你的邮箱，点击激活我的账户。

Frontegg One Time Code

当你想登录时，你只需输入你的电子邮件，等待六位数代码的到来，你就可以登录了。没有密码，没有后顾之忧。

总结

我希望这份无密码认证指南不仅能帮助你了解这项技术是多么的平易近人，而且还能了解它在未来几年内将变得多么重要。

avatar
文章
阅读
粉丝