Let's BlazorServer+Radzen ♪ ③ (Login画面) - あきちゃんの飽き飽き備忘録

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

前回で公式サイトのデザインの使用が完了しました。

今回はLogin画面を作成しようと思います。

それでは早速・・・Let's BlazorServer+Radzen ♪

Lesson.1 Loginコンポーネント ♪

RadzenのLoginコンポーネントは以下のようにサンプルがあるのでこれを使っていこうと思います。

blazor.radzen.com

本記事ではサンプルの一番下にあるシンプルな青色の画面を実装しようと思います。

Lesson.2 Login画面導入 ♪

Shared\MainLayout.razorに以下コードを追加します。

<RadzenBody style="margin-left: 0px">
    <ChildContent>
        <div class="row justify-content-center">
            <div class="justify-content-center col-xl-5 col-md-7">
                <RadzenCard class="d-flex p-0 rz-border-radius-4 rz-shadow-10 " Style="margin-top: 8rem; width: 100%; flex-direction: column; overflow: hidden; align-items: stretch;">
                    <RadzenCard Class="rz-shadow-0 rz-border-radius-0 rz-background-color-info p-5" style="text-align: center;">
                        <RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.H2" Class="rz-color-white mb-0">Login</RadzenText>
                    </RadzenCard>
                    <RadzenCard Class="rz-shadow-0 p-5">
                        <RadzenTemplateForm Data=@("SimpleLogin")>
                            <RadzenLogin AllowRegister="false" AllowResetPassword="true" />
                        </RadzenTemplateForm>
                    </RadzenCard>
                </RadzenCard>
            </div>
        </div>
    </ChildContent>
</RadzenBody>

この状態で実行すると以下画面になると思います。

この画面だとLogin画面とMain画面が共存してしまっているのでログインが成功したらMain画面を、だめなら表示しないといった処理を追加したいです。

なのでLoginボタンの処理を追加します、ます先ほど追加したソースコードに以下の修正を加えます。

<RadzenBody style="margin-left: 0px" Visible=@IsLogin>
    <ChildContent>
        <div class="row justify-content-center">
            <div class="justify-content-center col-xl-5 col-md-7">
                <RadzenCard class="d-flex p-0 rz-border-radius-4 rz-shadow-10 " Style="margin-top: 8rem; width: 100%; flex-direction: column; overflow: hidden; align-items: stretch;">
                    <RadzenCard Class="rz-shadow-0 rz-border-radius-0 rz-background-color-info p-5" style="text-align: center;">
                        <RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.H2" Class="rz-color-white mb-0">Login</RadzenText>
                    </RadzenCard>
                    <RadzenCard Class="rz-shadow-0 p-5">
                        <RadzenTemplateForm Data=@("SimpleLogin")>
                            <RadzenLogin AllowRegister="false" AllowResetPassword="true" Login=@(args => OnLogin(args)) />
                        </RadzenTemplateForm>
                    </RadzenCard>
                </RadzenCard>
            </div>
        </div>
    </ChildContent>
</RadzenBody>

上記のコードの直下にあるRadzenLayoutに以下のコードを加えます。

<RadzenLayout Visible=@(!IsLogin)>

ソースコード(Shared\MainLayout.razor)の一番下に以下を加えます

@code {
    bool IsLogin = true;
    void OnLogin(LoginArgs args)
    {
        IsLogin = false;
    }
}

ここまできて実行するとLogin画面が表示された後任意の適当な文字をUsernameとPasswordに入力してLoginを押すとMain画面に遷移するようになると思います。

↓

ここまでで画面の作成は終了です。

Lesson.3 Login認証導入 ♪

Lesson.2まででLogin画面までは完成しました。

ですが、今のままだと何を入力してもログインできてしまうのでLogin可能なUser情報を取得するServiceを作ろうと思います。

まず、Data\にLoginInfo.cs、LoginInfoService.csを作成します。

追加したData\LoginInfo.csを以下のように修正します。

    public class LoginInfo
    {
        public int Id { get; set; } = -1;
        public string? UserName { get; set; } = string.Empty;
        public string? Password { get; set; } = string.Empty;
    }

追加したData\LoginInfoService.csを以下のように修正します。

    public class LoginInfoService
    {
        public Task<LoginInfo[]> GetLoginInfoAsync()
        {
            return Task.FromResult(GetLoginInfo());
        }
        LoginInfo[] GetLoginInfo()
        {
            // ここでDBと通信しユーザー情報を取得
            // 今回は構造体で適当にユーザーを返す
            return new LoginInfo[3] {
                new LoginInfo() {Id = 1, UserName = "saitou", Password = "password" },
                new LoginInfo() {Id = 2, UserName = "yamada", Password = "password" },
                new LoginInfo() {Id = 3, UserName = "tanaka", Password = "password" }
            };
        }
    }

コメント部分でユーザーのデータを取得します。

実際の環境ではApiやDatabaseから社員情報を取得しますが今回は適当に架空のユーザーを作成します。

作成したServiceを使用するためにServicesに登録する必要があります、Program.csに以下コードを追加します。

builder.Services.AddSingleton<LoginInfoService>();

上記でLoginInfoServiceを使う準備ができたのでShared\MainLayout.razorに戻り以下コード

@using BlazorServerApp.Data
@inject LoginInfoService LoginInfoService

をソースコード上部の@using ...に続けて追加します。(前記の登録を含めておそらくDIのようなものだとおもいます、筆者の小さな脳みそでは理解できていないので知ってる方は是非教えて頂けると助かります)

@code{}を以下のように修正します。

@code {
    bool IsLogin = true;
    async Task OnLogin(LoginArgs args)
    {
        var allUser = await LoginInfoService.GetLoginInfoAsync();
        var getUser = allUser.Where(x => x.UserName == args.Username && x.Password == args.Password);
        if (getUser.Any())
        {
            // ユーザーが取得できたためLogin
            IsLogin = false;
        }
        else
        {
            // ユーザーが取得できなかったためNG
        }
    }
}