顧客向け Microsoft Entra ID のチュートリアルをやってみた記録

# 顧客向け Microsoft Entra ID のチュートリアルをやってみた記録

# 顧客向け Microsoft Entra ID について

https://learn.microsoft.com/ja-jp/azure/active-directory/external-identities/customers/overview-customers-ciam

> お客様向けの Microsoft Entra ID は、Microsoft の新しい顧客 ID およびアクセス管理 (CIAM) のソリューションです。 一般向けアプリケーションをコンシューマーが利用できるようにする必要がある組織や企業の場合、Microsoft Entra ID を使用すると、セルフサービス登録、パーソナライズされたサインイン エクスペリエンス、顧客アカウント管理などの CIAM 機能を簡単に追加できます。 これらの CIAM 機能は Microsoft Entra ID に組み込まれているため、セキュリティ、コンプライアンス、スケーラビリティの強化などのプラットフォーム機能の利点も得られます。

Microsoft Entra ID 上でコンシューマー向けアプリケーションの顧客IDの管理、IDごとのアクセス制御などを行うことができるようです。

いくつかチュートリアルが用意されているのでその中の.NET MAUI向けの手順をやってみました。細かい手順はリンク先の公式チュートリアルをご確認ください。本記事では補足的内容を記載します。

# テナントを準備する

https://learn.microsoft.com/ja-jp/azure/active-directory/external-identities/customers/tutorial-mobile-app-maui-sign-in-prepare-tenant

## 手順補足

まずは[Microsoft Entra 管理センター](https://entra.microsoft.com/)にアクセスします。アクセス権限のあるアカウントでサインインすればアクセスできるますがそうでない場合は管理者の許可を取り権限をつけてもらう必要があります。それができない場合は現時点では[無料試用版](https://aka.ms/ciam-free-trial?wt.mc_id=ciamcustomertenantfreetrial_linkclick_content_cnl)を利用することもできます。

以降は公式手順通り問題ないはずです。クライアントIDの記録、リダイレクトURIの登録を忘れないようにして下さい。

# アプリを準備する

https://learn.microsoft.com/ja-jp/azure/active-directory/external-identities/customers/tutorial-mobile-app-maui-sign-in-prepare-app

スマホアプリに認証機能を実装していきます。ここも公式手順通りにやっていけば基本的には問題ありません。準備するのは以下の通り。

### NET 7.0 SDK

Visual Studio をインストールするときについてきます。

### Visual Studio 2022

https://learn.microsoft.com/ja-jp/dotnet/maui/get-started/installation?tabs=vswin

こちらの手順でインストールできます。すでにインストール済みの場合はもう一度インストーラーを起動し、.NET Multi-platform App UI development を追加する必要があります。

### .NET MAUI

せっかくなので今回アプリ実装に使用する .NET MAUI について触れておきます。

https://learn.microsoft.com/ja-jp/dotnet/maui/what-is-maui

> .NET Multi-Platform App UI (.NET MAUI) は、C# と XAML を使用して、ネイティブのモバイル アプリやデスクトップ アプリを作成するためのクロスプラットフォーム フレームワークです。

Xamarin を知っている方にはおなじみかもしれません。Xamarin.Forms の後継であり XAML で UI を記述し、C# でロジックを記述します。一つの共有コードベースで iOS、Android、macOS、Windows 向けのネイティブアプリをビルドすることができます。

## 手順補足

細かい手順は公式通りです。大まかな手順をこちらに記載しておきます。

- Visual Studio 2022 でプロジェクトの新規作成
- MSALヘルパークラス（サンプルコード）の入手
- MSAL.NET等のパッケージのインストール
- 画像リソースの入手

# サインインとサインアウト

https://learn.microsoft.com/ja-jp/azure/active-directory/external-identities/customers/tutorial-mobile-app-maui-sign-in-sign-out

こちらも基本的に公式手順通りで問題ないですが、一つだけ補足を記載しておきます。

## 手順補足

公式手順だけだとAndroidで動作させた場合に認証後、リダイレクトしない問題がありました。Androidマニフェストに次のコードを追記し、リビルドすることで解決します。`<clientId>`部分はアプリ登録時に発行されたクライアントIDに置き換えてください。

```xml:Platforms\Android\AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="SignInMaui.Droid">
	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:supportsRtl="true" android:label="MAUI SignInMaui">
		<!-- 追記 -->
		<activity android:name="microsoft.identity.client.BrowserTabActivity"
				android:exported="true">
			<intent-filter>
				<action android:name="android.intent.action.VIEW" />
				<category android:name="android.intent.category.DEFAULT" />
				<category android:name="android.intent.category.BROWSABLE" />
				<data android:scheme="msal<clientId>" android:host="auth" />
			</intent-filter>
		</activity>
	</application>
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="33" />
</manifest>
```

iOS、macOS、Windowsについては未検証です。ご了承ください。

# まとめ

顧客向け Microsoft Entra ID を利用してアプリに認証機能を追加する方法を紹介しました。ほとんど公式手順通りに実装していけば問題なく認証機能を追加することができました。補足的な内容になりましたがお役に立てていれば幸いです。

他にも、顧客向け Microsoft Entra ID を利用すれば Google、Facebook 認証の追加、ユーザごとのロールベースのアクセス制御を行うことができそうです。こちらは別途紹介したいと思います。