MAUIアプリケーションにログインを追加する
Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、.NET MAUIアプリケーションにMAUI用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。
Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。
アプリケーションを構成する
対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。
このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。
完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。
Callback URLを構成する
Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。
ログアウトURLを構成する
ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。
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?
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?
Auth0をアプリケーションに統合するには、Auth0ドメイン、クライアントID、要求されたスコープを含むAuth0ClientOptions
のインスタンスを渡してAuth0Client
クラスをインスタンス化します。また、Auth0が構成したURLを使って確実にアプリケーションにリダイレクトするよう、RedirectUri
とPostLogoutRedirectUri
も構成する必要があります。
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
が適切にインスタンス化されました。アプリケーションを実行して次の点を確認します:
Auth0Client
がMainPage
で正しくインスタンス化されている。アプリケーションがAuth0に関連したエラーを投入していない。
Auth0アプリケーションとAuth0 SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのLoginAsync()
メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトするログインボタンを作成します。
var loginResult = await client.LoginAsync();
Was this helpful?
エラーがなければ、LoginAsync()
が返すLoginResult
でUser
、IdentityToken
、AccessToken
、RefreshToken
にアクセスすることができます。
checkpoint.header
ユーザー名とパスワードを使ってログインやサインアップができるようになりました。
ログインボタンをクリックして次の点を確認します:
アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。
ログインまたはサインアップできる。
Auth0によってアプリケーションにリダイレクトされる。
プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKのLogoutAsync()
メソッドを使用してログアウトボタンを作成します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLにリダイレクトで戻されます。
await client.LogoutAsync();
Was this helpful?
checkpoint.header
アプリケーションを実行してログアウトボタンをクリックし、次の点を確認します:
アプリケーションによって、アプリケーションの設定で[Allowed Logout URLs(許可されているログアウトURL)]の1つに指定されているアドレスへリダイレクトされる。
アプリケーションにログインしていない。
ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。
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:
- Auth0 Dashboard - Learn how to configure and manage your Auth0 tenant and applications
- auth0-oidc-client-net SDK - Explore the SDK used in this tutorial more fully
- Auth0 Marketplace - Discover integrations you can enable to extend Auth0’s functionality
Sign up for an or to your existing account to integrate directly with your own tenant.