跳到主要内容
给我们的新朋友:

Logto 是一个为现代应用和 SaaS 产品设计的 Auth0 替代方案。它提供 Cloud 和 开源 服务，帮助你快速启动身份和管理 (IAM) 系统。享受认证 (Authentication)、授权 (Authorization) 和多租户管理 一体化。

我们建议从 Logto Cloud 上的免费开发租户开始。这可以让你轻松探索所有功能。

在本文中，我们将介绍使用 .NET Core (Blazor WebAssembly) 和 Logto 快速构建 Naver 登录体验（用户认证 (Authentication)）的步骤。

先决条件

在 Logto 中创建一个应用程序​

Logto 基于 OpenID Connect (OIDC) 认证 (Authentication) 和 OAuth 2.0 授权 (Authorization)。它支持跨多个应用程序的联合身份管理，通常称为单点登录 (SSO)。

要创建你的 单页应用 应用程序，只需按照以下步骤操作：

  1. 打开 Logto Console。在“开始使用”部分，点击“查看全部”链接以打开应用程序框架列表。或者，你可以导航到 Logto Console > Applications，然后点击“创建应用程序”按钮。 开始使用
  2. 在打开的模态窗口中，点击“单页应用”部分，或使用左侧的快速过滤复选框过滤所有可用的“单页应用”框架。点击 ".NET Core (Blazor WebAssembly)" 框架卡片以开始创建你的应用程序。 框架
  3. 输入应用程序名称，例如“Bookstore”，然后点击“创建应用程序”。

🎉 太棒了！你刚刚在 Logto 中创建了你的第一个应用程序。你将看到一个祝贺页面，其中包含详细的集成指南。按照指南查看你的应用程序中的体验将会是什么样的。

集成 .NET Core (Blazor WebAssembly) SDK​

提示:

安装​

将 NuGet 包添加到你的项目中：

dotnet add package Blorc.OpenIdConnect

添加脚本引用​

在 index.html 文件中包含 Blorc.Core/injector.js：

index.html
<head>
  <!-- ... -->
  <script src="_content/Blorc.Core/injector.js"></script>
  <!-- ... -->
</head>

注册服务​

将以下代码添加到 Program.cs 文件中：

Program.cs
using Blorc.OpenIdConnect;
using Blorc.Services;

builder.Services.AddBlorcCore();
builder.Services.AddAuthorizationCore();
builder.Services.AddBlorcOpenIdConnect(
    options =>
    {
        builder.Configuration.Bind("IdentityServer", options);
    });

var webAssemblyHost = builder.Build();

await webAssemblyHost
    .ConfigureDocumentAsync(async documentService =>
    {
        await documentService.InjectBlorcCoreJsAsync();
        await documentService.InjectOpenIdConnectAsync();
    });

await webAssemblyHost.RunAsync();
信息:

无需使用 Microsoft.AspNetCore.Components.WebAssembly.Authentication 包。Blorc.OpenIdConnect 包将负责认证过程。

配置重定向 URI​

在我们深入细节之前，这里是终端用户体验的快速概述。登录过程可以简化如下：

  1. 你的应用调用登录方法。
  2. 用户被重定向到 Logto 登录页面。对于原生应用，将打开系统浏览器。
  3. 用户登录并被重定向回你的应用（配置为重定向 URI）。

关于基于重定向的登录​

  1. 此认证 (Authentication) 过程遵循 OpenID Connect (OIDC) 协议，Logto 强制执行严格的安全措施以保护用户登录。
  2. 如果你有多个应用程序，可以使用相同的身份提供商 (IdP)（日志 (Logto)）。一旦用户登录到一个应用程序，当用户访问另一个应用程序时，Logto 将自动完成登录过程。

要了解有关基于重定向的登录的原理和好处的更多信息，请参阅 Logto 登录体验解释。

备注:

在以下代码片段中，我们假设你的应用程序运行在 http://localhost:3000/。

配置重定向 URI​

切换到 Logto Console 的应用详情页面。添加一个重定向 URI http://localhost:3000/callback。

Logto Console 中的重定向 URI

就像登录一样，用户应该被重定向到 Logto 以注销共享会话。完成后，最好将用户重定向回你的网站。例如，添加 http://localhost:3000/ 作为注销后重定向 URI 部分。

然后点击“保存”以保存更改。

配置应用程序​

将以下代码添加到 appsettings.json 文件中：

appsettings.json
{
// ...
IdentityServer: {
  Authority: 'https://<your-logto-endpoint>/oidc',
  ClientId: '<your-logto-app-id>',
  PostLogoutRedirectUri: 'http://localhost:3000/',
  RedirectUri: 'http://localhost:3000/callback',
  ResponseType: 'code',
  Scope: 'openid profile', // 如有需要可添加更多 scopes
},
}

记得将 RedirectUri 和 PostLogoutRedirectUri 添加到 Logto 应用程序设置中允许的重定向 URI 列表中。它们都是你的 WASM 应用程序的 URL。

添加 AuthorizeView 组件​

在需要认证的 Razor 页面中，添加 AuthorizeView 组件。假设是在 Home.razor 页面：

Pages/Home.razor
@using Microsoft.AspNetCore.Components.Authorization
@page "/"

<AuthorizeView>
    <Authorized>
        @* 已登录视图 *@
        <button @onclick="OnLogoutButtonClickAsync">
            Sign out
        </button>
    </Authorized>
    <NotAuthorized>
        @* 未认证视图 *@
        <button @onclick="OnLoginButtonClickAsync">
            Sign in
        </button>
    </NotAuthorized>
