TypeError, 'digest' of undefined, 开发环境

Question

当我们为本地主机构建我们的 Angular SPA 时，它工作得很好。

在我们的开发环境中，这个错误蔓延到 DevTool 控制台并破坏了一切：错误错误：未捕获（承诺）：TypeError：无法读取未定义的属性 'digest'

TypeError: Cannot read property 'digest' of undefined
    at N (auth0-spa-js.production.js:1)
    at ie.<anonymous> (auth0-spa-js.production.js:1)
    at Generator.next (<anonymous>)
    at auth0-spa-js.production.js:1
    at new ZoneAwarePromise (zone-evergreen.js:876)
    at t (auth0-spa-js.production.js:1)
    at ie.loginWithRedirect (auth0-spa-js.production.js:1)
    at AuthGuard.<anonymous> (auth.guard.ts:22)
    at Generator.next (<anonymous>)
    at fulfilled (environment.ts:11)
    at resolvePromise (zone-evergreen.js:797)
    at new ZoneAwarePromise (zone-evergreen.js:879)
    at t (auth0-spa-js.production.js:1)
    at ie.loginWithRedirect (auth0-spa-js.production.js:1)
    at AuthGuard.<anonymous> (auth.guard.ts:22)
    at Generator.next (<anonymous>)
    at fulfilled (environment.ts:11)
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:34195)
    at ZoneDelegate.invoke (zone-evergreen.js:358)

我想这一定是构建过程的问题，一些不同的标志，但我不知道到底是哪个。

Answer 1

与 Auth0 相比，这似乎与 Angular 更相关，但出于好奇，您是否在组件中定义了 digest？

如果没有，您可以这样做：digest: {}; 在组件级别。

希望这对您的探索有所帮助！

Answer 2

这可能是因为您的开发服务器设置为不安全的来源。

digest可能指的是Web Crypto API. if you are using a Chromium-based browser, according to the the Chromium Projects page here的window.crypto.subtle.digest，subtle属性只能用于安全来源：

Access to the WebCrypto API is restricted to secure origins (which is to say https:// pages).

Note: In the spec, crypto.subtle is supposed to be undefined in insecure contexts

因为 digest 是 subtle 的一个方法，而 subtle 是 undefined，你会得到这个错误。

我们在使用 auth0-spa-js library 时遇到了同样的错误。它在本地主机上工作，而不是在我们的 http 暂存站点上工作，但在我们的生产 https 站点上没问题。

如果您的来源不安全，请尝试确保您的开发环境安全，然后再次测试（self-signed 证书应该可以）。提醒一下，secure origins 是：

Which origins are "secure"?

Secure origins are those that match at least one of the following (scheme, host, port) patterns:

(https, *, *)

(wss, *, *)

(*, localhost, *)

(*, 127/8, *)

(*, ::1/128, *)

(file, *, —)

(chrome-extension, *, —)

That is, secure origins are those that load resources either from the local machine (necessarily trusted) or over the network from a cryptographically-authenticated server.

我不确定 Auth0 团队是否有一个在 non-secure 源中工作的 SPA 库（或计划在他们最新的 SPA 库中启用该功能），但他们的原生 JS图书馆绝对可以。

Answer 3

Angular框架：通过为应用程序的 nginx（nginx.conf 或 app.conf）配置 SSL 证书来获取 HTTPS 可以解决此问题。为您的域分配 ssl 证书和 ssl 密钥。确保将端口更改为 443。

TypeError, 'digest' of undefined, 开发环境

TypeError, 'digest' of undefined, in development environment

auth0

Which origins are "secure"?