Azure Entra IDとAmplifyによるCognito SAMLサインイン

AWS Amplify、Cognitoユーザープール、Azure Entra IDを使ったSAML認証について解説します。

Takahiro Iwasa

2023-12-17

8 min read

CognitoユーザープールはSAMLベースのIDプロバイダーをサポートしており、エンタープライズのID管理システムとシームレスに統合できます。ここでは、AWS Amplify、Cognito、Azure Entra IDを組み合わせて認証を構成します。

ℹ️ Note

Azure ADはMicrosoft Entra IDに名称変更されました。詳細は公式ページを参照してください。

認証フローは、SAMLを介してCognitoとAzure Entra IDを統合することで実現されます。以下の図は公式ドキュメントからの引用で、このプロセスを可視化しています。

バックエンドの構築

Azure Entra IDの作成

Azureポータルを開き、Microsoft Entra IDセクションに移動します。

メニューからAdd > Enterprise applicationを選択します。

Create your own applicationを選び、my-cognito-appのような名前を入力します。オプションはIntegrate any other application you don't find in the gallery (Non-gallery)を選択します。

Set up single sign onセクションに移動し、方式としてSAMLを選択します。

SAML設定ページが表示されたら、メタデータURLを探してコピーします。これはCognitoの設定で使用します。

Cognitoユーザープールの作成

CloudFormationテンプレートを作成します。

属性マッピング（33〜35行目）: 属性マッピング用のURLは、Azure Entra IDから取得したメタデータURLから確認できます。
- https://learn.microsoft.com/en-us/entra/identity-platform/single-sign-on-saml-protocol
OAuthスコープ（51行目）: Amplifyを使ったフロントエンドアプリケーションからユーザー情報を照会するには、aws.cognito.signin.user.adminスコープが必要です。
- https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-define-resource-servers.html#cognito-user-pools-define-resource-servers-about-scopes

1
AWSTemplateFormatVersion: 2010-09-09
2
Description: Cognito user pool federated with Azure Entra ID
3

4
Parameters:
5
  Domain:
6
    Type: String
7
    Description: Cognito user pool domain
8
  CallbackURLs:
9
    Type: CommaDelimitedList
10
    Default: 'http://localhost:3000/'
11
  LogoutURLs:
12
    Type: CommaDelimitedList
13
    Default: 'http://localhost:3000/'
14
  MetadataURL:
15
    Type: String
16
    Description: SAML metadata url of your Azure Entra ID
17

18
Resources:
19
  CognitoUserPool:
20
    Type: AWS::Cognito::UserPool
21
    Properties:
22
      UserPoolName: cognito-federated-with-azure-entra-id
23

24
  CognitoUserPoolDomain:
25
    Type: AWS::Cognito::UserPoolDomain
26
    Properties:
27
      Domain: !Ref Domain
28
      UserPoolId: !Ref CognitoUserPool
29

30
  CognitoUserPoolIdentityProvider:
31
    Type: AWS::Cognito::UserPoolIdentityProvider
32
    Properties:
33
      AttributeMapping:
34
        email: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'
35
        name: 'http://schemas.microsoft.com/identity/claims/displayname'
36
      ProviderDetails:
37
        IDPSignout: true
38
        MetadataURL: !Ref MetadataURL
39
      ProviderName: azure-entra-id
40
      ProviderType: SAML
41
      UserPoolId: !Ref CognitoUserPool
42

43
  CognitoUserPoolClient:
44
    Type: AWS::Cognito::UserPoolClient
45
    Properties:
46
      AllowedOAuthFlows:
47
        - code
48
      AllowedOAuthScopes:
49
        - email
50
        - openid
51
        - aws.cognito.signin.user.admin
52
      AllowedOAuthFlowsUserPoolClient: true
53
      CallbackURLs: !Ref CallbackURLs
54
      LogoutURLs: !Ref LogoutURLs
55
      ClientName: public client
56
      SupportedIdentityProviders:
57
        - COGNITO
58
        - !Ref CognitoUserPoolIdentityProvider
59
      UserPoolId: !Ref CognitoUserPool

先ほどコピーしたメタデータURLで<SAML_METADATA_URL>を置き換え、スタックをデプロイします。

aws cloudformation deploy \
  --template-file cognito.yaml \
  --stack-name amplify-with-cognito-and-entra-id \
  --parameter-overrides Domain=$(uuidgen | tr "[:upper:]" "[:lower:]") MetadataURL='<SAML_METADATA_URL>'

Entra IDのSAML設定を更新する

Cognito管理コンソールでユーザープールIDとCognitoドメインプレフィックスを確認します。

Azure Entra IDでSAML設定を開き、編集を開始します。

SAML設定には以下の値を使用します。詳細は公式ドキュメントを参照してください。

Entity ID: urn:amazon:cognito:sp:<your user pool ID>
Reply URL: https://<yourDomainPrefix>.auth.<region>.amazoncognito.com/saml2/idpresponse

アプリケーションの要件に合わせてAttributes and Claimsを編集します。

Add a group claimをクリックし、Groups assigned to the applicationを選択します。

統合をテストするために、Azure Entra IDで新しいユーザーを作成します。

AzureポータルでNew userをクリックします。

必要な項目（ユーザー名や氏名など）を入力します。

ユーザーのメールアドレスを指定します。

