我们很高兴地宣布，我们的新JavaScript SDK发布了，该SDK用于单页应用程序（spa），名为auth0 spa js。为什么要新的SDK？过去几年，auth0.js库一直是我们默认的基于浏览器的SDK，它是我们产品和成功的关键部分。它每周有超过10万次的下载量，几乎每个Auth0客户都会以这种或那种方式使用它。在这段时间里，我们在核心产品中开发了大量功能。随着平台的发展，auth0.js的规模和功能也在增长。虽然auth0.js是一个非常强大的SDK，可以处理大量不同的场景，但是这种多功能性是有代价的。我们回到绘图板，我们重新设想了web平台SDK应该如何为开发人员将要实现的最常见的场景工作。这个新的SDK：与我们的旗舰登录体验Universal Login集成更容易集成到单页应用程序中，并且需要更少的代码将开发人员从标准和协议中抽象出来使开发人员不必指定授权或其他协议详细信息，管理令牌过期和续订，或存储和缓存令牌遵循行业和服务最佳实践，保护开发人员不受安全隐患的影响重量约7kb缩小和压缩我们对这些变化感到兴奋，并希望我们的客户和开发人员社区发现这个新的SDK易于使用，但仍然强大和安全。"@auth0有一个新的SDK来保证spa的安全，称为auth0 spa js。看看！"在推特上留言何时使用auth0 spa js（何时不使用）新的SDK是为在spa中使用而设计的，以使用行业最佳实践来保证spa的安全。OAuth2工作组发布了一个新的通用最佳当前实践文档，用于使用OAuth2从单页应用程序调用api。建议现在使用带有代码交换验证密钥（PKCE）的授权代码授予，而不是使用原始OAuth2规范中描述的隐式授权。您可以从我们的首席架构师Vittorio Bertocci处找到更多详细信息。这个新的JavaScript SDK实现了使用PKCE进行身份验证的授权代码授权，因此，通过使用这个新库，您将遵循最新的行业最佳实践来处理单页应用程序的安全性。别担心，我们不会停止对auth0.js的支持。事实上，如果您仍然使用嵌入式登录名，或者需要调用管理API或身份验证API，那么您应该坚持使用auth0.js。如果您在spa中使用通用登录，我们建议您切换到auth0 spa js。如何使用Auth0 SPA JS SDK那么如何开始使用新的SDK呢？下面是一些普通JavaScript的步骤，这些步骤可以应用到您选择的框架中。安装要使用新的SDK，请首先从npm安装：npm安装@auth0/auth0 spa js或者，您可以使用我们的CDN将其包含在您的项目中：创建客户端一旦auth0 spajs被添加到项目中，52返现网，就需要在应用程序中创建auth0客户机的实例。理想情况下，您应该只有一个客户端实例。请在呈现或初始化应用程序之前执行此操作。可以使用async/await执行此操作：//使用异步/等待const auth0=等待createAuth0Client({域：""，客户端id:""});或者承诺：//带着承诺CreateAuth0客户端({域：""，客户端id:""})。然后（auth0=>{//...});登录添加登录到应用程序的功能很容易。按以下按钮：单击登录您可以添加一个单击处理程序，然后调用loginWithRedirect（）方法：文档.getElementById（'login'）.addEventListener（'单击'，（）=>{return auth0.loginWithRedirect（）；});在使用Auth0进行身份验证后，大数据要学什么，用户被重定向回应用程序后，您的应用程序将需要调用handleRedirectCallback（）：等待auth0.handleRedirectCallback（）；这是解析Auth0的结果、存储令牌并设置会话的内容。然后您可以根据需要获取用户或令牌：const user=等待auth0.getUser（）；const token=等待auth0.getTokenSilently（）；调用API您还可以使用SDK静默获取令牌，然后在调用API时使用该令牌。按以下按钮：调用api您将添加一个click处理程序，调用getTokenSilently（），然后在API调用中使用返回的令牌。这里是异步/等待：//使用异步/等待文档.getElementById（'call-api'）.addEventListener（'click'，async（）=>{const accessToken=等待auth0.getTokenSilently（）；const result=等待获取（'https://myapi.com', {method:'获取'，标题：{授权：`Bearer${accessToken}`}});const data=等待结果.json();控制台.log（数据）；});有了承诺：//带着承诺文档.getElementById（'call-api'）.addEventListener（'单击'，（）=>{授权0.gettokensilenly（）。然后（accessToken=>获取（'https://myapi.com', {method:'获取'，标题：{授权：`Bearer${accessToken}`}}))。然后（结果=>结果.json())。然后（数据=>{控制台.log（数据）；});});如果存储了有效的令牌，gettokensilenly将返回它。否则，淘客帝国，它将使用作为参数提供的参数打开带有/authorize URL的iframe并返回令牌。注销最后，注销应用程序需要向注销按钮添加一个事件处理程序，然后调用Auth0的logout（）方法。按钮如下：注销下面是click处理程序和logout（）的调用：文档.getElementById（'logout'）.addEventListener（'单击'，（）=>{auth0.logout（）；});在窗帘后面由于许多开发人员（包括我自己）都对黑匣子持谨慎态度，让我们花点时间看看新SDK背后的协议。虽然我们的目的是在这个新的SDK中抽象出所有的实现细节，这样您就不必担心它们了，但是identity geeks会很高兴知道auth0 spa js符合OAuth 2.0规范：loginWithRedirect使用PKCE的授权代码loginWithPopup使用带有PKCE+web_消息的授权代码GetToken在PKCE+web_消息中使用授权码Auth0认真对待我们对安全最佳实践的承诺。幸运的是，我们做了所有的重担，所以你不必！下一步要去哪里要了解有关使用auth0 spa js的更多信息，请查看auth0单页应用程序SDK简介文档、存储库和SDK的完整文档。还有Quickstarts，它将逐步引导您完成React和Angular等流行的前端框架的集成。我们希望您和我们一样对这个新的SDK感到兴奋，并期待着从开发人员社区听到反馈！关于Auth0Auth0为应用程序、设备和用户提供了一个验证、授权和安全访问的平台。安全性和应用程序团队依赖Auth0的简单性、可扩展性和专业知识，使身份对每个人都有效。Auth0每月维护超过45亿次登录交易，确保身份安全，淘客发单软件，从而使创新者能够进行创新，并使全球企业能够为其全球客户提供可靠、卓越的数字体验。更多信息，请访问https://auth0.com或在Twitter上关注@auth0。Auth0文档在几分钟内实现身份验证.灯箱{宽度：100%；高度：100%；位置：固定；顶部：0；0：左；背景：rgba（0，0，0，0.85）；z-指数：9999999；线高：0；光标：指针；}.灯箱图像{光标：指针；余量：0自动；显示：块；}.灯箱图像{职位：亲属；顶部：50%；左：50%；-ms转换：translateX（-50%）translateY（-50%）；-webkit转换：翻译（-50%，-50%）；转换：平移（-50%，-50%）；最大宽度：100%；最大高度：100%；}@媒体屏幕和（最小宽度：1200像素）{.灯箱图像{最大宽度：1200px；}}@媒体屏幕和（最小高度：1200像素）{.灯箱图像{最大高度：1200px；}}.灯箱跨度{显示：块；位置：固定；底部：13px；高度：1.5em；线路高度：1.4em；宽度：100%；文本对齐：居中；颜色：白色；文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1件1件0万件；字体系列："fakt web"，"Helvetica Neue"，Hevetica，sans serif；字号：18px；}.lightbox.videowrapper容器{职位：亲属；顶部：50%；左：50%；-ms转换：translateX（-50%）translateY（-50%）；-webkit转换：翻译（-50%，轻淘客旗舰版，-50%）；转换：平移（-50%，-50%）；最大宽度：900px；最大高度：100%；}.lightbox.videoWrapperContainer.videoWrapper容器{高度：0；线高：0；余量：0；填充：0；职位：亲属；填充底部：56.333%；/*自定义*/背景：黑色；}.lightbox.videoWrapper iframe{位置：绝对；顶部：0；0：左；宽度：100%；高度：100%；边框：0；显示：块；}.lightbox上一页，.lightbox下一个{他