メインコンテンツへスキップ
Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、新規または既存のBlazor ServerアプリケーションにAuth0.AspNetCore.Authentication SDKを使ってAuth0を統合する方法を説明します。
1

Auth0を構成する

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

​
アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

​
Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。
サンプルプロジェクトに沿って進めている場合は、http://localhost:3000``/callbackに設定してください。

​
ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。
サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。
2

SDKをインストールして構成する

​
NuGetからインストールする

Auth0をBlazor Serverと統合するには、Auth0.AspNetCore.AuthenticationNuGetパッケージをアプリケーションにインストールすることでSDKを使用できます。

​
ミドルウェアを構成する

Blazor Serverアプリケーションで認証を可能にするには、SDKが提供するミドルウェアを使います。Program.csファイルに移動してbuilder.Services.AddAuth0WebAppAuthentication()を呼び出し、SDKのミドルウェアを登録します。DomainとClientIdは必ず構成してください。SDKがどのAuth0テナントとアプリケーションを使用すべきかを認識するために必要となるフィールドです。認証と認可がProgram.csファイルで有効になったことを確認します。
3

ログイン

Blazor Serverアプリケーションにユーザーをログインさせるには、LoginModelをPagesディレクトリに追加します。LoginModelのOnGetメソッド内でHttpContext.ChallengeAsync()を呼び出し、Auth0Constants.AuthenticationSchemeを認証スキームとして渡します。これにより当社のSDKが内部に登録しているOIDC認証ハンドラーが発動されます。関連するauthenticationPropertiesも必ず指定してください。構築はLoginAuthenticationPropertiesBuilderで行えます。HttpContext.ChallengeAsync()の呼び出し成功後、ユーザーはAuth0にリダイレクトされます。その後アプリケーションにリダイレクトで戻された際に、OIDCミドルウェアとクッキーミドルウェアの両方にサインインしています。これにより、ユーザーは後続の要求でも認証されるようになります。
チェックポイント
Loginの構成が完了したら、アプリケーションを実行して次の点を確認します：
  • Loginページに移動すると、Auth0にリダイレクトされる。
  • 資格情報を入力すると、リダイレクトでアプリケーションに戻る。
4

ユーザープロファイルを表示する

ミドルウェアはAuth0からトークンを取得すると、IDトークンからユーザー情報とクレームを抽出し、AuthenticationStateを介して利用できるようにします。これはCascadingParameterとして追加できます。ユーザーの名前や追加クレーム（メールアドレスや画像など）を表示するカスタムのユーザープロファイルページは、AuthenticationStateのUserプロパティから関連情報を取得し、Blazorコード内からビューに渡すことで作成できます。
チェックポイント
ユーザープロファイルを表示するようセットアップし終えたら、アプリケーションを実行して次の点を確認します：
  • ログイン成功後にプロファイルを含んだエンドポイントに移動すると、ユーザーのプロファイルが表示される。
5

ログアウト

LogoutModelのOnGetメソッド内からHttpContext.SignOutAsyncをCookieAuthenticationDefaults.AuthenticationScheme認証スキームで呼び出すと、ユーザーをアプリケーションからログアウトさせられます。さらに、ユーザーをAuth0からもログアウトさせたい場合は（これによりシングルサインオンに依拠している他のアプリケーションからもログアウトさせる可能性があります）、HttpContext.SignOutAsyncをAuth0Constants.AuthenticationScheme認証スキームで呼び出します。また、LogoutAuthenticationPropertiesBuilderを使って構築できる適切なauthenticationPropertiesも同じ認証スキームで呼び出します。
チェックポイント
Logoutの構成が完了したら、アプリケーションを実行して次の点を確認します：
  • Logoutページに移動すると、ユーザーがログアウトする。
  • Auth0からもログアウトすると、Auth0にリダイレクトされ、即座にアプリケーションにリダイレクトで戻される。

​
次のステップ

成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。
  • Auth0 Dashboard - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
  • auth0-aspnetcore-authentication SDK - このチュートリアルで使用されているSDKをより詳しく説明します
  • Auth0 Marketplace - Auth0の機能性を拡張できる各種の統合を見つけられます
⌘I