Static Web Apps 内で認証を管理する

2 分

あなたのショッピングリスト Web アプリには、ユーザーを一意に識別し、商品を保存する個人用のスペースを提供する方法が必要です。

認証は、情報システムにアクセスしようとしているユーザーの ID を確認する方法です。ここでは、認証と、それを Azure Static Web Apps 内で実装する方法について説明します。

ID プロバイダー

Azure Static Web Apps では、次のプロバイダーでの認証を管理することで、認証エクスペリエンスを効率化しています。

Microsoft Entra ID
GitHub
Twitter

すべての認証プロバイダーは、既定で有効になっています。カスタムルートルールを使用して認証プロバイダーを制限する方法については、後で説明します。

システムフォルダー

/.auth システムフォルダーは、すべての認証関連の API へのアクセスを提供します。これらのエンドポイントを使用すると、ログインとログアウト、ユーザー情報へのアクセスなど、アプリ内で認証ワークフロー全体を実装できます。

次の表に、アプリ内で使用できるプロバイダー固有のログインルートの一覧を示します。

ID プロバイダー	ログインルート
Microsoft Entra ID	`/.auth/login/aad`
GitHub	`/.auth/login/github`
Twitter	`/.auth/login/twitter`

たとえば、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)
    }
  };
};

次の手順

次に、認証ワークフロー全体をアプリに実装します。

自分の知識をチェックする

続行