24
11

Amazon Cognitoの外部IdP(SAML)として、AzureADを使う

Last updated at Posted at 2022-01-24

はじめに

Amazon Cognito は、ウェブおよびモバイルアプリの認証、承認、およびユーザー管理機能を提供します。ゼロから認証機能の実装するのは大変なので、実装の負担などを軽減できます。

今回の記事は、Cognito の IdP として、Azure AD を利用して、Hosted UI を利用する方法を紹介します。Azure AD は SAML を利用できるため、SAML を使った方法となります。SAML を利用できる他の IdP も、もちろん連携可能です。

前提条件と確認

Cognito UserPool の基本的な設定は完了している状態で進めていきます。

Azure AD との連携を進める際に、いくつかの値をメモっておくと便利です。後の手順で使っていきます。

User Pool ID

image-20220124182529491.png

Cognito Domain

image-20220124182636564.png

Azure AD の設定

まず、Azure AD の設定を進めていき、Cognito と SAML のやりとりを出来るようにします。Azure AD を開きます。

image-20210525011457865.png

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

image-20210525012234220.png

新しいアプリケーションを選択します。

image-20210525012253772.png

独自のアプリケーションの作成を選びます。

image-20210525012354046.png

適当な名前を入れて、作成を押します。

image-20220123211918326.png

シングルサインオンのメニューから、SAML を選択します。

image-20210525012807732.png

基本的な SAML 構成の個所で、編集を押します。

image-20220123212027799.png

次のパラメータを入れて保存を押します。「前提条件と確認」で確認した Cognito UserPool ID や、Domain の値を使っていきます。

識別子

# フォーマット
urn:amazon:cognito:sp:UserPoolID

# 入れる値
urn:amazon:cognito:sp:ap-northeast-1_exksQ29lq

応答URL

# フォーマット
https://yourDomainPrefix.auth.yourRegion.amazoncognito.com/saml2/idpresponse

# 入れる値
https://sugi01-test.auth.ap-northeast-1.amazoncognito.com/saml2/idpresponse

image-20210525013144079.png

設定が反映されます。

image-20210525013241892.png

フェデレーションメタデータ XML をダウンロードします。

image-20220123212312442.png

ユーザーの追加を押します。

image-20220123212405827.png

Azure AD 上のユーザーを選択します。

image-20220123212508278.png

追加完了です。

image-20220123212531776.png

Cognito UserPool に IdP の追加

Cognito UserPool の画面を開き、Add identity provider を選択します。

image-20220123211655357.png

Azure AD との連携に SAML を利用するため、SAML を選択します。

image-20220123212642736.png

分かりやすい名前を入れて、Choose file を選び、Azure AD からダウンロードしてきた「フェデレーションメタデータ XML」をアップロードします。

image-20220123212714549.png

SAML attribute に、次の文字列を選択して、Add identity provider を選びます。

http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress

image-20220123212942012.png

設定が追加されました。

image-20220123213006784.png

Cognito で Hosted UI の設定

追加した Azure AD の設定を Hosted UI で利用するために設定変更をしていきます。App Integration を選択します。

image-20220123213324315.png

事前に設定していた、App Client を選択します。

image-20220123213359346.png

Edit を押します。

image-20220124183847013.png

Allowed callback URLs には、元々持っているアプリケーション側で用意しているコールバックを受け取る URL を指定します。基本的には、アプリ側で独自実装する部分です。

image.png

Identity Provider の個所で、Azure AD を追加して、Save Changes を押します。

image-20220123213623548.png

追加されています。

image-20220123213650462.png

動作確認

ここまでで設定が完了しました。Cognito の Hosted UI と連携しているページから、Hosted UI を呼びだしてみましょう。

Hosted UI の画面を呼び出すには、次のように適切なパラメータを指定した Cognito Domain を指定します。

https://sugi01-test.auth.ap-northeast-1.amazoncognito.com/login?response_type=code&client_id=xxxxxxxxxxxxxxxx&redirect_uri=https://yourwebsite/cognito_callback/callback

image-20220124184218837.png

Azure AD を選択します。

image-20220124184248981.png

選択した User名をいれて、次へを押します。

image-20220124184338244.png

パスワードを入れます。

image-20220124184359725.png

用意している動作確認用 Web アプリケーションで、ログイン完了が確認できました。

image-20220124184434284.png

