Web身份验证（WebAuthn）（下）

2023-06-19 250

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

全局流量管理 GTM，标准版 1个月

云解析 DNS，旗舰版 1个月

数据可视化DataV，5个大屏 1个月

简介： Web身份验证（WebAuthn）（下）

解析attestationObject：

1. // note: a CBOR decoder library is needed here.
2. const decodedAttestationObj = CBOR.decode(
3.     credential.response.attestationObject);
4. 
5. console.log(decodedAttestationObject);
6. {
7. // 这里的authenticator数据是一个字节数组，包含有关注册事件的元数据，
8. // 以及我们将用于未来身份验证的公钥。
9. authData: Uint8Array(196),
10. fmt: "fido-u2f",  // 表示证明格式
11. attStmt: {
12. sig: Uint8Array(70),  // 签名
13. x5c: Array(1),        // X.509 格式编码的证明证书。
14. alg: -7 // -7 使用SHA-256对应的哈希算法的摘要
15.     },
16. }

解析验证器数据：

1. const {authData} = decodedAttestationObject;
2. 
3. // get the length of the credential ID
4. const dataView = new DataView(
5. new ArrayBuffer(2));
6. const idLenBytes = authData.slice(53, 55);
7. idLenBytes.forEach(
8. (value, index) => dataView.setUint8(
9.         index, value));
10. const credentialIdLength = dataView.getUint16();
11. 
12. // get the credential ID
13. const credentialId = authData.slice(
14. 55, 55 + credentialIdLength);
15. 
16. // get the public key object
17. const publicKeyBytes = authData.slice(
18. 55 + credentialIdLength);
19. 
20. // the publicKeyBytes are encoded again as CBOR
21. const publicKeyObject = CBOR.decode(
22.     publicKeyBytes.buffer);
23. console.log(publicKeyObject)
24. 
25. {
26. 1: 2,
27. 3: -7,
28.     -1: 1,
29.     -2: Uint8Array(32) ...
30.     -3: Uint8Array(32) ...
31. }

authData是规范中描述的字节数组。解析它将涉及从数组中切片字节并将它们转换为可用的对象。

最后检索到的publicKeyObject是一个以COSE标准编码的对象，这是一种描述凭证公钥和使用它所需的元数据的简洁方式。

1: 1字段描述密钥类型。值2表示关键点类型为椭圆曲线格式。

3: 3字段描述用于生成身份验证签名的算法。-7值指示此身份验证器将使用ES256。

-1: -1字段描述此键的“曲线类型”。值1指示该键使用“P-256”曲线。

-2: -2字段描述此公钥的x坐标。

-3: -3字段描述此公钥的y坐标。

5.2使用WebAuthn凭据进行身份验证

注册完成后，现在可以对用户进行身份验证。在认证期间，创建断言，这是用户拥有私钥的证明。此断言包含使用私钥创建的签名。服务器使用在注册期间检索到的公钥来验证此签名。

navigator.credentials.get()

在身份验证过程中，用户证明他们拥有他们注册的私钥。它们通过提供一个assertion来实现，是在客户端上调用navigator.credentials.get()生成的。这将检索在注册期间生成的包含签名的凭证。

1. const credential = await navigator.credentials.get({
2. publicKey: publicKeyCredentialRequestOptions
3. });

publicKeyCredentialCreationOptions对象包含许多必需和可选字段，服务器指定这些字段为用户创建新凭证。

1. const publicKeyCredentialRequestOptions = {
2. challenge: Uint8Array.from(
3.         randomStringFromServer, c => c.charCodeAt(0)),
4. // 这个数组告诉浏览器服务器希望用户使用哪些凭据进行身份验证。
5. allowCredentials: [{
6. id: Uint8Array.from(
7.             credentialId, c => c.charCodeAt(0)),
8. type: 'public-key',
9. transports: ['usb', 'ble', 'nfc'], // 传输方式 USB、蓝牙，NFC
10.     }],
11. timeout: 60000,
12. }
13. 
14. const assertion = await navigator.credentials.get({
15. publicKey: publicKeyCredentialRequestOptions
16. });

从assertion调用返回的get()对象再次是PublicKeyCredential对象。它与我们在注册时收到的对象略有不同;特别是它包括signature成员，并且不包括公钥。

1. console.log(assertion);
2. 
3. PublicKeyCredential {
4. id: 'ADSUllKQmbqdGtpu4sjseh4cg2TxSvrbcHDTBsv4NSSX9...',
5. rawId: ArrayBuffer(59),
6. response: AuthenticatorAssertionResponse {
7. // 认证器数据类似于注册期间接收的authData，但值得注意的是，这里不包括公钥。
8. authenticatorData: ArrayBuffer(191),  
9. clientDataJSON: ArrayBuffer(118), // 用作签名的一些数据
10. signature: ArrayBuffer(70), // 私钥签名
11. userHandle: ArrayBuffer(10),
12.     },
13. type: 'public-key'
14. }

解析和验证身份验证数据:

获得认证后，将其发送到服务器进行验证。在验证数据完全有效之后，使用在注册期间存储在数据库中的公钥来验证签名。

1. const storedCredential = await getCredentialFromDatabase(
2.     userHandle, credentialId);
3. 
4. const signedData = (
5.     authenticatorDataBytes +
6.     hashedClientDataJSON);
7. 
8. const signatureIsValid = storedCredential.publicKey.verify(
9.     signature, signedData);
10. 
11. if (signatureIsValid) {
12. return "签名校验成功! 🎉";
13. } else {
14. return "签名校验失败. 😭"
15. }