其他
什么是WebAuthn:在Web上使用Touch ID和Windows Hello登录
什么是WebAuthn?
向WebAuthn注册
使用WebAuthn登录
纯JavaScript实现
注册
PublicKeyCredentialCreationOptions
对象,该对象包含了创建一个新的 PublicKeyCredential
(密钥对)所需的和可选的一些字段。const optionsFromServer = {
"challenge": "random_string", // 需要转换为ArrayBuffer
"rp": { // 我的网站信息
"name": "My Website",
"id": "mywebsite.com"
},
"user": { // 用户信息
"name": "anthony@email.com",
"displayName": "Anthony",
"id": "USER_ID_12345678910" // 需要转换为ArrayBuffer
},
"pubKeyCredParams": [
{
"type": "public-key",
"alg": -7 // 接受的算法
}
],
"authenticatorSelection": {
authenticatorAttachment: "platform",
},
"timeout": 60000 // 以毫秒为单位
};
rp
:指定依赖方的信息,用户注册/登录的网站。如果用户注册的是你的网站,那么你的网站就是依赖方。id
:主机的域名,不含协议和端口。例如,如果RP的来源是https://login.example.com:1337,那么id
就是login.example.com
或example.com
,而不是m.login.example.com
。pubKeyCredParams
: 服务器可接受哪些公钥类型。alg
: 一个数字,描述服务器接受的算法,并在COSE注册表中COSE算法下进行了描述。例如,-7用于ES256算法。authenticatorSelection
: (可选)限制验证器为平台或跨平台。使用platform
允许像Windows Hello或TouchID这样的身份验证器。使用cross-platform
允许身份验证器,如Yubikey。
creationOptions
我们可以告诉浏览器生成一个新的密钥对。// 请确保你已经将字符串转换为ArrayBuffer
// 如上所述
const credential = await navigator.credentials.create({
publicKey: optionsFromServer
});
credential
)将如下所示:PublicKeyCredential {
id: 'ABCDESKa23taowh09w0eJG...',
rawId: ArrayBuffer(59),
response: AuthenticatorAttestationResponse {
clientDataJSON: ArrayBuffer(121),
attestationObject: ArrayBuffer(306),
},
type: 'public-key'
}
ArrayBuffer
转换为base64编码的字符串或仅仅是字符串。你需要在你的服务器中对此进行解码。登录
PublicKeyCredentialRequestOptions
对象,该对象包含要签署的挑战书和用户之前注册的WebAuthn证书列表。const optionsFromServer = {
"challenge": "somerandomstring", // Need to convert to ArrayBuffer
"timeout": 60000,
"rpId": "mywebsite.com",
"allowCredentials": [
{
"type": "public-key",
"id": "AdPc7AjUmsefw37..." // Need to convert to ArrayBuffer
}
]
}
第3步:前端签署挑战书。
// make sure you've converted the strings to ArrayBuffer
// as mentioned above
const assertion = await navigator.credentials.get({
publicKey: optionsFromServer
});
assertion
如下所示:PublicKeyCredential {
id: 'ABCDESKa23taowh09w0eJG...', // WebAuthn凭证ID
rawId: ArrayBuffer(59),
response: AuthenticatorAssertionResponse {
authenticatorData: ArrayBuffer(191),
clientDataJSON: ArrayBuffer(118),
signature: ArrayBuffer(70), // 我们需要验证的签名
userHandle: ArrayBuffer(10),
},
type: 'public-key'
}
需要考虑的几件事
PublicKeyCredentialCreationOptions
中的 excludeCredentials
。WebAuthn支持情况
结束
React快速入门-使用WebAuthn登录:https://docs.cotter.app/quickstart-guides/react-webauthn WebAuthn SDK Reference:https://docs.cotter.app/sdk-reference/web/sign-in-with-webauthn
参考
WebAuthn Guide:https://webauthn.guide/ WebAuthn Specs from W3C:https://w3c.github.io/webauthn/
作者:Michelle Wirantono
粉丝福利
150期留言+在看幸运用户:暂无。
临走前留下,今天的福利
福利1:《MongoDB 4.0从入门到达人》获取资源请在公众号对话框中回复关键字:043,如果没有关注请扫下面的二维码。更多福利资料请查看公众号菜单 福利2:在看+留言,我随机抽取一位认真留言的小伙伴,给他发一个红包奖励
最近文章
Fetch API速查表:9个最常见的API请求
将HTML表格转换成精美的PDF的几种方案比较
- END -
点赞 + 在看 + 留言,下一个幸运儿就是你!
走心的分享更容易被抽中~
开奖时间 下期文末