Blazor WebAssemblyでユーザ認証関連のローディング画面をカスタマイズ

はじめに

この動画の7:00あたりからの会話

「カラーリングが決まってくるとモチベーション的にも上がるので」
「真っ白でステッカー貼ってるだけよりも、しっかりカラーリングしてやってあげたほうが自分のドライバーとしてのやる気も出ますし、緊張感変わりますよね、やっぱり」

これはプログラミングでも同じように思うときがあります。開発しているシステムにインターフェースのデザインが適用されるだけでもモチベーションが上がるし完成に向けて丁寧に作っていこうという気分になります。

Blazor WebAssemblyでアプリを作成して起動すると最初に目にするのはLoading...というローディング画面です。この画面って開発をする中で見る時間がそれなりにあるので、これをかっこよくするだけでもモチベーションが上がる気がします。私の場合はローディング画面で画像を使うのはよくないかなと思って、CSSでアニメーションの表示ができるようなものを使っています。

ローディング画面が表示されるタイミングは起動したときだけかと思っていたのですが、ユーザ認証に関連したローディング画面もあります。これも起動時のようなシンプルな表示で、この記事ではユーザ認証関連のローディング画面をカスタマイズする方法を紹介します。

Auth0でユーザ認証

Blazor WebAssemblyでユーザ認証する方法はいくつかあるようですが、ユーザ管理等の機能要件を検討して私はAuth0を使うことにしました。以下の記事を参考にして作りました。

そのときの作業メモは以下にまとめていました。.NET 6がプレビューだったときの作業ですが、基本的にはこのまま動作するはずです。

ログインボタンをクリックするとAuth0が提供しているログイン画面のWebページに移動します。ログイン画面を作るのって結構面倒なので、それをAuth0に任せられるのは助かりました。最近はStripeを使った開発をしているのですが、Stripeもクレジットカード情報を入力するWebページに移動するようになっていて、このスタイルは効率的で良いです。

ユーザ認証に関連するローディング画面

Auth0でユーザ認証をして動作させていると、ログイン直後などにローディングのメッセージが表示されることに気づきました。しばらくは放置してメインの機能の開発をしていたのですが、どうしても気になったので調べていたら以下に情報がありました。

以下のページのCustomize the authentication user interfaceを参考にしました。

Pages/Authentication.razor （変更前）

Pages/Authentication.razorを編集します。私が最初の作業メモを書いたときは以下のようになっていました。

Pages/Authentication.razor

@page "/authentication/{action}"

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Configuration

@inject NavigationManager Navigation
@inject IConfiguration Configuration

<RemoteAuthenticatorView Action="@Action">
    <LogOut>
        @{
            var authority = (string)Configuration["Auth0:Authority"];
            var clientId = (string)Configuration["Auth0:ClientId"];

             Navigation.NavigateTo($"{authority}/v2/logout?client_id={clientId}");
        }
    </LogOut>
</RemoteAuthenticatorView>

@code{
    [Parameter] public string Action { get; set; }
}

Pages/Authentication.razor （変更後）

<LoggingIn> <CompletingLoggingIn> <CompletingLogOut> <LogOutSucceeded> を追加しました。以下のコードではMudBlazorの<MudProgressLinear>を表示しています。

Pages/Authentication.razor

@page "/authentication/{action}"

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Configuration

@inject NavigationManager Navigation
@inject IConfiguration Configuration

<RemoteAuthenticatorView Action="@Action">
    <LoggingIn>
        <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
    </LoggingIn>
    <CompletingLoggingIn>
        <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
    </CompletingLoggingIn>
    <LogOut>
        @{
            var authority = (string)Configuration["Auth0:Authority"];
            var clientId = (string)Configuration["Auth0:ClientId"];

             Navigation.NavigateTo($"{authority}/v2/logout?client_id={clientId}");
        }
    </LogOut>
    <CompletingLogOut>
        <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
    </CompletingLogOut>
    <LogOutSucceeded>
        <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
    </LogOutSucceeded>
</RemoteAuthenticatorView>

@code{
    [Parameter] public string? Action { get; set; }
}

これでユーザ認証関連のローディング画面ではMudBlazorのプログレスバーが表示されるようになりました。ローディング画面でシンプルなアニメーションで動いているだけでも、アプリのクオリティが上がったような気になります。

おわりに

Blazor WebAssemblyでユーザ認証関連のローディング画面をカスタマイズする方法を紹介しました。ローディング画面自体はアプリの動作とは関係ないですが、きれいなローディング画面やおもしろいローディング画面はアプリの印象に大きく影響するように思います。ビジネス関係のアプリだと遊びすぎてもよくないし、バランス感覚が大事だとは思いますが。