如何在 ReactJS 脚本中通过 WebCrypto "importKey" 导入 Base64 PublicKey？

Question

我正在尝试使用 Web Crypto API 函数 importKey 导入 Base64 公钥。目的是创建一个简单的模式来解析 PublicKey 并启用密码加密。

我尝试使用 importKey 函数的 "raw" 方法将 PublicKey 作为 Uint8Array 导入 - 参见下面的脚本：

import buffer from 'buffer'

let kpub = "U6uvqoxXGj17tFS5C05tSWohDQl2u1ugiHyNKXB9WF0UiYaxa5FxiLX/LxGeDUPMyLmWBGBUjpTzh1owF9RWug=="
let buff = new Buffer(kpub, 'base64');  

window.crypto.subtle.importKey(
  "raw",  
  buff,
  {    
      name: "ECDH",
      namedCurve: "P-256", 
  },
  false,  
  []  
)
.then(function(publicKey){
  console.log(publicKey);
})
.catch(function(err){
  console.error(err);
});

我希望这会生成输入的导入版本，kpub。但是，输出未显示在控制台中 - 当启用错误处理时，我得到的是 DOMException。

知道我哪里做错了吗？

作为替代方案，将 publicKey 转换为 JWK 格式可能更容易。例如，我已确认以下 JWK 在 importKey 函数中按预期工作。但是，如果我要使用它，我会纠结于如何将我的输入 kpub 转换为 x 和 y 坐标：

const jwkKey = {
  "kty":"EC",
  "crv":"P-256",
  "x":"f83OJ3D2xF1Bg8vub9tLe1gHMzV76e8Tus9uPHvRVEU",
  "y":"x_FEzRu9m36HLN_tue659LNpXW6pCyStikYjKIWI5a0",
  "kid":"Id that can be uniquely Identified"
}

非常感谢任何帮助。

Answer 1

在 Dmitry Chestnykh 的帮助下，我通过在前面加上一个字节 0x04 使其工作：

const device_kpub_base64 = "U6uvqoxXGj17tFS5C05tSWohDQl2u1ugiHyNKXB9WF0UiYaxa5FxiLX/LxGeDUPMyLmWBGBUjpTzh1owF9RWug=="
const prepend_byte = new Buffer([4])
let device_kpub_buffer = new Buffer(device_kpub_base64, 'base64');  
device_kpub_buffer = Buffer.concat([prepend_byte, device_kpub_buffer])

// Import the device public key into the web crypto API
window.crypto.subtle.importKey(
  "raw",  
  device_kpub_buffer,
  {    
      name: "ECDH",
      namedCurve: "P-256", 
  },
  true,  
  []  
)
.then(function(devicePublicKey){
  console.log(devicePublicKey);
})
.catch(function(err){
  console.error(err);
});

如何在 ReactJS 脚本中通过 WebCrypto "importKey" 导入 Base64 PublicKey？

How to import Base64 PublicKey via WebCrypto "importKey" in ReactJS script?

javascript

reactjs

webcrypto-api

ecdh