Azure Static Web Apps でのユーザー情報へのアクセス
Azure Static Web Apps では、直接アクセス エンドポイントおよび API 関数を介して、認証関連のユーザー情報が提供されます。
多くのユーザー インターフェイスは、ユーザー認証データに大きく依存しています。 直接アクセス エンドポイントは、カスタム関数を実装する必要なしにユーザー情報が公開されるユーティリティ API です。 便利さ以外に、直接アクセス エンドポイントは、サーバーレス アーキテクチャに付きもののコールド スタートの遅延による影響を受けません。
クライアント プリンシパル データ
クライアント プリンシパル データ オブジェクトでは、ユーザーを特定できる情報がアプリに公開されます。 クライアント プリンシパル オブジェクトには、次のプロパティが含まれます。
| プロパティ | 説明 |
|---|---|
identityProvider |
ID プロバイダーの名前。 |
userId |
Azure Static Web Apps 固有のユーザーの一意識別子。
|
userDetails |
ユーザーのユーザー名またはメール アドレス。 ユーザーのメール アドレスを返すプロバイダーもあれば、ユーザー ハンドルを送信するプロバイダーもあります。 |
userRoles |
ユーザーに割り当てられたロールの配列。 |
claims |
カスタム認証プロバイダーによって返されるクレームの配列。 直接アクセス エンドポイントでのみアクセスできます。 |
クライアント プリンシパル オブジェクトの例を次に示します。
{
"identityProvider": "github",
"userId": "abcd12345abcd012345abcdef0123450",
"userDetails": "username",
"userRoles": ["anonymous", "authenticated"],
"claims": [{
"typ": "name",
"val": "Azure Static Web Apps"
}]
}
直接アクセス エンドポイント
/.auth/me ルートに GET 要求を送信し、クライアント プリンシパル データへの直接アクセスを受け取ることができます。 ビューの状態が承認データに依存している場合は、この方法を使用すると最適なパフォーマンスが得られます。
ログインしているユーザーの場合、応答にはクライアント プリンシパルの JSON オブジェクトが含まれます。 認証されていないユーザーからの要求では、null が返されます。
fetch1 API を使用すると、次の構文を使用してクライアント プリンシパル データにアクセスできます。
async function getUserInfo() {
const response = await fetch('/.auth/me');
const payload = await response.json();
const { clientPrincipal } = payload;
return clientPrincipal;
}
(async () => {
console.log(await getUserInfo());
})();
API 関数
Azure Functions バックエンドを介して Static Web Apps で使用できる API 関数では、claims 配列を除き、クライアント アプリケーションと同じユーザー情報にアクセスできます。 API では、ユーザーを特定できる情報を受け取りますが、ユーザーが認証されているか、必要なロールと一致する場合は、独自のチェックを実行しません。 アクセス制御規則は、staticwebapp.config.json ファイルで定義されています。
クライアント プリンシパル データは、x-ms-client-principal 要求ヘッダーで API 関数に渡されます。 クライアント プリンシパル データは、シリアル化された JSON オブジェクトを含む Base64 でエンコードされた文字列として送信されます。
次の関数の例では、ユーザー情報を読み取って返す方法を示します。
module.exports = async function (context, req) {
const header = req.headers.get('x-ms-client-principal');
const encoded = Buffer.from(header, 'base64');
const decoded = encoded.toString('ascii');
context.res = {
body: {
clientPrincipal: JSON.parse(decoded),
},
};
};
上の関数の名前が user であるとすると、fetch1 ブラウザー API を使用し、次の構文を使用して API の応答にアクセスできます。
async function getUser() {
const response = await fetch('/api/user');
const payload = await response.json();
const { clientPrincipal } = payload;
return clientPrincipal;
}
console.log(await getUser());
ユーザーがログインすると、Static Web Apps エッジ ノードを介してユーザー情報の要求に x-ms-client-principal ヘッダーが追加されます。
Note
API 関数でアクセスできる x-ms-client-principal ヘッダーには、claims 配列は含まれていません。
1 fetch API と await 演算子は、Internet Explorer ではサポートされていません。