Static Web Apps 内で認証を管理する
あなたのショッピング リスト Web アプリには、ユーザーを一意に識別し、商品を保存する個人用のスペースを提供する方法が必要です。
認証は、情報システムにアクセスしようとしているユーザーの ID を確認する方法です。 ここでは、認証と、それを Azure Static Web Apps 内で実装する方法について説明します。
ID プロバイダー
Azure Static Web Apps では、次のプロバイダーでの認証を管理することで、認証エクスペリエンスを効率化しています。
- Microsoft Entra ID
- GitHub
- x
すべての認証プロバイダーは、既定で有効になっています。 カスタム ルート ルールを使用して認証プロバイダーを制限する方法については、後で説明します。
システム フォルダー
/.auth システム フォルダーは、すべての認証関連の API へのアクセスを提供します。 これらのエンドポイントを使用すると、ログインとログアウト、ユーザー情報へのアクセスなど、アプリ内で認証ワークフロー全体を実装できます。
ログイン
次の表に、アプリ内で使用できるプロバイダー固有のログイン ルートの一覧を示します。
| ID プロバイダー | ログイン ルート |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
| x | /.auth/login/x |
たとえば、GitHub でログインするには、次のスニペットを使用して、Web アプリ内にログイン リンクを含めることができます。
<a href="/.auth/login/github">Login</a>
ログイン後にユーザーが特定のページに戻るようにするには、post_login_redirect_uri クエリ文字列パラメーター内に URL を指定することもできます。 次に例を示します。
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
Logout
/.auth/logout ルートにより、Web アプリからユーザーをログアウトします。 次の例に示すように、サイト ナビゲーションにユーザーがログアウトできるリンクを追加することが可能です。
<a href="/.auth/logout">Log out</a>
ログインと同様、post_logout_redirect_uri クエリ文字列パラメーターを使用して、ログアウト後のリダイレクト先 URL を指定できます。
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
ユーザー情報にアクセスする
認証関連のユーザー情報には、直接アクセス エンドポイントまたは API 関数内の特殊なヘッダーを使用してアクセスできます。
/.auth/me ルートに GET 要求を送信すると、現在ログインしているユーザーのデータを含む JSON オブジェクトが届きます。 認証されていないユーザーからの要求では、null が返されます。
次の例は、応答オブジェクトの例を示します。
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
API 関数
Azure Static Web Apps 内で使用できる API 関数はすべて、ご自身のクライアント アプリケーションと同じユーザー情報にアクセスできます。 ユーザー データは、x-ms-client-principal HTTP ヘッダー内の関数に渡されます。 データは JSON オブジェクトとしてシリアル化され、Base64 でエンコードされます。
次の関数の例では、ユーザー情報を読み取って返す方法を示します。
module.exports = async function (context, req) {
const header = req.headers["x-ms-client-principal"];
const encoded = Buffer.from(header, "base64");
const decoded = encoded.toString("ascii");
context.res = {
body: {
userInfo: JSON.parse(decoded)
}
};
};
次の手順
次に、認証ワークフロー全体をアプリに実装します。