Blazor 应用如何使用 Azure Active Directory 认证登录

Posted 2021-09-09 dotNET跨平台

点击上方蓝字 / 关注“汪宇杰博客”

原文：Azure Tips and Tricks

翻译：汪宇杰

使用 Azure Active Directory 保护您的应用程序

您可以使用 Azure Active Directory (AAD) 让用户进行身份验证并授权使用您的应用。AAD 提供了一种智能身份即服务来保护您的应用，并且它易于使用和集成。

在这篇文章中，我们将创建一个新的 Blazor WebAssembly 应用程序并在其中集成 Azure Active Directory，以便用户可以在应用中进行身份验证。

前置要求

你需要以下准备：

• Azure 订阅（如果您没有 Azure 订阅，请在开始之前创建一个免费帐户）

• .NET Core 最新版本 SDK

在 Blazor WASM 应用中集成 AAD

我们将使用 Azure Active Directory (AAD) 保护独立的 Blazor WebAssembly 应用。为此，我们将首先在 Azure Portal 的 AAD 中注册一个应用。

1. 打开 Azure Portal

2. 选择左上角的菜单，然后选择 Azure Active Directory

3. 在 AAD 中，选择 App registrations

4. 选择  New registration。这将打开注册应用页面。我们将使用它来注册 Blazor 应用程序。

1. 填写应用名称

2. Supported account types 设置为 Accounts in this organizational directory only

3. 在重定向 URI 中，选择 Web 并填写 https://localhost:5001/authentication/login-callback。我们将为应用使用 5001 端口，因为这是它在 IIS express 中的默认端口，但我们可能需要稍后在创建应用程序时更改此端口

4. 选择 Register 创建应用

5. 注册应用后，您将看到 client id 和 tenant id。把他们复制出来，我们稍后需要。

6. 选择 Authentication  菜单

7. 在 Implicit grant 下，选择 Access tokens 和 ID tokens

8. 点击 Save

9. 搞定！现在，我们可以创建 Blazor 应用。打开命令提示符并使用以下命令创建 Blazor 应用，在其中填写client id 和 tenant id 以及应用注册的名称：

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" -o {APP NAME} --tenant-id "{TENANT ID}"

10. 这个命令创建了一个包含 Blazor WebAssembly 应用的文件夹。打开该目录。

11. 运行以下命令编译：

dotnet build

12. 使用以下命令运行：

dotnet run

13. Console 输出将显示应用运行所在的 URL。检查URL的端口是否与我们在AAD（5001）中的注册的程序配置的一样。如果不是，请更改应用程序注册以匹配端口。启动浏览器并打开 Blazor 应用程序的 URL。该程序有一个用于身份认证的登录菜单，点击并使用您的 Azure 帐户或 AAD 租户中存在的其他帐户登录。您将登录成功，并看到您的名字。

结论

Azure Active Directory 让您能够保护您的应用，并无需担心复杂的安全设置。您可以使用它来保护各种类型的应用，包括 Blazor WebAssembly 应用程序。赶紧上手实践吧！

汪宇杰博客

Azure | .NET | 微软 MVP

无广告，不卖课，做纯粹的技术公众号