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

1
AWSTemplateFormatVersion: 2010-09-09
2
Description: Cognito user pool federated with Microsoft 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 Microsoft Entra ID application
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

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

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
}