今回の動作確認用 Web アプリケーションでは、Cognito から発行された ID Token などは、Cookie に保存しています。

image-20220124184603901.png

ID Token などは、JSON Web Token となっており、人間が読みやすい形式にデコード可能です。

クリティカルな情報を扱っていない場合は、こういったサイトでデコードをしてみるといいでしょう。

実際のデコードした例です。秘密な情報は一部マスクをしています。ユーザーの認証元の Identity Provider に付けた任意の名前や、メールアドレスなどが確認できますね。JWT が改ざんされていないか確認したうえで、この情報を活用しながら認可を実装する方法もあると思います。

{
  "at_hash": "_k1sneTM4Pij2BWd60qyyQ",
  "sub": "618a7bf0-0653-47a9-82fe-cc0a7d0abe9e",
  "cognito:groups": [
    "ap-northeast-1_exksQ29lq_AzureAD",
    "GeneralGroup"
  ],
  "email_verified": false,
  "cognito:preferred_role": "arn:aws:iam::xxxxxxxxxxxx:role/Cognito_IdentityPoolTestAuth_Role",
  "iss": "https://cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_exksQ29lq",
  "cognito:username": "azuread_testuser01@yourgmail.onmicrosoft.com",
  "nonce": "4qqibhEcSYhORT7BcszM3LjalVGYP9YhHITM30YXyAzmryQRHyP47uPRUUddWBwC1kGssesBuTnH7Au4PHlR09slq1MYcoHOjJ8Z5s_PUP1L95OpPP7WbYNNrgbcpt4bJ-AeeElg1EZQ9g9LCJ-cG2fYcJDfHyj9cUmGyWUtpac",
  "origin_jti": "e2eaba2a-ddf7-4c81-8dd2-8f5116034fb4",
  "cognito:roles": [
    "arn:aws:iam::xxxxxxxxxxxx:role/Cognito_IdentityPoolTestAuth_Role"
  ],
  "aud": "5v9cdqqgua1imohsovur3bt7e4",
  "identities": [
    {
      "userId": "testuser01@yourgmail.onmicrosoft.com",
      "providerName": "AzureAD",
      "providerType": "SAML",
      "issuer": "https://sts.windows.net/54d4fb23-4655-46de-ab3a-4698ab819886/",
      "primary": "true",
      "dateCreated": "1642941543991"
    }
  ],
  "token_use": "id",
  "auth_time": 1642941545,
  "exp": 1642945145,
  "iat": 1642941545,
  "jti": "1637b57b-6c5f-4bd7-a6d6-878c8ee2d474",
  "email": "testuser01@test.com"
}

ログインで自動生成されるもの

Azure AD(SAML) を使って Cognito にログインしたときに、いくつか自動生成されるものがあります。

まず、グループです。Azure AD(SAML)で連携したことが自動的に判別されて、Group が作成されています。

image-20220124185842840.png

つぎに、ユーザーです。Azure AD 上の名前などを基に、Cognito 上でユーザーが作成されます。

image-20220124185715137.png

なお、このユーザーは自動的にグループに所属しています。

image-20220124185757439.png

Azure AD に直接ログイン

Azure AD を使ったログインは、Hosted UI を経由する方法を動作確認で行いました。この方法でもいいのですが、Hosted UI 上のボタンのリンクを取得してくることで、これをそのまま直接ログインに利用できます。

Hosted UI 上で、どの IdP を利用するか選択する画面に移動します。

image-20220124190104722.png

Chrome で Developer Tools を開いて、マウス選択が出来るボタンを押します。

image-20220124190316919.png

Azure AD のログインボタンをマウスで重ねると、HTML タグを確認できます。ここにある href で指定されている URL をコピーしてきます。

image-20220124190539550.png

半角スペースは「+」に変換しつつ、URL を整理します。一部マスクしていますが、こんな感じですね。

https://yourdomain.auth.ap-northeast-1.amazoncognito.com/oauth2/authorize?identity_provider=AzureAD&redirect_uri=https://secret/callback&response_type=CODE&client_id=secret&scope=aws.cognito.signin.user.admin+email+openid+phone+profile

この URL を HTML タグに埋め込むと、直接の Azure AD ログインへのリンクが生成できます。

参考URL

【AWS】Cognito ユーザプールをAzure ADをIdPとして構築する(後編)
https://qiita.com/kei1-dev/items/c8ae68e975dccb2902be

24
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
11