Assignmentsタブは今回はスキップします。

処理を完了してユーザーを作成します。

アプリケーションへのユーザー割り当て

ユーザーが作成されたら、アプリケーションに割り当てます。

my-cognito-appエンタープライズアプリケーションを選択します。

Assign users and groupsをクリックします。

Add user/groupを選択し、作成したユーザーを選びます。

フロントエンドの構築

アプリケーションの作成

この例ではNext.jsを使用します。以下のコマンドとオプションでアプリを生成します。

npx create-next-app@latest
✔ What is your project named? … amplify-with-cognito-and-entra-id
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes
✔ What import alias would you like configured? … @/*

作業ディレクトリをプロジェクトルートに移動し、AWS Amplifyをインストールします。

cd amplify-with-cognito-and-entra-id
npm i aws-amplify

Dot Envファイルの作成

プロジェクトルートに以下の内容で.env.localファイルを作成します。プレースホルダーは実際の値に置き換えてください。

1
NEXT_PUBLIC_USER_POOL_ID=<USER_POOL_ID>
2
NEXT_PUBLIC_USER_POOL_CLIENT_ID=<USER_POOL_CLIENT_ID>
3
NEXT_PUBLIC_USER_POOL_ID_PROVIDER=azure-entra-id
4
NEXT_PUBLIC_OAUTH_DOMAIN=<DOMAIN_PREFIX>.auth.ap-northeast-1.amazoncognito.com

メインページの更新

認証を設定し、ユーザー属性を表示するために、src/app/page.tsxファイルを以下の内容に更新します。

1
'use client'
2

3
import { useEffect, useState } from 'react';
4
import { Amplify } from 'aws-amplify';
5
import { FetchUserAttributesOutput, fetchUserAttributes, getCurrentUser, signInWithRedirect, signOut } from 'aws-amplify/auth';
6

7
Amplify.configure({
8
  Auth: {
9
    Cognito: {
10
      userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID as string,
11
      userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID as string,
12
      loginWith: {
13
        oauth: {
14
          domain: process.env.NEXT_PUBLIC_OAUTH_DOMAIN as string,
15
          scopes: [
16
            'email',
17
            'openid',
18
            'aws.cognito.signin.user.admin',
19
          ],
20
          redirectSignIn: ['http://localhost:3000/'],
21
          redirectSignOut: ['http://localhost:3000/'],
22
          responseType: 'code',
23
        },
24
      },
25
    },
26
  },
27
});
28

29
export default function Home() {
30
  const [attributes, setAttributes] = useState<FetchUserAttributesOutput>();
31

32
  useEffect(() => {
33
    (async () => {
34
      try {
35
        await getCurrentUser();
36
        const attributes = await fetchUserAttributes();
37
        setAttributes(attributes);
38
      } catch (error) {
39
        await signInWithRedirect({ provider: { custom: process.env.NEXT_PUBLIC_USER_POOL_ID_PROVIDER as string } });
40
      }
41
    })();
42
  }, []);
43

44
  return (
45
    <div className='flex flex-col gap-2 max-w-sm mx-auto my-4'>
46
      <div className='flex gap-2'>
47
        <div>Sub:</div>
48
        <div>{attributes?.sub}</div>
49
      </div>
50

51
      <div className='flex gap-2'>
52
        <div>Name:</div>
53
        <div>{attributes?.name}</div>
54
      </div>
55

56
      <div className='flex gap-2'>
57
        <div>Email:</div>
58
        <div>{attributes?.email}</div>
59
      </div>
60

61
      <button
62
        type="button"
63
        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
64
        onClick={() => signOut()}
65
      >
66
        Sign out
67
      </button>
68
    </div>
69
  );
70
}

テスト

開発サーバーを起動します。

npm run dev

ブラウザでhttp://localhost:3000/を開きます。サインインページにリダイレクトされます。

サインイン後、アプリ内にユーザー属性が表示されます。

Cognito管理コンソールで、ユーザーが作成されていることを確認します。

ℹ️ Note

Azure Entra IDのエンタープライズアプリケーションにユーザーが割り当てられていない場合、以下のエラーが発生します。

クリーンアップ

作業が終わったらスタックを削除します。

aws cloudformation delete-stack \
  --stack-name amplify-with-cognito-and-entra-id

Azure上のエンタープライズアプリケーションと作成したユーザーは手動で削除してください。

まとめ

CognitoユーザープールをSAML経由でAzure Entra IDとフェデレーションし、Amplifyを使ってNext.jsアプリに組み込んだところ、ユーザーがEntra ID経由でサインインし、その属性がアプリに表示されるようになりました。この統合における摩擦の大部分は、SAMLハンドシェイクの両側を正確に一致させる点にあります。Entra ID側に登録するEntity IDとReply URLは、ユーザープールIDとドメインプレフィックスに至るまでCognitoが期待する値と一致していなければならず、CloudFormationテンプレート内の属性マッピングも、Entra IDが実際に送信するクレームURIと整合している必要があります。記事の最後に示したエラー画面（エンタープライズアプリケーションにユーザーが割り当てられていない）は、Entra IDのアプリケーション割り当てが、ユーザー作成とは別の、見落としやすいステップであることを思い出させてくれます。本来アクセスできるはずのユーザーでサインインに失敗した場合は、まずこの割り当てを確認する価値があります。