</AuthorizeView>

设置认证​

在 Home.razor.cs 文件中（如果不存在则创建），添加以下代码：

Pages/Home.razor.cs
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Blorc.OpenIdConnect;
using Microsoft.AspNetCore.Components.Authorization;

[Authorize]
public partial class Home : ComponentBase
{
    [Inject]
    public required IUserManager UserManager { get; set; }

    public User<Profile>? User { get; set; }

    [CascadingParameter]
    protected Task<AuthenticationState>? AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        User = await UserManager.GetUserAsync<User<Profile>>(AuthenticationStateTask!);
    }

    private async Task OnLoginButtonClickAsync(MouseEventArgs obj)
    {
        await UserManager.SignInRedirectAsync();
    }

    private async Task OnLogoutButtonClickAsync(MouseEventArgs obj)
    {
        await UserManager.SignOutRedirectAsync();
    }
}

一旦用户通过认证，User 属性将被填充用户信息。

检查点：测试你的应用程序​

现在，你可以测试你的应用程序：

  1. 运行你的应用程序，你将看到登录按钮。
  2. 点击登录按钮，SDK 将初始化登录过程并将你重定向到 Logto 登录页面。
  3. 登录后，你将被重定向回你的应用程序，并看到登出按钮。
  4. 点击登出按钮以清除令牌存储并登出。

添加 Naver 连接器​

要实现快速登录并提高用户转化率，请将 .NET Core (Blazor WebAssembly) 作为身份提供商 (IdP) 进行连接。Logto 社交连接器可以帮助你在几分钟内通过允许输入多个参数来建立此连接。

要添加社交连接器，只需按照以下步骤操作：

  1. 导航到 Console > Connectors > Social Connectors。
  2. 点击“添加社交连接器”并选择“Naver”。
  3. 按照 README 指南完成必填字段并自定义设置。

Connector tab

备注:

如果你正在按照现场连接器指南进行操作，可以跳过下一部分。

设置 Naver 登录​

仅开发者网站支持韩语​

目前 Naver Developers 网站仅支持韩语。请考虑使用翻译工具。

用于生产环境​

  • 对于生产环境，你必须获得 Naver 团队的审核。 否则，只有注册用户可以登录。
    • 你可以从 맴버관리(Member Manage) 菜单中添加测试人员。
  • 要获得审核，请检查应用程序项目设置中的 API 설정(API Setting) 下的 애플리케이션 개발 상태(Application Devlopment Status)。

在 Naver Developers 中设置项目​

  • 访问 Naver Developers 并使用你的 Naver 账户登录。
  • 从菜单中点击 Application -> 어플리케이션 등록 来创建新项目。
  • 按照以下说明创建应用程序。

应用程序名称 (어플리케이션 이름)​

  • 在 어플리케이션 이름 中输入你的应用程序名称（此名称将在用户登录时显示）。

API 使用 (사용 API)​

  • 为 사용 API(API Usage) 选择 네이버 로그인(Naver Login)
  • 从 권한(Role) 中将 이메일 주소(Email Address), 별명(Nickname), 프로필 사진(Profile Image) 勾选为 필수(Neccessary)（你可以将这些选项勾选为 추가(Add) 作为可选项，但你无法从用户那里获取信息。）

登录开放 API 服务环境 (로그인 오픈 API 서비스 환경)​

  • 对于 로그인 오픈 API 서비스 환경(Sign in Open API Service Environment)，添加两个环境 PC웹(PC Web) 和 모바일웹(Mobile Web)。

PC Web (PC 웹)​

Mobile Web (Mobile 웹)​

警告:

connector_id 可以在 Logto 管理控制台连接器详情页面的顶部栏找到。

配置 Logto​

配置类型​

名称类型
clientIdstring
clientSecretstring

clientId​

clientId 是你项目的 Client ID。 （你可以在 Naver developers 的项目 애플리케이션 정보(Application Info) 中找到。）

clientSecret​

clientSecret 是你项目的 Client Secret。 （你可以在 Naver developers 的项目 애플리케이션 정보(Application Info) 中找到。）

保存你的配置​

仔细检查你是否在 Logto 连接器配置区域填写了必要的值。点击“保存并完成”（或“保存更改”），Naver 连接器现在应该可用了。

在登录体验中启用 Naver 连接器​

一旦你成功创建了一个社交连接器，你可以在登录体验中将其启用为“继续使用 Naver”按钮。

  1. 导航到 Console > 登录体验 > 注册和登录。
  2. （可选）如果只需要社交登录，选择“无”作为注册标识符。
  3. 将配置好的 Naver 连接器添加到“社交登录”部分。

登录体验选项卡

测试和验证​

返回到你的 .NET Core (Blazor WebAssembly) 应用。你现在应该可以使用 Naver 登录了。享受吧！

拓展阅读​

终端用户流程：Logto 提供开箱即用的认证 (Authentication) 流程，包括多因素认证 (MFA) 和企业单点登录 (SSO)，以及强大的 API，用于灵活实现账户设置、安全验证和多租户体验。

授权 (Authorization)：授权 (Authorization) 定义了用户在被认证 (Authentication) 后可以执行的操作或访问的资源。探索如何保护你的 API 以用于原生和单页应用程序，并实现基于角色的访问控制 (RBAC)。

组织 (Organizations)：在多租户 SaaS 和 B2B 应用中特别有效，组织功能支持租户创建、成员管理、组织级 RBAC 和即时供应。

客户 IAM 系列：我们关于客户（或消费者）身份和访问管理的系列博客文章，从 101 到高级主题及更深入的内容。