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

Posted 2023-03-27

【中文标题】如何从 Blazor 组件调用“/Identity/Account/ExternalLogin”？

【英文标题】：How can I call '/Identity/Account/ExternalLogin' from a Blazor component?

【发布时间】：2020-11-06 17:23:33

【问题描述】：

我的目标是在 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 组件登录时，调试窗口显示一个 Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException 被抛出。 我唯一的猜测是，这是因为导航不是从可能具有 Antiforgery 元素的内置身份页面之一启动的。如何在没有中间人登录/注册页面的情况下直接导航到此 ExternalLogin 页面？

【问题讨论】：

嗯......你没有走好路。如果您获得反 CSRF 令牌并将其传递到您的表单数据中，则事件将不起作用。您只需要一个 Twitter 登录名吗？

不，我最终会添加其他登录提供程序。

好的，但是如果您添加新的外部提供商，您将需要登录页面来显示提供商选择。您需要本地登录吗？

@aguafrommars 不，我不这么认为。仅限社交/外部登录。

【参考方案1】：

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

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

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

选择身份并点击添加。

选择您的身份数据上下文类和您想要搭建的内容。

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

【讨论】：

标记为有用，因为我将登录/注册页面更新为仅显示外部登录，但不直接解决从前端剃须刀调用 ExternalLogin 页面的问题。此外，这个答案提到了“Blazor WebAssembly App”模板（可能仍然相关），当我使用“Blazor Server App”模板时，这已被标记为 blazor-server-side。我也会更新我的帖子以澄清这一点。