🔐
Blazor WebAssemblyとAuth0でユーザー認証

2021/08/15 に公開
             Blazor WebAssemblyでシンプルなユーザー認証をすることがあり、Auth0を使った方法が簡単でよかったです。
            

             以下のエントリーを参考にしました。以下のエントリーはAPIの保護に関する説明のためにBlazor Serverのコードも含んでいますが、私の場合はAPIは他のクラウドサービスを利用しているため、Blazor WebAssemblyのみで構成しました。
            

             
              
               &lt;/span&gt;&lt;a href="https://auth0.com/blog/securing-blazor-webassembly-apps/" style="" target="_blank" rel="nofollow noopener noreferrer"&gt;https://auth0.com/blog/securing-blazor-webassembly-apps/&lt;/a&gt;&lt;/p&gt;
&lt;p data-line="7" class="code-line"&gt;以下のコードは2021年10月12日時点で最新版の.NET6 RC2とVisual Studio 2022 Preview 5で動作を確認しています。&lt;/p&gt;
&lt;a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"/&gt; プロジェクトの作成&lt;/h1&gt;
&lt;p data-line="13" class="code-line"&gt;Visual StudioでBlazor WebAssemblyのプロジェクトを作成します。以下のサンプルコードではプロジェクト名に&lt;code&gt;BlazorAuth&lt;/code&gt;を指定した際のコードになりますので、サンプルコードの&lt;code&gt;BlazorAuth&lt;/code&gt;の部分はプロジェクトの名前に応じて変更してください。&lt;/p&gt;
&lt;p data-line="15" class="code-line"&gt;ユーザー認証機能を搭載しますが、「認証の種類」には「なし」を選択します。&lt;/p&gt;
&lt;a class="header-anchor-link" href="#auth0%E3%81%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E7%99%BB%E9%8C%B2" aria-hidden="true"/&gt; Auth0にアプリケーションを登録&lt;/h1&gt;
&lt;p data-line="21" class="code-line"&gt;Auth0にログインしてアプリケーションを登録します。&lt;/p&gt;
&lt;p data-line="23" class="code-line"&gt;&lt;span class="embed-block zenn-embedded zenn-embedded-card"&gt;&lt;iframe id="zenn-embedded__8e080417368dc" src="https://embed.zenn.studio/card#zenn-embedded__8e080417368dc" data-content="https%3A%2F%2Fauth0.com%2F" frameborder="0" scrolling="no" loading="lazy"/&gt;&lt;/span&gt;&lt;a href="https://auth0.com/" style="" target="_blank" rel="nofollow noopener noreferrer"&gt;https://auth0.com/&lt;/a&gt;&lt;/p&gt;
&lt;li data-line="25" class="code-line"&gt;Application TypeにSingle Page Applicationを選択&lt;/li&gt;
&lt;li data-line="26" class="code-line"&gt;Allowed Callback URLsに&lt;code&gt;https://localhost:5001/authentication/login-callback&lt;/code&gt;を追加&lt;/li&gt;
&lt;li data-line="27" class="code-line"&gt;Allowed Logout URLsに&lt;code&gt;https://localhost:5001&lt;/code&gt;を追加&lt;/li&gt;
&lt;p data-line="29" class="code-line"&gt;Auth0の管理画面のSettings &amp;gt; LanguagesでJapanese (ja)をチェックすると認証画面が日本語に対応します。&lt;/p&gt;
&lt;a class="header-anchor-link" href="#blazor-webassembly%E3%81%AB%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0" aria-hidden="true"/&gt; Blazor WebAssemblyにコードを追加&lt;/h1&gt;
&lt;a class="header-anchor-link" href="#wwwroot%2Fappsettings.json" aria-hidden="true"/&gt; wwwroot/appsettings.json&lt;/h2&gt;
&lt;p data-line="35" class="code-line"&gt;&lt;code&gt;wwwroot&lt;/code&gt;のフォルダに&lt;code&gt;appsettings.json&lt;/code&gt;を作成して以下のように記述します。&lt;/p&gt;
&lt;p data-line="37" class="code-line"&gt;&lt;code&gt;&amp;lt;YOUR_AUTH0_DOMAIN&amp;gt;&lt;/code&gt;にはAuth0で登録したアプリケーションのドメイン、&lt;code&gt;&amp;lt;YOUR_CLIENT_ID&amp;gt;&lt;/code&gt;はAuth0で登録したアプリケーションのクライアントIDを指定します。&lt;/p&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;wwwroot/appsettings.json&lt;/span&gt;&lt;/div&gt;
&lt;span class="line"&gt;&lt;span style="color:#79B8FF"&gt;  "Auth0"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;: {&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#79B8FF"&gt;    "Authority"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;: &lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"https://&amp;lt;YOUR_AUTH0_DOMAIN&amp;gt;"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#79B8FF"&gt;    "ClientId"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;: &lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"&amp;lt;YOUR_CLIENT_ID&amp;gt;"&lt;/span&gt;&lt;/span&gt;
&lt;a class="header-anchor-link" href="#%E8%AA%8D%E8%A8%BC%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%AE%E8%BF%BD%E5%8A%A0" aria-hidden="true"/&gt; 認証パッケージの追加&lt;/h2&gt;
&lt;p data-line="50" class="code-line"&gt;Visual Studioのツールバーのプロジェクト &amp;gt; NuGet パッケージの管理をクリックしてパッケージの管理画面を開き、&lt;code&gt;Microsoft.AspNetCore.Components.WebAssembly.Authentication&lt;/code&gt;をインストールします。&lt;/p&gt;
&lt;a class="header-anchor-link" href="#program.cs" aria-hidden="true"/&gt; Program.cs&lt;/h2&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;Program.cs&lt;/span&gt;&lt;/div&gt;
&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="56"&gt;&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;using&lt;/span&gt;&lt;span style="color:#B392F0"&gt; BlazorAuth&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;using&lt;/span&gt;&lt;span style="color:#B392F0"&gt; Microsoft&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;AspNetCore&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;Components&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;Web&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;using&lt;/span&gt;&lt;span style="color:#B392F0"&gt; Microsoft&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;AspNetCore&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;Components&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;WebAssembly&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;Hosting&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;var&lt;/span&gt;&lt;span style="color:#B392F0"&gt; builder&lt;/span&gt;&lt;span style="color:#F97583"&gt; =&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; WebAssemblyHostBuilder.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;CreateDefault&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;(args);&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;builder.RootComponents.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;Add&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#B392F0"&gt;App&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;(&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"#app"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;builder.RootComponents.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;Add&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#B392F0"&gt;HeadOutlet&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;(&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"head::after"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;builder.Services.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;AddScoped&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;(&lt;/span&gt;&lt;span style="color:#B392F0"&gt;sp&lt;/span&gt;&lt;span style="color:#F97583"&gt; =&amp;gt;&lt;/span&gt;&lt;span style="color:#F97583"&gt; new&lt;/span&gt;&lt;span style="color:#B392F0"&gt; HttpClient&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; { BaseAddress &lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#F97583"&gt; new&lt;/span&gt;&lt;span style="color:#B392F0"&gt; Uri&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;(builder.HostEnvironment.BaseAddress) });&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;builder.Services.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;AddOidcAuthentication&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;(&lt;/span&gt;&lt;span style="color:#B392F0"&gt;options&lt;/span&gt;&lt;span style="color:#F97583"&gt; =&amp;gt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    builder.Configuration.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;Bind&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;(&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"Auth0"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;, options.ProviderOptions);&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    options.ProviderOptions.ResponseType &lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt; "code"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;await&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; builder.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;Build&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;().&lt;/span&gt;&lt;span style="color:#B392F0"&gt;RunAsync&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;a class="header-anchor-link" href="#wwwroot%2Findex.html" aria-hidden="true"/&gt; wwwroot/index.html&lt;/h2&gt;
&lt;p data-line="77" class="code-line"&gt;&lt;code&gt;wwwroot/index.html&lt;/code&gt;に認証に関するJavascriptを読み込むように編集します。&lt;code&gt;blazor.webassembly.js&lt;/code&gt;を読み込むタグの前に&lt;code&gt;AuthenticationService.js&lt;/code&gt;を読み込むタグを追加します。&lt;/p&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;wwwroot/index.html&lt;/span&gt;&lt;/div&gt;
&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="79"&gt;&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;&amp;lt;!&lt;/span&gt;&lt;span style="color:#85E89D"&gt;DOCTYPE&lt;/span&gt;&lt;span style="color:#B392F0"&gt; html&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;meta&lt;/span&gt;&lt;span style="color:#B392F0"&gt; charset&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"utf-8"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;meta&lt;/span&gt;&lt;span style="color:#B392F0"&gt; name&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"viewport"&lt;/span&gt;&lt;span style="color:#B392F0"&gt; content&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;title&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;BlazorAuth&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;title&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;base&lt;/span&gt;&lt;span style="color:#B392F0"&gt; href&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"/"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;link&lt;/span&gt;&lt;span style="color:#B392F0"&gt; href&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"css/bootstrap/bootstrap.min.css"&lt;/span&gt;&lt;span style="color:#B392F0"&gt; rel&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"stylesheet"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;link&lt;/span&gt;&lt;span style="color:#B392F0"&gt; href&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"css/app.css"&lt;/span&gt;&lt;span style="color:#B392F0"&gt; rel&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"stylesheet"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;link&lt;/span&gt;&lt;span style="color:#B392F0"&gt; href&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"BlazorAuth.styles.css"&lt;/span&gt;&lt;span style="color:#B392F0"&gt; rel&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"stylesheet"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;head&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;div&lt;/span&gt;&lt;span style="color:#B392F0"&gt; id&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"app"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;Loading...&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;div&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;div&lt;/span&gt;&lt;span style="color:#B392F0"&gt; id&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"blazor-error-ui"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        An unhandled error has occurred.&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;a&lt;/span&gt;&lt;span style="color:#B392F0"&gt; href&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;""&lt;/span&gt;&lt;span style="color:#B392F0"&gt; class&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"reload"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;Reload&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;a&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;a&lt;/span&gt;&lt;span style="color:#B392F0"&gt; class&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"dismiss"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;🗙&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;a&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;div&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;script&lt;/span&gt;&lt;span style="color:#B392F0"&gt; src&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;script&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;script&lt;/span&gt;&lt;span style="color:#B392F0"&gt; src&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"_framework/blazor.webassembly.js"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;script&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;body&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;html&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;a class="header-anchor-link" href="#_imports.razor" aria-hidden="true"/&gt; _Imports.razor&lt;/h2&gt;
&lt;p data-line="111" class="code-line"&gt;&lt;code&gt;_Imports.razor&lt;/code&gt;に以下を追加します。&lt;/p&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;_Imports.razor&lt;/span&gt;&lt;/div&gt;
&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="113"&gt;&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@using Microsoft.AspNetCore.Components.Authorization&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@using Microsoft.AspNetCore.Authorization&lt;/span&gt;&lt;/span&gt;
&lt;a class="header-anchor-link" href="#app.razor" aria-hidden="true"/&gt; App.razor&lt;/h2&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;App.razor&lt;/span&gt;&lt;/div&gt;
&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="120"&gt;&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;CascadingAuthenticationState&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;Router&lt;/span&gt;&lt;span style="color:#B392F0"&gt; AppAssembly&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"@typeof(App).Assembly"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;Found&lt;/span&gt;&lt;span style="color:#B392F0"&gt; Context&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"routeData"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;            &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;AuthorizeRouteView&lt;/span&gt;&lt;span style="color:#B392F0"&gt; RouteData&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"@routeData"&lt;/span&gt;&lt;span style="color:#B392F0"&gt; DefaultLayout&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"@typeof(MainLayout)"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;                &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;Authorizing&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;                    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;p&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;Determining session state, please wait...&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;p&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;                &amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;Authorizing&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;                &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;NotAuthorized&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;                    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;h1&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;Sorry&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;h1&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;                    &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;p&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;You're not authorized to reach this page. You need to log in.&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;p&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;                &amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;NotAuthorized&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;            &amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;AuthorizeRouteView&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        &amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;Found&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;NotFound&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;            &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;LayoutView&lt;/span&gt;&lt;span style="color:#B392F0"&gt; Layout&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"@typeof(MainLayout)"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;                &amp;lt;&lt;/span&gt;&lt;span style="color:#85E89D"&gt;p&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;Sorry, there's nothing at this address.&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;p&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;            &amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;LayoutView&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        &amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;NotFound&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    &amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;Router&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#85E89D"&gt;CascadingAuthenticationState&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;a class="header-anchor-link" href="#shared%2Faccesscontrol.razor" aria-hidden="true"/&gt; Shared/AccessControl.razor&lt;/h2&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;Shared/AccessControl.razor&lt;/span&gt;&lt;/div&gt;
&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="145"&gt;&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@using Microsoft.AspNetCore.Components.Authorization&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@using Microsoft.AspNetCore.Components.WebAssembly.Authentication&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@inject NavigationManager Navigation&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@inject SignOutSessionStateManager SignOutManager&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;AuthorizeView&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;Authorized&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        Hello, @context.User.Identity.Name&lt;/span&gt;&lt;span style="color:#F97583"&gt;!&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#B392F0"&gt;a&lt;/span&gt;&lt;span style="color:#B392F0"&gt; href&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"#"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; @onclick&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"BeginSignOut"&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;Log out&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;a&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;Authorized&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;NotAuthorized&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;a href&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"authentication/login"&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;Log in&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;a&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;NotAuthorized&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;AuthorizeView&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@code{&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    private async Task &lt;/span&gt;&lt;span style="color:#B392F0"&gt;BeginSignOut&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;(MouseEventArgs args)&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;        await&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; SignOutManager.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;SetSignOutState&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;        Navigation.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;NavigateTo&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;(&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"authentication/logout"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;a class="header-anchor-link" href="#shared%2Fmainlayout.razor" aria-hidden="true"/&gt; Shared/MainLayout.razor&lt;/h2&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;Shared/MainLayout.razor&lt;/span&gt;&lt;/div&gt;
&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="173"&gt;&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@inherits LayoutComponentBase&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#B392F0"&gt;div&lt;/span&gt;&lt;span style="color:#B392F0"&gt; class&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"page"&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;div class&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"sidebar"&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;NavMenu &lt;/span&gt;&lt;span style="color:#F97583"&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;div&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;div class&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"top-row px-4"&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;            &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;AccessControl &lt;/span&gt;&lt;span style="color:#F97583"&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;            &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;a href&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"http://blazor.net"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; target&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"_blank"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; class&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"ml-md-auto"&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;About&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;a&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;        &amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;div&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;        &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;article class&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"content px-4"&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;            @Body&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;        &amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;article&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;main&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;div&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;a class="header-anchor-link" href="#pages%2Fauthentication.razor" aria-hidden="true"/&gt; Pages/Authentication.razor&lt;/h2&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;Pages/Authentication.razor&lt;/span&gt;&lt;/div&gt;
&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="196"&gt;&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@page &lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"/authentication/{action}"&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@using Microsoft.AspNetCore.Components.WebAssembly.Authentication&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@using Microsoft.Extensions.Configuration&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@inject NavigationManager Navigation&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@inject IConfiguration Configuration&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#B392F0"&gt;RemoteAuthenticatorView&lt;/span&gt;&lt;span style="color:#B392F0"&gt; Action&lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"@Action"&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;LogOut&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;            var authority &lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; (&lt;/span&gt;&lt;span style="color:#F97583"&gt;string&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;)Configuration[&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"Auth0:Authority"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;];&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;            var clientId &lt;/span&gt;&lt;span style="color:#F97583"&gt;=&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; (&lt;/span&gt;&lt;span style="color:#F97583"&gt;string&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;)Configuration[&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"Auth0:ClientId"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;];&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;             Navigation.&lt;/span&gt;&lt;span style="color:#B392F0"&gt;NavigateTo&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;(&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;$"&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;{&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;authority&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;}&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;/v2/logout?client_id=&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;{&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;clientId&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;}&lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;    &amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;LogOut&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;RemoteAuthenticatorView&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@code{&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;    [Parameter] public &lt;/span&gt;&lt;span style="color:#F97583"&gt;string&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt; Action { get; set; }&lt;/span&gt;&lt;/span&gt;
&lt;a class="header-anchor-link" href="#%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E8%AA%8D%E8%A8%BC%E3%81%A7%E4%BF%9D%E8%AD%B7%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" aria-hidden="true"/&gt; ページをユーザー認証で保護する場合&lt;/h2&gt;
&lt;p data-line="223" class="code-line"&gt;&lt;code&gt;@attribute [Authorize]&lt;/code&gt;を追加することでページをユーザー認証で保護することができます。例えば&lt;code&gt;FetchData.razor&lt;/code&gt;のページを保護するためには以下のように記述します。&lt;/p&gt;
&lt;div class="code-block-filename-container"&gt;&lt;span class="code-block-filename"&gt;Pages/FetchData.razor&lt;/span&gt;&lt;/div&gt;
&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="225"&gt;&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@page &lt;/span&gt;&lt;span style="color:#9ECBFF"&gt;"/fetchdata"&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@attribute [Authorize]&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#E1E4E8"&gt;@inject HttpClient Http&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span style="color:#F97583"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;h1&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;Weather forecast&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color:#E1E4E8"&gt;h1&lt;/span&gt;&lt;span style="color:#F97583"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;p data-line="242" class="code-line"&gt;トップページにログインのリンクが表示されています。&lt;/p&gt;
&lt;p data-line="246" class="code-line"&gt;ログインのリンクをクリックするとAuth0のログイン画面が開きます。&lt;/p&gt;
&lt;p data-line="250" class="code-line"&gt;Auth0でログインすると、さきほどまでログインのリンクがあった場所にユーザー名とログアウトのリンクが表示されました。&lt;/p&gt;
&lt;a class="header-anchor-link" href="#%E6%9C%AA%E8%A7%A3%E6%B1%BA%E3%81%AE%E5%95%8F%E9%A1%8C" aria-hidden="true"/&gt; 未解決の問題&lt;/h2&gt;
&lt;p data-line="256" class="code-line"&gt;開発環境で動作中にAuth0のログイン画面が開いた際にWebブラウザがクラッシュすることがあります。以下のようなエラーメッセージとなっていました。&lt;/p&gt;
&lt;div class="code-block-container"&gt;&lt;pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"&gt;&lt;code class="code-line" data-line="258"&gt;&lt;span class="line"&gt;&lt;span&gt;info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span&gt;      Authorization failed. These requirements were not met:&lt;/span&gt;&lt;/span&gt;
&lt;span class="line"&gt;&lt;span&gt;      DenyAnonymousAuthorizationRequirement: Requires an authenticated user.&lt;/span&gt;&lt;/span&gt;
              
             
            