Azure 上的 Node.js：云原生身份验证
5.00/5 (1投票)
在本文中，我们将使用 Azure Active Directory 轻松安全地为我们的应用程序添加登录按钮，而无需自行处理用户帐户数据的存储和管理。
到目前为止，在本系列中，我们在 Azure 上创建、部署、监控和扩展了一个 Node.js 应用程序。现在是时候升级我们的应用程序了。
几乎所有有用的 Web 应用程序都需要身份验证，但实现自己的解决方案或管理用户的帐户信息和密码非常困难，并且会带来许多安全风险和挑战。例如，数据库可能会被黑客攻击，泄露用户敏感的帐户信息，或者您的登录页面可能会因拒绝服务 (DoS) 攻击而无法访问，阻止用户访问您的应用程序。此外，处理加密算法和身份验证令牌有时可能会令人头痛。
云托管提供商可以大大简化身份验证。提供商通过其网关和 API 处理用户身份验证和帐户管理，使您的 Web 应用程序更加安全，然后只向您的 Web 应用程序提供必要的登录会话信息。由于服务器上没有软件安装，也没有需要管理的数据库，因此风险更低。
在本系列中，我们将使用 Azure Active Directory (Azure AD) 作为云托管身份验证提供商，通过 Azure AD B2C 为我们的应用程序添加用户注册和登录流程，并在网页上显示用户的登录状态。
项目设置
让我们开始项目吧！
我们将在此系列中构建我们迄今为止的代码。请查看并随意 fork 此存储库作为您的起点。
您也可以直接跳到最终代码。
创建 Azure AD B2C 租户
租户将目录中的应用程序集合进行分组。我们首先为我们的应用程序创建一个租户。
登录到Azure 门户，点击左上角的菜单按钮，然后选择“创建资源”。
在搜索栏中搜索“Azure Active Directory B2C”，然后按“创建”。
接下来，选择“创建新的 Azure AD B2C 租户”，填写信息，然后按“审阅 + 创建”。
注意：如果您收到错误消息“订阅未注册使用命名空间‘Microsoft.AzureActiveDirectory’。请参阅 https://aka.ms/rps-not-found 了解如何注册订阅”，您可能需要注册该命名空间。您可以使用以下命令通过 Azure CLI 注册它，然后再次尝试创建租户。
az provider register --namespace Microsoft.AzureActiveDirectory
注册应用程序
租户现在需要在其中有一个应用程序来配置登录系统。通过门户注册应用程序以集成 Azure AD B2C 登录。
使用搜索栏搜索“Azure AD B2C”并打开服务。
然后，选择顶部的地址簿按钮以打开“目录 + 订阅”选项。将您的目录切换到包含您的租户的目录。您可能需要查看“所有目录”才能找到正确的目录。
导航到“应用注册”以查找并单击“新注册”。键入一个名称，为支持的帐户类型选择默认选项（任何标识提供者）。对于“重定向 URI”，请输入应用程序的本地开发终结点：https://:8080
稍后，如果您想在群集上部署、连接和登录 Azure Kubernetes Service 群集，您可以将群集上已部署应用程序的 IP 地址或域名添加为另一个重定向 URI，从而使登录流程能够在生产环境中运行。
转到“身份验证”部分，然后滚动到“隐式授权和混合流”。然后，选中“访问令牌”和“ID 令牌”以启用隐式身份验证流，然后保存。
创建用户流
用户流顾名思义：它们是用户在应用程序中经历的与身份验证相关的流程。
您可以从不同类型的用户流中进行选择，例如帐户创建或密码恢复，只需将用户重定向到相应用户流的 URL 即可。Azure Active Directory 会为您管理后端和身份验证系统。您可以主题化和自定义这些流以适应您应用程序的要求和设计。
导航到菜单中的“策略”下的“用户流”，然后选择“新建用户流”。
对于我们的登录集成，让我们选择名为“注册和登录”的用户流类型。
为用户流填写一个名称，然后选择“电子邮件注册”。在按“创建”之前，您还可以选择在用户流中要求用户提供哪些属性字段，例如“显示名称”和“城市”。
使用 Azure AD 进行身份验证的一个绝妙之处在于，它会在用户流中为您处理多重身份验证 (MFA)，因此您无需自行集成这些类型的帐户安全措施。添加社交登录（例如 GitHub、Twitter、Facebook 和 Google）也像添加标识提供者一样简单。请遵循此指南了解如何添加其他标识提供者。
创建用户流后，选择“运行用户流”。这将测试帐户创建和登录配置。
让我们看看此用户流是否会正确重定向到我们的应用程序。确保应用程序在本地的 https://:8080 上运行。
完成用户注册过程并使用 MFA 代码验证您的电子邮件地址后，用户流应重定向到您的应用程序，并在 # 之后的 URL 中包含一个 JSON Web 令牌 (JWT)。我们将解码此令牌以获取登录用户的相关信息。
在继续下一部分之前，请复制并保存此用户流终结点 URL，因为我们将在更新应用程序网页时使用它。
添加 Web 代码
最后，让我们通过登录按钮将此身份验证过程集成到主网页 (index.html) 中，并在用户已登录时解码身份验证令牌。
在标题和作业列表之间添加一个登录元素
<h1>Latest Node.js Jobs!</h1>
<div id="login"></div>
<div id="jobs" class="row row-cols-1 row-cols-md-3 g-4">
</div>
在脚本部分的开头定义此 JWT 解析函数
function parseJwt( token ) {
return JSON.parse( atob( token.split( "." )[ 1 ] ) );
}
如果 JWT 存在，我们可以将其从 URL 中提取出来，并将其解析为 JSON 对象，以在页面上显示“您已登录”消息以及用户的姓名。如果没有令牌，页面将显示一个登录按钮，该按钮使用我们之前保存的终结点 URL 链接到注册和登录用户流。
为了使网页能够从本地开发期间的 localhost 和已部署的 Web 应用程序中正常工作，您还可以将终结点 URL 中 redirect_uri 参数的值替换为 window.location.origin 中的值。
const urlParams = new URLSearchParams( location.hash.replace( "#", "" ) );
const idToken = urlParams.get( "id_token" );
if( idToken ) {
let decoded = parseJwt( idToken );
console.log( decoded );
$( "#login" ).html( `
<p>You are logged in, ${decoded.name}!</p>
` );
}
else {
$( "#login" ).html( `
<a class="btn btn-secondary" href="https://nodejsonazure.b2clogin.com/nodejsonazure.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1_NodeJSOnAzureSignUpSignIn&client_id=02c42bd8-b450-490b-9542-aadf3c281321&nonce=defaultNonce&redirect_uri=${location.origin}&scope=openid&response_type=id_token&prompt=login">Login</a>
` );
}
现在，您已在应用程序中使用了 Azure AD，实现了一个完整的用户帐户创建和身份验证用户流。
您可以在 GitHub 上找到此项目的最终代码。
后续步骤
在本文中，我们学习了如何使用 Azure Active Directory B2C 服务为您的应用程序添加云原生用户身份验证服务，而无需处理用户帐户和安全密码管理的所有麻烦。Azure Active Directory 在免费套餐中支持高达 50,000 的月活跃用户 (MAU)，即使在您的应用程序超出此限制后，价格也非常低廉，因此对于许多刚起步并希望发展用户群的新项目来说，这是一个理想的系统。
在本系列下一篇也是最后一篇中，我们将探讨一些 Azure Cognitive Services，它们通过云为任何应用程序带来 AI 的强大功能。所以不要错过结局。看看将情感分析和语言翻译等 AI 服务集成到您的应用程序中有多么容易。