如何從 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 。