从设计师的角度看如何在网站上实现2FA(双因素认证)

Ke Lyu
6 min readAug 27, 2018

我们最近在网站上完成了2FA验证的设计和部署。在开始设计之前,我研究了很多其他网站,观察他们的2FA是如何设计的。如果你之前没有任何2FA的经验,我会推荐Authy作为初步研究的开始。他们收集了许多使用2FA的网站,并提供了详细的分步指南和截图。

不过虽然这些Authy指南都很详尽,但它们都是关于如何在网站上激活并使用2FA的,对于设计师来说只有正确流程并不足以满足设计的要求。在实际试用过一些2FA流程后,我总结了一下设计师在实施2FA时应该考虑的地方。

  1. 在哪里激活和停用2FA?
  2. 2FA的设置流程是怎样的?
  3. 关于认证码和密钥。
  4. 关于备份码。
  5. 在哪里使用2FA?
  6. 在哪里提示2FA?

1. 在哪里激活和停用2FA?

这个问题的答案很简单。2FA通常位于“设置”或“个人中心”里的“安全”部分。

在Dropbox上开启2FA
在Google上开启2FA

你可以简单地添加一个开关样式(或其他形式)的2FA设置。你也可以像Google一样在这里添加一段关于2FA的解释及其他信息。

2. 2FA的设置流程是怎样的?

你可以在Authy的指南中找到各种2FA设置过程。通常包括以下3个步骤:

1. 帐户验证(短信/语音通话/账户密码等)

启用2FA的第一步是验证身份。 如果其他人获得了你的2FA密钥并通过他们的手机进行身份验证,那么你永远都不能通过自己账户的2FA验证。因此,在实际启用2FA之前验证身份非常重要。

你可以通过发送短信到手机或者使用语音电话来获取验证码或者直接使用账户的密码进行验证。

2. 获取验证码(短信/第三方验证器)

一般来说,第二步我们需要为第三方验证器提供密钥。更好的方法是提供一个包含密钥的二维码。 第三方身份验证器(您可以使用Google身份验证器或者Authy验证器)生成验证码。

密钥验证示例 (BABB)

一些网站也会提供通过短信的方式发送验证码。

选择适合你的方式接收验证码 (Slack)

3. 备份码/恢复码
在确定了验证码之后。有些网站会直接提供备份码或者有些网站称为恢复码的一串数字给用户。当用户无法访问身份验证码,甚至手机丢了的时候,用户可以使用备份码登录。

Twitter的备份码

很多网站会同时提供多个备份码。

Slack一次性会提供多个备份码

备份码是存储在数据库中的。如果下一次进入备份码的页面,Google会检测哪些备份码已经被使用并显示“已使用”而不是继续显示该代码。

3. 关于认证码和密钥

验证码一般是通过第三方应用程序生成的。应用程序需要拥有服务器提供的密钥来产生验证码,这需要后端支持才能提供密钥。数据库只存储一个密钥,因此如果用户想要更换电话或使用其他应用程序,则需要获取新的密钥。 在设置好2FA后,我们可以提供一个链接,为用户产生新的密钥。

获取新的密钥 (Google)

这里为大家提供几个技术方面创建2FA密钥的参考:

4. 关于备份码

在任何请求验证码的时候用户都可以选择使用备份码。每个备份码只能使用一次。 所以我们需要有一个地方为用户生成新的备份码。

在Facebook上获取备份码

我喜欢Google为用户提供备份码的方式。 他们很贴心地在每个备份码前面放了一个复选框,用户可以打印下来并勾选哪些备份码已经被使用了。还有虚线及剪刀提示用户如何剪裁。

谷歌的备份码页面

5. 在哪里使用2FA?

大多数网站一般会把2FA放在用户登录流程来保护用户在网站的资金、敏感数据和其他重要事项。 所以我们可以在输入密码后添加额外的2FA验证步骤。 但是我们的网站用了不一样的方法。

在登录流程里嵌入2FA验证 (GoSquared)

我们的平台会有各个行业的从业者、专家和资深人士向其他用户分享他们的观点和分析。 一个典型的用户群体是在我们平台上阅读分析文章的一般用户。 他们不会经常使用我们的电子钱包功能,因此要通过2FA才能看到内容对他们而言会过于复杂。

总之,在哪里应用2FA是一个UX问题。

6. 在哪里提示2FA?

什么时候提示用户使用2FA也是一个用户体验相关的考虑。 特别是在有敏感或重要数据的时候,我们更应该主动地提示用户使用2FA。 Binance会在注册过程中建议用户启用2FA,如果用户没有启用,每次进行交易的时候Binance也会提醒用户。

提示开启2FA的弹窗 (Binance)

以上这些这就是我在自己实现2FA的时候考虑到的内容。 如果你在其他地方只找到2FA的设置过程,我希望这篇文章可以作为一份快速指南了解到应用2FA需要考虑到的其他事项。

如果你也有设计2FA并且发现我有错过任何值得注意的东西,欢迎留下任何的反馈和建议。

Check English Version Here

--

--

Ke Lyu

UX voyager. Lead Desinger at NetEase Cloud Music.