MAUIアプリケーションにログインを追加する

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、.NET MAUIアプリケーションにMAUI用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

1

Auth0を構成する

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

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

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

2

Auth0 SDKをインストールする

MAUIアプリケーションで、Auth0認証を手軽に実装できるように、Auth0はMAUIのSDKを提供しています。

NuGetパッケージ マネージャー([Tools(ツール)] -> [Library Package Manager(ライブラリーパッケージマネージャー)] -> [Package Manager Console(パッケージマネージャーコンソール)])を使ってAuth0.OidcClient.MAUIパッケージをインストールしてください。

NuGetパッケージマネージャーコンソール(Install-Package)やdotnet CLI(dotnet add)を代わりに使用することもできます。

Install-Package Auth0.OidcClient.MAUI

Was this helpful?

/

dotnet add package Auth0.OidcClient.MAUI

Was this helpful?

/

3

プラットフォーム特定の構成

SDKをAndroidとWindowsで使うためにはプラットフォーム特定の構成が必要です。

Android

WebAuthenticatorCallbackActivityを展開する新しいアクティビティを作成します:

[Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
[IntentFilter(new[] { Intent.ActionView },
Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
DataScheme = CALLBACK_SCHEME)]
public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity
{
const string CALLBACK_SCHEME = "myapp";
}

Was this helpful?

/

上記のアクティビティは、ログイン後にAuth0がAndroidアプリケーションへリダイレクトで戻る時に、アプリケーションがmyapp://callback URLをハンドリングできることを保証します。

Windows

Auth0にリダイレクトで戻された後、アプリケーションが適切に再アクティブ化されるには、2つのことを行う必要があります:

  • 対応するプロトコルをPackage.appxmanifestに加えます。この場合、設定はmyappになっていますが、お好きなものに変更できます(関連するすべてのAuth0 URLも確実に更新してください)。

<Applications>
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
<Extensions>
<uap:Extension Category="windows.protocol">
<uap:Protocol Name="myapp"/>
</uap:Extension>
</Extensions>
</Application>
</Applications>

Was this helpful?

/

  • Windows固有のApp.xaml.csファイルでActivator.Default.CheckRedirectionActivation()を呼び出します。

public App()
{
if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
return;
this.InitializeComponent();
}

Was this helpful?

/

4

Auth0Clientをインスタンス化する

Auth0をアプリケーションに統合するには、Auth0ドメイン、クライアントID、要求されたスコープを含むAuth0ClientOptionsのインスタンスを渡してAuth0Clientクラスをインスタンス化します。また、Auth0が構成したURLを使って確実にアプリケーションにリダイレクトするよう、RedirectUriPostLogoutRedirectUriも構成する必要があります。

using Auth0.OidcClient;
var client = new Auth0Client(new Auth0ClientOptions {
Domain = "{yourDomain}",
ClientId = "{yourClientId}",
RedirectUri = "myapp://callback",
PostLogoutRedirectUri = "myapp://callback",
Scope = "openid profile email"
});

Was this helpful?

/

SDKは初期設定で、AndroidにはChrome Custom Tabs、iOS・macOSにはASWebAuthenticationSessionを利用し、Windowsではシステムの既定ブラウザーが開きます。

checkpoint.header

Auth0Clientが適切にインスタンス化されました。アプリケーションを実行して次の点を確認します:

  • Auth0ClientMainPageで正しくインスタンス化されている。

  • アプリケーションがAuth0に関連したエラーを投入していない。

5

アプリケーションにログインを追加する

Auth0アプリケーションとAuth0 SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのLoginAsync()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトするログインボタンを作成します。

var loginResult = await client.LoginAsync();

Was this helpful?

/

エラーがなければ、LoginAsync()が返すLoginResultUserIdentityTokenAccessTokenRefreshTokenにアクセスすることができます。

checkpoint.header

ユーザー名とパスワードを使ってログインやサインアップができるようになりました。

ログインボタンをクリックして次の点を確認します:

  • アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。

  • ログインまたはサインアップできる。

  • Auth0によってアプリケーションにリダイレクトされる。

6

アプリケーションにログアウトを追加する

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKのLogoutAsync()メソッドを使用してログアウトボタンを作成します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLにリダイレクトで戻されます。

await client.LogoutAsync();

Was this helpful?

/

checkpoint.header

アプリケーションを実行してログアウトボタンをクリックし、次の点を確認します:

  • アプリケーションによって、アプリケーションの設定で[Allowed Logout URLs(許可されているログアウトURL)]の1つに指定されているアドレスへリダイレクトされる。

  • アプリケーションにログインしていない。

7

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

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。

MAUI用のAuth0 SDKでは、LoginResult.Userプロパティを通じてユーザー情報を提供します。

Next Steps

Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.

This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:

Did it work?

Any suggestion or typo?

Edit on GitHub
Sign Up

Sign up for an or to your existing account to integrate directly with your own tenant.