Amedia 使用 WebOTP 将通行密钥注册量提高了 100%

Henning Haaland Kulander
Henning Haaland Kulander
GitHub LinkedIn
Yu Tsuno
Yu Tsuno
LinkedIn

Published: June 30, 2026

Amedia 徽标

Amedia 是挪威最大的本地新闻媒体出版商，管理着 100 多份报纸，每天覆盖超过 200 万读者。为了提供统一 且顺畅的体验，Amedia 使用了 aID，其 内部数字身份解决方案。这个基于标准的联合账号系统不仅让用户可以访问 Amedia 的整个网络，还被其他挪威和丹麦报纸采用。

挑战：向多元化的用户群推出通行密钥

对于 Amedia 来说，登录流程是用户访问其内容的入口。每增加一秒的摩擦都会直接影响读者人数。对于移动用户来说，常规密码和基于短信的 双重身份验证 (2FA) 众所周知地笨拙，而 直接跳转到通行密钥则会带来意想不到的 障碍：完全不熟悉。

由于 aID 往往是用户首次接触通行密钥，因此强制突然更改为不熟悉的生物识别提示会引起一些犹豫。Amedia 意识到，他们不能只是部署这项技术，还必须帮助用户了解如何使用通行密钥。

解决方案：WebOTP 和通行密钥流程相结合

Amedia 没有强迫用户在旧习惯（短信）和完全陌生的概念（通行密钥）之间做出选择，而是将两者结合起来，打造了顺畅的入职体验。他们使用 WebOTP API 来简化熟悉的短信验证流程，同时在后端悄悄设置无密码登录的基础架构。

1. 跨平台顺畅注册

当用户注册 aID 时，他们会输入自己的姓名、电话号码和电子邮件地址。 然后，Amedia 会使用短信发送动态密码 (OTP)。Amedia 特别依赖于短信 OTP，而不是电子邮件，因为在斯堪的纳维亚半岛，拥有多个电话号码的情况很少见，而且在更换移动运营商时，号码可以无缝转移。 这种稳定性使得电话号码成为登录时可靠的主要标识符，也是构建扩展用户个人资料时一致的数据点。Amedia 没有强迫用户离开浏览器、打开消息应用、记住 代码并输入代码，而是使用了 WebOTP API。在受支持的移动浏览器上，这会触发底部动作条提示，让用户只需点按验证。浏览器会自动从短信中检索 OTP 并提交表单。

WebOTP 验证流程

此外，Amedia 还更新了短信传送方式，以使用标准化的源绑定消息格式（例如 @www.aid.no #123456），从而在更广泛的生态系统中实现顺畅登录。此标准不仅 支持 Android 和桌面设备上的 Chrome、Opera 和 Vivaldi 等浏览器上的 WebOTP API，还可无缝激活 Safari 的 autocomplete="one-time-code" 功能。因此，移动和桌面平台上的用户可以体验到安全、自动化的 OTP 流程，而无需平台特定的后端逻辑。如需了解详情，请参阅短信 OTP 表单最佳 实践。

// Detect feature support using OTPCredential availability
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;

    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', (e) => {
         ac.abort();
      });
    }

    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: ac.signal
    }).then(otp => {
      // Automatically fill the input and submit the form
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error('WebOTP error:', err);
    });
  });
}

2. 立即注册通行密钥

以前，在用户完成 WebOTP 验证后，Amedia 会向他们提供一个选择：创建常规密码或设置通行密钥。 可以预见的是，当大多数用户遇到不熟悉的技术术语时，都会选择阻力最小的路径：要么完全跳过该步骤，要么退回到标准密码。

2 月中旬，Amedia 团队改变了方法。他们将通行密钥注册提示直接集成到验证后流程中，甚至在向用户提供选择之前就显示该提示。为了遵守 Chrome 和 Safari 等浏览器上严格的用户手势要求，Amedia 无缝地链接了互动。由于用户首先确认 OTP，因此初始点按会作为所需的用户手势，直接调用 navigator.credentials.create() 提示。通过将通行密钥设为默认体验而不是可选设置，Amedia 的成功注册率立即翻了一番。

虽然这种即时提示非常有效，但该团队尝试使用 "条件 创建" 进一步简化体验。条件创建是一种完全在后台生成通行密钥的机制，无需用户 直接操作。不过，他们遇到了技术障碍：条件创建需要先使用密码管理器中保存的有效密码登录。由于 Amedia 的 WebOTP 流程完全无密码，因此不符合此安全标准。为了解决此限制，Amedia 现在仅为常规双重身份验证登录流程（密码和 OTP 代码）保留条件创建，同时使用链接的用户手势进行无密码入职。

通行密钥注册提示

为了确保可靠的体验，系统使用标准注册流程。 这会触发浏览器界面对话框，系统会在其中安全地提示浏览器的通行密钥注册界面。用户使用设备的屏幕锁定（生物识别或 PIN 码）创建通行密钥。通过在 WebOTP 之后链接此操作，用户无需设置密码即可完成设置。

// Triggered immediately after successful WebOTP verification
async function registerPasskey(creationOptionsFromServer) {
  try {
    const credential = await navigator.credentials.create({
      publicKey: {
        ...creationOptionsFromServer,
        authenticatorSelection: {
          residentKey: "required",
          userVerification: "required"
        }
      }
    });

    // Send the new credential to the server for registration
    await sendCredentialToServer(credential);
  } catch (error) {
    console.error("Passkey registration failed", error);
  }
}

3. 快速后续登录

当用户下次在同一设备上访问 Amedia 出版物时，aID 会自动触发通行密钥登录。如果用户在自动提示出现之前与页面互动 ，或者自动提示被关闭 ，系统会顺畅地使用通行密钥表单 自动填充。

这样一来，登录流程就会非常快速，因为用户只需与浏览器/操作系统提示或键盘的自动填充建议互动，即可选择通行密钥，完全绕过手动表单输入。

// Triggering conditional UI for autofill suggestions
async function authenticateWithPasskey(requestOptionsFromServer) {
  try {
    const credential = await navigator.credentials.get({
      publicKey: requestOptionsFromServer,
      mediation: "conditional" // Enables autofill integration
    });

    // Authenticate the user on the server
    await verifyAssertionWithServer(credential);
  } catch (error) {
    console.error("Passkey authentication failed", error);
  }
}

影响：链接实现顺畅采用

通过创新入职流程，Amedia 大大减少了新读者和回访读者的摩擦。WebOTP 和通行密钥的结合带来了明显的运营和体验改进：

  • 注册速度大幅提升：由于 WebOTP 自动输入和完全取消手动密码创建，创建新 aID 账号所需的总时间显著减少。
  • 48% 的新用户创建了通行密钥：通过在 WebOTP 验证后立即提示创建通行密钥，Amedia 实现了极高的通行密钥注册转化率，比之前基于选择的入职流程提高了 100%。
  • 登录速度提升 82%：与密码或手动 OTP 输入等替代方法相比，回访用户使用通行密钥的身份验证速度提高了五倍以上。
指标 值
新用户的通行密钥创建率 48%
回访用户的登录速度提升 82%
通行密钥采用率提升 100%

最终，虽然更广泛的数字生态系统仍在应对与通行密钥术语和用户教育相关的挑战，但 Amedia 的积极方法提供了一个成功的蓝图。将通行密钥集成到每天有数百万用户使用的高频服务中，为媒体行业建立了顺畅访问的新标准，在不牺牲用户留存率的情况下实现了永久的安全升级。