Blazor服務器端，.razor頁面上的ExternalRegister按鈕

是否可以將“外部注冊”按鈕放置在 .razor 頁面（服務器端）內？

以下代碼來自 ExternalRegister.cshtml，但我希望將這兩個注冊按鈕（Google、Facebook）作為 Start.razor 頁面的一部分。那可能嗎？

@model Aplication.Areas.Identity.Pages.Account.ExternalRegisterModel
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
    <div>
        <p>
            @foreach (var provider in Model.ExternalLogins)
            {
                <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
            }
        </p>
    </div>
</form>

uj5u.com熱心網友回復：

是的，您的剃須刀頁面中可以有按鈕。

當然，為此，您需要能夠列舉可用的提供程式，這意味著您需要將它們從 _Host.cshtml（或托管 Blazor 應用程式的任何位置）傳遞到您的 Blazor 應用程式

注意：你不能傳遞一個串列，AuthenticationScheme因為 .NET 不會序列化它們，這就是我將它們轉換為 DTO 的原因ExternalProvider

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@inject SignInManager<IdentityUser> _signInManager
@{
  var state = new InitialApplicationState
  {
      XsrfToken = Xsrf.GetAndStoreTokens(HttpContext).RequestToken,
      ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync())
        .ToList()
        .Select(scheme=>
           new ExternalProvider {Name=scheme.Name, DisplayName=scheme.DisplayName}
         )
  };
}
<component type="typeof(App)" param-InitialState="state" render-mode="ServerPrerendered" />

InitialApplicationState和是簡單的ExternalProviderDTO 類

public class InitialApplicationState
{
    public string XsrfToken { get; set; }
    public IEnumerable<ExternalProvider> ExternalLogins { get; set; }
}
public class ExternalProvider
{
    public string Name { get; set; }
    public string DisplayName { get; set; }
}

現在，您需要在 Blazor 代碼中作為組件接收Parameter此App.razor資料

@inject InitialApplicationState InitialStateService

@code {
  [Parameter] public InitialApplicationState InitialState { get; set; } = default;

  protected override Task OnInitializedAsync()
  {
    InitialStateService.XsrfToken = InitialState.XsrfToken;
    InitialStateService.ExternalLogins = InitialState.ExternalLogins;
    return base.OnInitializedAsync();
  }
}

我們在這里所做的只是宣告Parameter InitialState將接收我們的InitialApplicationState- 然后我們將該狀態存盤在InitialStateService配置startup.cs為 Scoped 依賴項的服務中。

builder.Services.AddScoped<InitialApplicationState>();

現在，我們在 Blazor 的 DI 容器中有一個服務，其中包含可用外部身份驗證提供程式的串列和我們的偽造保護令牌。

我們可以InitialApplicationState在 Blazor 中注入我們需要的任何地方，例如Index.razor并列舉ExternalLogins渲染按鈕

由于我們沒有asp*指令，因此 Blazor 中的表單宣告略有不同：

@inject InitialApplicationState InitialStateService

<form id="external-account" 
      action="/Identity/Account/ExternalLogin" 
      method="post">
  <div>
    <p>
      @foreach (var provider in InitialStateService.ExternalLogins)
      {
        <button type="submit" 
                name="provider" 
                value="@provider.Name" 
                title="Log in using your @provider.DisplayName account">
          @provider.DisplayName
        </button>
      }
    </p>
  </div>
  <input name="__RequestVerificationToken" type="hidden"
        value="@InitialStateService.XsrfToken">
</form>

uj5u.com熱心網友回復：

我認為最好的策略是在 Razor PageModel (Code-Behind) 中定義兩個 OnPost 方法。例如：

    public void OnPostFaceBook(ExternalLogin provider)
{
    //your code here
}

    public void OnPostGoogle(ExternalLogin provider)
{
    //your code here
}

并在您的 .cshtml 檔案中為每個表單放置兩個單獨的表單，并將引數 asp-page-handler添加 到每個提交按鈕。例如：

  <button type="submit" class="btn btn-primary" value="FaceBook" value="FaceBook" asp-page-handler="FaceBook">Log in using your FaceBook account</button>

和其他形式：

  <button type="submit" class="btn btn-primary" value="Google" value="Google" asp-page-handler="Google">Log in using your Google account</button>

標籤：

上一篇：未經allUsers權限通過同一個專案中的另一個呼叫云函式

下一篇：WCF資料服務顯示未處理例外的錯誤