如何从 Blazor 组件调用“/Identity/Account/ExternalLogin”？

Question

我的目标是在 Blazor 组件中拥有外部提供程序按钮（与 /Identity/Account 登录和注册页面中的 foreach 完全相同，见下文）。 我正在使用“Blazor 服务器应用程序”模板。

我已成功引入外部提供程序、枚举按钮，并拥有一个与默认身份登录页面具有相同操作的表单。 我的外部登录是 Twitter 并确认在默认页面上工作。

<form action="/Identity/Account/ExternalLogin" method="post">
    @foreach (var provider in ExternalLogins)
    {
        <button type="submit" class="btn btn-primary btn-lg form-control" name="provider" 
value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
    }
</form>

当我使用按钮从 blazor 组件登录时，调试 window 显示Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException被抛出。 我唯一的猜测是，这是因为导航不是从可能具有 Antiforgery 元素的内置身份页面之一启动的。 如何在没有中间人登录/注册页面的情况下直接导航到此 ExternalLogin 页面？

Answer 1

调用/Identity/Account/ExternalLogin页面意味着要处理反 CSRF 机制（HTTP header 和表单的隐藏字段），实现起来并不容易。
与其直接调用/Identity/Account/ExternalLogin ，不如自定义登录页面更容易：

从默认的 blazor 模板开始，带有身份验证（wasm 或服务器），脚手架标识项，取决于您的需要，但至少有登录页面和外部登录页面来自定义它们。

Select Areas 文件夹并右键单击以打开上下文菜单。 选择 Add -> New Scaffolded Item...

选择身份并单击添加。

Select 您的身份数据上下文 class 以及您想要搭建的内容。

根据您的需要更新Areas/Identity/Pages/Account/Login.cshtml 。