LoginSignup
4
0

More than 1 year has passed since last update.

@gossan(ごっさん)

OktaとAWS Cognito連携 ~SAML編~

Last updated at Posted at 2023-03-12

はじめに

下記YouTube動画のやってみた記事になります。
理解が難しかった部分をメモに残しながら記事にして行こうと考えています。

OktaはOkta Developerを使っています。

動画との差分

  • 【Okta】Attribute Statements
    • ログイン時に取得出来るユーザー属性を変更

イメージ

  1. ホストされたUIにアクセス（※ログイン画面ページ）
  2. OktaまたはCognitoのユーザーでログイン出来るページ
  3. 下図②のokta-samlをクリックするとOktaログインページに飛ぶ
  4. ログインするとログイン後のリダイレクト先として設定したページに飛ぶ（※）
  5. ログインユーザー情報が取れる

※ここではテスト用に（ログイン後にアクセストークンを取得してユーザー情報が取れることを確認したいたために）https://jwt.ioをログイン後のリダイレクト先として設定しています。

result.jpg

上記を作った上で、Okta✖️Cognitoを実際にフロント（React）に組み込む方法については別途記事にしたので、もし、そっちの方が興味あるよー、と言う方は良かったら見て下さい。

Cognito設定①

AWSマネコン > AWS Cognito > ユーザープール作成

サインインエクスペリエンスを設定

c_1.png

セキュリティ要件を設定

  • パスワードポリシーモード：Cognito のデフォルト
  • MFA の強制：MFAなし

c_2.png

ユーザーアカウントの復旧

c_3.png

サインアップエクスペリエンスを設定

  • 「自己登録を有効化」のチェックを外す

c_4.png
c_6.png
c_5.png

メッセージ配信を設定

  • 「Cognito で E メールを送信」を選択する

c_7.png

アプリケーションを統合

  • ユーザープール名:okta-sso-20230301（※任意のもの）
  • ホストされた認証ページ：CognitoのホストされたUIを使用にチェック

c_8.png

  • ドメインタイプ：Cognitoドメインを使用する
  • Cognitoドメイン：okta-sso-20230301（※任意のもの）

c_9.png

  • アプリケーションクライアント名：okta-sso-20230301-client（※任意のもの）
  • クライアントのシークレット：生成しないにチェック
  • 許可されているコールバックURL（※）：https://jwt.io

※ログイン後にリダイレクトされるページ。jwt.ioを設定するのはあくまでテスト用。ログインユーザーの情報が取得出来ているかなど確認するのに便利。

c_11.jpg

  • OAuth 2.0 許可タイプ（※）：暗黙的な付与
  • OpenID 接続スコープ：OpenIDのみ選択

スクリーンショット 2023-03-08 17.25.51.png

※「暗黙的な付与」について

"暗黙的な付与"をすると、ログイン後、リダイレクトされるhttps://jwt.io に対してアクセストークンをURLのパラメーターで渡せるようになる。今回はパラメーターで受け取ったトークンをパースしてユーザー情報が取れているかなど確認したいため"暗黙的な付与"を選択している。本来は、“認証コード付与”を選択する方が安全。

確認および作成

確認して問題なければ「ユーザープールを作成」する。

Oktaの設定

ユーザー属性設定

認証をかけるアプリでのログイン時に取得したいユーザー情報を設定する。

「Directory」>「People」よりユーザーを選択、Profileタブを開く。
「Edit」をクリックして下記を設定する（※未設定の場合のみ）。

  • First name(firstName)
  • Last name(lastName)
  • Display name(displayName)
  • Nickname(nichname)

okta_user.jpg

アプリケーション設定

Applications > Applications > 「Create App Integration」
o_1.png
SAML 2.0を選択する。
o_2.png

App name：okta-sso-saml（※任意で大丈夫）

o_3.png

Okta側からCognitoにアクセスするための設定をして行く。

Single sign-on URL

CognitoがOktaからの認証レスポンスを受け取るためのURL。Cognitoがユーザープール毎に用意してくれている。下記URLの書式で指定する。

自分のCognitoドメイン/saml2/idpresponse

// 例
https://okta-sso-20230301.auth.ap-northeast-1.amazoncognito.com/saml2/idpresponse

Cognitoドメインはマネコンから確認。
スクリーンショット 2023-03-04 11.14.45.png

Audience URI(SP Entity ID)

urn:amazon:cognito:sp:ユーザープール ID

// 例
urn:amazon:cognito:sp:ap-northeast-1_123ABC456

