我一直在尝试将 webauthn 添加到 Angular 应用程序中。这个 MDN 页面概述了必要的步骤:https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
重要的是,使用 API 需要访问 navigator.credentials
。但是,当我尝试引用它时,Angular 不会编译。例如,这行代码:
await navigator.credentials.create({...});
...产生此错误:
error TS2339: Property 'credentials' does not exist on type 'Navigator'.
现在我知道我可以做这样的事情:
declare global {
interface Navigator {
credentials: {
create(): void,
get(): void
}
}
}
但是为整个
CredentialsContainer
API 编写所有 TypeScript 真的很乏味。此外,有人已经在 DefinitelyTyped
中完成了所有工作,对吗?所以我用
@types/webappsec-credential-management
将 npm install --save-dev @types/webappsec-credential-management
添加到我的项目中。现在 Visual Studio Code 知道该做什么了;我有自动完成和一切。
但是 Angular 仍然无法编译。它给出了与上面相同的错误。
我需要做什么才能让 Angular 识别
navigator.credentials
?
最佳答案
您可以按照以下步骤进行:
npm install --save-dev @types/webappsec-credential-management
然后编辑 angular 的
<project>/src/tsconfig.app.json
{
...
"compilerOptions": {
...
"types": [
"@types/webappsec-credential-management"
]
...
}
有必要编辑 angular 自己的
tsconfig.app.json
,因为它将用于编译 angular 的代码。根 tsconfig.json
用于引导和通用(vscode) typescript 配置。因此,如果您只是将 @types/webappsec-credential-management
添加到您的类型中,它将在您的编辑器中被识别,但它会被 angular 自己的编译器忽略,从而产生此输入错误:error TS2339: Property 'credentials' does not exist on type 'Navigator'.
。
关于Angular + webauthn = 属性 'credentials' 在 'Navigator' 类型上不存在?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55551856/