Amazon Cognito + Okta で SSO ポータル機能のハンズオン(SAML連携)

はじめに

会社で外部 IDaaS サービスを使う機会があり、個人的に SSO 連携は実装の経験が無かったので備忘録も兼ねて記事としてまとめる。

今回つくる構成

今回作成するものの全体構成を図に示す。
ざっくりとした役割は以下のようなイメージとなる。

要素	役割説明
サービスプロバイダ	ログイン先のページ
アイデンティティプロバイダ(IdP)	Okta
Cognito	サービスプロバイダのログインページ機能(hosted UI)と Okta の認証情報をサービスプロバイダに送信する仲介役

実際に作る

Cognito の作成

Cognito 設定

画面に従って作成

新規ユーザ登録の際に必要なユーザの情報(属性)を任意で指定する。
「リターンURL」に自分の Web サイトや、ALB のアドレスを入力する。
今回はテストとして自分の Zenn のトップページをリターンURL にする。

ログイン画面テスト

作成ボタンを押下すると、以下のような画面がでる。
これは自作のアプリにログイン画面を入れたいときに使えるテンプレートのコードなので
使用したかったら活用する。

画面左上の「ログインページを表示」を押下する

押下すると下画像のようなログイン画面がでてくる

まだ登録されているアカウントが 1つもないので、テスト用のアカウントをテキトーに作成する。

登録したメールに認証コードが送信されるので、コードを入力しユーザを登録すると
さきほどテスト用に設定した私の記事が出てきた。しっかりログインできていることが確認できた。

新規ユーザ登録テスト

作成した Cognito のユーザープールの一覧をみると、先ほど新規登録したユーザーが登録されていることが確認できた。

Okta の作成

とりあえずアカウント作成

Okta は 30日間限定の無償版が提供されているため、テキトーなメールアドレスを使いサインアップする。

会社とかでよく見る社内アプリのアイコンや SaaS サービスのアイコンが並んでる画面ぽいところに到着。

管理者画面へ移動する

Okta 側の SAML認証設定

アプリケーションを作成する

アプリ統合を作成する

SAML2.0 で作成する

アプリの名前やアイコンを決め、画面に沿って次へ進む。

「シングルサインオンURL」を設定する。
このURL は Okta でログインした後、Okta がログイン完了の旨を通知する先のURLになる。
URL の調べ方は Cognito の画面から「ブランディング」→「ドメイン」にて「Cognitoドメイン」を確認できる。
ここで見つけたURLを使って「<URL>/saml2/idpresponse」のように入力する。
今回の場合は「 https://ap-southeast-2obs0sl7jf.auth.ap-southeast-2.amazoncognito.com/saml2/idpresponse 」となる。

オーディエンスURI(SPエンティティID)
先ほどのログイン完了通知を Cognito が受け取った際に、通知先がしっかり Cognito 宛てのものであることを確認するためのもの。
URI の調べ方は Cognito の画面からユーザープールの「概要」メニューにて確認できる。
ここで見つけたユーザープールID を使って「urn:amazon:cognito:sp:<ユーザープールID>」のように入力する。
今回の場合は「urn:amazon:cognito:sp:ap-southeast-2_OBs0Sl7jF」となる。

SAMLを構成する
先述したやりかたを参考に「シングルサインオンURL」と「オーディエンスURI」を入力する。

そのまま下へ画面をスクロールすると属性を選択できる。
Okta から Cognito にどんなユーザー属性を渡すかを設定する場所である。
そのためここは Cognito で作成したユーザープールで設定したユーザーの属性と一致させる。
ほかの属性は特に使用していないのでスキップし、次へ進む。

「これは当社で作成した社内アプリです」にチェックを入れて「終了」する。

Okta 側で管理しているユーザーをテストサイトのログインユーザーとして割り当てる

作成したアプリの「割り当て」タブを選択し、さらに「ユーザーに割り当て」を選択する。

すると Okta で登録してあるユーザーを選択することになるので、任意のユーザーを割り当てる。

IdP メタデータを取得する

Cognito に渡すための Okta の情報を取得する。
Cognito に「外部アイデンティティプロバイダーはここだよ」と教えるためのもの。
アプリケーションの画面にて「サインオン」タブに移動する。

「SAML署名証明書」という項目があるので、ステータスがアクティブになってるものの「アクション」を選択し「IdPメタデータを表示」する。

表示したメタデータ(XML形式)をXMLテキストとして保存しておく。

Cognito と Okta を連携

Cognito で外部 IdP を設定する

Cognito のコンソール画面左で「認証」→「ソーシャルプロバイダーと外部プロバイダー」→「アイデンティティプロバイダーを追加」に進む。

SAML を選択する

プロバイダー名を「Okta」にし、そのほかは特に変更は無いのでそのままにする。

メタデータドキュメントのソースに先ほどダウンロードしたXMLファイルをアップロードする。

属性の設定を行う。
今回は「email」と「lastName」を設定したのでそれに合わせて画像のように設定する。
設定したら「アイデンティティプロバイダーを追加」する。

ログインページに「Okta」でログインを追加する

「アプリケーションクライアント」→「自分の作成したユーザープール」→「ログインページ」タブで「編集」に進む。

編集画面を下へスクロールし「IDプロバイダー」にて「Okta」にチェックを入れて追加し
変更を保存する。

ログイン画面にて Okta を使ってログインテスト

まずはログイン画面へ

アプリケーションクライアントの画面から「ログインページを表示」に進む。
ちゃんと Okta でログインするボタンが表示されていることを確認できる。

Okta をサインアウトした状態でログインボタンを押下すると
ちゃんと Okta のサインイン画面に繊維した。

Okta のサインイン画面に従っていくと
しっかりテスト用で設定した自分の Zenn のページに繊維できた。
URL を見ると、認証トークンが付与されていることがわかる。
本番で使用する際は、アプリケーションクライアントの編集画面でトークンの付与機能を外しておくことを忘れずに。

Cognito のユーザープールを確認すると、Okta のユーザー分のユーザーが登録されていることがわかる。

まとめ

今回は Okta と Amazon Cognito を使った SAML 連携を実装してみた。
SIer としてシステム構築をやっていると HENNGE One などで社内ポータルなどを SSO で連携しているものをよく見かけるので、簡易的に作成してみることで認証の流れの学習になった。
また SSO 連携をする際によく見かけるものとして「Active Directory」や「ADFS」があるが、今後はそちらのハンズオンもやってみようと考えている。