o_4.png

Attribute Statements

ログイン時に取得したいOktaユーザーの属性を指定をする。

Name Value
firstname user.firstName
lastname user.lastName
displayname user.displayName
nickname user.nickName
email user.email

emailのみ必須で、残りは取得したい属性を指定。Valueはuser.firstNameのようにフォーマットに従う必要があるが、Nameは任意に指定してOK。このNameでOktaユーザーのこの属性を取得したいという紐付けをしている。

この後、CognitoでこのName（firstnameとかlastnameとか）を使いCognito側でOktaユーザーの属性を取得出来るように設定する。

o_5.png
Attribute Statementsの設定が出来たら「Next」をクリック。
o_6.png
「I'm a software vendor.I'd like to integrate my app with Okta」にチェックを入れて「Finish」する。
o_7.png

アプリを使うユーザーをアサインする

Oktaユーザーのうち誰がこの認証のシステムを使うかを決める。

「Assignments」タブ>「Assign」>Assign to People

スクリーンショット 2023-03-04 8.47.45.png

ダイアログが現れるので、ユーザーを「Assign」する。

okta_profile.jpg

metadataを取得する

Cognitoに渡す自分の取り扱い説明書を取得してCognitoにアップロードします。

「Sign On」タブの下部の「SAML Signing Certificates」の項目までスクロール。
テーブル中でStatusがActiveのものの「Actions」>「View Idp Metadata」をクリック。

o_8.png

下記のようなXMLが表示されるので、ローカルPCに保存する。

o_9.jpg

Cognito設定②

CognitoでOktaを登録

Cognitoのマネコン画面に戻り「サインインエクスペリエンス」>「アイデンティティプロバイダーを追加」する。
c2_1.png

  • SAMLを選択

c2_2.png

  • プロバイダー名：okta-saml（任意）
  • 識別子：okta-saml（任意。プロバイダー名と別でも問題ない）

c2_3.png

  • メタデータドキュメントをアップロード：先ほど保存したXMLをアップロードする

c2_4.png

  • SAMLプロバイダーとユーザープールの間で属性をマッピング
    • email：email
    • given_name：firstname
    • family_name：lastname
    • nickname：nickname
    • name：displayname

c2_5.png

「アイデンティティプロバイダーを追加」をクリックする。

ログイン画面にOktaでのログインボタンを表示する

「アプリケーションの統合」タブを開く。
スクリーンショット 2023-03-04 11.14.45.png
下部までスクロール、アプリケーションクライアントをクリックする。
c2_6.png
ページ遷移後「ホストされたUI」までスクロールして「編集」する。
c2_7.png

  • IDプロバイダー：okta-samlにチェック（※）

※アイデンティティプロバイダーを追加時に設定したプロバイダー名
c2_8.jpg
「変更を保存」する。

ログインしてみる

「ホストされたUI」の項目の「ホストされたUIを表示」をクリックする。
スクリーンショット 2023-03-08 18.50.07.png
Cognitoが用意してくれたログイン画面が表示される。
左側にOktaでログインするボタンが現れている事を確認してクリックする。
スクリーンショット 2023-03-08 17.01.11.png
Oktaのログイン画面に飛ぶのでOktaのユーザー＆パスワードでログインする。
okta_login.jpg
ログインが成功すると「許可されているコールバックURL」で設定したURLにリダイレクトされる。
リダイレクトする際に、アクセストークンが付与される。
jwt.ioのサイトでは、渡って来たアクセストークン（jwt）をパースして表示してくれる。
jwt.jpg
このリダイレクト時にアクセストークンを渡す挙動は「OAuth2.0許可タイプ」の項目で”暗黙的な付与”を行なったことで行われる。一般的に、これはよろしくないらしいので、ここまで確認して、実際にアプリケーションにこのログインの仕組みを実装する段階になったら、設定の変更を考えるのが良さそう。

Reactで使ってみる

次のステップとして、実際にフロント（React）でどう使ったらいいのか？

冒頭でも紹介しましたが、別記事に書いてみたので、良かったら見てみて下さいー。

おわりに

初めてSSOに取り組んでいます。

動画を見ながら（挙げて下さってる方、本当にありがたい）実装は出来たものの、CognitoとOktaとの行ったり来たりしながら設定が必要だったので、初学者の私にとっては複雑で、何をさせられているのか分からないまま手を動かしてた状態になってしまってました。

記事にしてみることでだいぶ頭の中を整理出来た気がします。

4
0
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
Sign upLogin
4
0