web-dev-qa-db-ja.com

.Net Core 3 Blazor Server-クレーム付きの基本的なログイン方法

ユーザー名、パスワード、ロールIDのテーブルが既にあるので、ASP.NETメンバーシップテーブルを使用したくありません。また、ユーザー名とパスワードを要求する単純なログインページだけが必要で、事前に作成されたIdentity.UIパッケージは必要ありません。

しかし、私はBlazor Serverに基本的なログインを行う方法を知りません。私は、Startup.csで構成されている基本的な設定を以下のように考えています。

ConfigureServicesで：

services
    .AddAuthentication(Microsoft.AspNetCore.Authentication.Cookies.CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie();

Configure（）で：

app.UseAuthentication();
app.UseAuthorization();

通常、私はこのようなものを呼び出すでしょう：

await HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, 
    principal, 
    new AuthenticationProperties { IsPersistent = loginData.RememberMe });

実際、上記のdoesを.cshtmlページから実行すると機能しますが、これをBlazorコンポーネント（.razor）として機能させたいのです。

httpContextAccessorを挿入してみましたが、そこからSignInAsyncメソッドを呼び出そうとすると、すでに設定されているヘッダーに関するエラーが発生しました。

実際にサインインするために何を呼び出すかわからない.razor Loginコンポーネントがあります。

@page "/login"


@using Microsoft.AspNetCore.Authentication.Cookies;
@using Microsoft.AspNetCore.Components;
@using System.Security.Claims;


@inject NavigationManager navigationManager
@inject DataAccess.Models.CurrentDataContext db

<h3>Login</h3>

<div>
    Email:
    <input type="text" @bind="@email" />
</div>

<div>
    Password:
    <input type="text" @bind="@password" />
</div>

<div>
    <button class="btn btn-primary" @onclick="DoLogin">Log In</button>
    <span class="text-danger">@loginErrorMessage</span>
</div>

@code {
    string email = "";
    string password = "";
    string loginErrorMessage = "";

    protected async Task DoLogin()
    {
        var emailTrimmed = email.ToLower().Trim();
        var user = db.UserAccount.FirstOrDefault(u => u.EmailAddress.ToLower() == emailTrimmed);
        if (user != null) //if (user != null)
        {

            //TODO check password


            var claims = new List<Claim> { 
                new Claim(ClaimTypes.Name, emailTrimmed)
            };

            var claimsIdentity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);


            //SIGN in the user

            ///////////////////////////
            //   WHAT GOES HERE?   ////
            ///////////////////////////
            //

            navigationManager.NavigateTo("/fetchdata");

        }
        else
        {
            loginErrorMessage = "Error logging in.";
        }
    }
}
c#.net-coreblazor
2
FirstDivision

私が取り上げるように、 シンプルなサーバー側のBlazor Cookie認証のデモ

.cshtmlファイルの次のコードを使用して、ユーザーをログインできます。

public class LoginModel : PageModel
{
    public string ReturnUrl { get; set; }
    public async Task<IActionResult> 
        OnGetAsync(string paramUsername, string paramPassword)
    {
        string returnUrl = Url.Content("~/");
        try
        {
            // Clear the existing external cookie
            await HttpContext
                .SignOutAsync(
                CookieAuthenticationDefaults.AuthenticationScheme);
        }
        catch { }
        // *** !!! This is where you would validate the user !!! ***
        // In this example we just log the user in
        // (Always log the user in for this demo)
        var claims = new List<Claim>
        {
            new Claim(ClaimTypes.Name, paramUsername),
            new Claim(ClaimTypes.Role, "Administrator"),
        };
        var claimsIdentity = new ClaimsIdentity(
            claims, CookieAuthenticationDefaults.AuthenticationScheme);
        var authProperties = new AuthenticationProperties
        {
            IsPersistent = true,
            RedirectUri = this.Request.Host.Value
        };
        try
        {
            await HttpContext.SignInAsync(
            CookieAuthenticationDefaults.AuthenticationScheme,
            new ClaimsPrincipal(claimsIdentity),
            authProperties);
        }
        catch (Exception ex)
        {
            string error = ex.Message;
        }
        return LocalRedirect(returnUrl);
    }
}

.razorページへのログインについては、心配しないでください。認証Cookieを確立するには、完全なポストバックを実行する必要があります。 .razorページには「ポストバック」はありませんが、.cshtmlページにはあります。

2
Michael Washington

この男の投稿に基づいたバージョンを作成しました： https://www.oqtane.org/Resources/Blog/PostId/527/exploring-authentication-in-blazor?fbclid= IwAR0rbQkY47cHHxs29HWCk0RggH7GHeLDx3kJ4vwmgUGMTsFU3hxpsQ9ybZo

正直なところ、私は自分のプロジェクトをほとんど作りませんでしたが、ほとんどの場合、上記のoqtaneポストから必要なものを盗みました。

そして彼は彼のプロジェクトは上記のマイケルの答えに基づいていると思います。

私はgitにプロジェクトを持っています（最初にgitを使用しましたが、あまりにも多くのことをコミットしました、現在は少し厄介です）： https://github.com/TroelsMortensen/DNP/tree/master/ Blazor/JSLogin

私が何をしているのか、完全にはわからないことを認めなければなりません。そして、それはまだ終わっていません。現在、ユーザーデータベースや実際の検証などに対するチェックは行われていません。クレームはハードコーディングされています。しかし、それは簡単に実装できるはずです。 Identityを使用しない、非常にシンプルなCookie認証が必要でした。このアプローチでは、ほとんどすべてを自分で制御しています。私はかみそりのページに投稿リクエストを送信できるjavascript（これも実際には私のものではありません）を持っていると思います。

Pages/Account/Login.razorはShared/Interop.csに呼び出しを送信し、wwwroot/interop.jsのJavaScriptを使用してPages/Account/LoginRequester.cshtml.csのpostメソッドを呼び出します。おもう。

アクセスするには、Pages/_Host.cshtmlにinterop.jsを含めます

サインインにHttpContextを使用します。LoginDisplay.razorはShared/MainLayout.razorに挿入されます。

1
Troels