LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Takenoko4594

Amazon Cognito + Oktaでシングルサインオン(SAML認証)に入門する

Posted at

はじめに

学習の一環でAmazon Cognitoを使用したシングルサインオンをお試しする機会があったので、備忘として手順などを残しておきます。

概要

シングルサインオンとは

シングルサインオン(以降、SSOと記載)は、Single Sign-Onという名の通り、ユーザーが1回限りの認証で複数のアプリケーションにログインできる仕組みです。

シングルサインオン無の場合

image.png

シングルサインオン有の場合

image.png

「この集中管理する奴」が俗に言うIdPにあたります。

例えば...

Qiitaの場合は、以下のようにGitHubなどのユーザーでシングルサインオンが可能です。
これはQiitaにユーザーを作らなくても、他のサービスで管理しているユーザーを使ってQiitaにログインすることができます。
image.png

また実際の企業ではMicrosoftのActiveDirectoryなどで社内のユーザーを管理しているところもあると思います。そういった場合にもActiveDirectoryを使って、社内向けのサービス等でシングルサインオンを実装しているところもあると思います。

どうやってシングルサインオンを実現するの？

フェデレーション方式を使う

フェデレーション方式は、1度の認証が通れば、その認証情報を他のサービスに連携し、他のサービスを使えるようにする仕組みです。フェデレーション方式の中でも以下のように複数のやり方があります。

  • SAML
  • OpenID Connect (OIDC)
  • 等

今回はSAMLを使ってシングルサインオンを実現します。

SAMLって何よ？

SAMLは、Security Assertion Markup Languageの略称です。
異なるサービス（ドメイン）間で認証を行うためのXMLベースの規格のことです

登場アクター

SMAL認証で登場する各アクターの説明を記載します。

アクター 役割
ユーザー Webサイトにログインして、Webサイトからサービスを利用する人です
SP(Service Provider) SPは、IdPと連携して認証情報を受け取り、ユーザーにサービスを提供するサーバです
IdP(Identity Provider) IdPは、ユーザーを認証し、認証情報を発行するサーバーです

図説

image.png

今回は、SPにAmazon Cognito、IdPにOktaを使用します。

Amazon Cognitoとは

Amazon Cognitoは、アプリケーションに対して「認証」と「認可」の仕組みを提供するサービスです。大きく「ユーザープール」と「IDプール」に分かれますが、今回は「ユーザープール」を使用します。

ユーザープールとは

ユーザープールは、アプリケーションに認証とユーザー管理の機能を提供します。
アプリケーションと連携することで、サインアップやログインの機能を実現できます。
ユーザー情報は、ユーザープールに保存されます。

Oktaとは

image.png

OktaOktaは、クラウド型のIDaaSサービスです。
IdPに使用すると言った時点でお察しかもしれませんが、複数のサービスのIDやパスワードをクラウド上で一元管理してくれるサービスです。

IDaaS(Identity as a Service)
クラウドを利用してIDやパスワードなどの認証基盤を管理するサービスです

実際に試してみる

実現したいこと

画面の流れ

ざっくりと以下のような流れです。

  • ログイン(Cognito)
    • Cognitoがログイン画面を提供してくれる機能(マネージドログイン)があるので、そのまま使用します。
  • ログイン(Okta)
    • 実際のログインはOktaが用意した画面にリダイレクトされ、ユーザー情報を入力します。
  • メイン画面
    • ローカル環境(localhost)で適当な画面を立ち上げて、ログイン後はメイン画面として表示します。

image.png

バックエンド側の構成

CognitoとOktaで以下のような構成を作り、シングルサインオンを実現します。
厳密に言うと、アプリケーションクライアントにフェデレーションIdPを紐づけるのですが、ごちゃ付くので線を書いてません。

事前準備

準備① Oktaの無料トライアルの申請

詳細はこちら

Oktaでは、30日間の 無料トライアル が可能です。今回は無料トライアルでお試しします。

１. Oktaの無料トライアルページを開き、各項目を入力します。その後、「無料トライアルを始める」ボタンを押します。

image.png

２. 「終了」ボタンを押します。

image.png

３. 下記の画面が表示されます。メールを確認します。

image.png

  1. メールに埋め込まれた「Activate Okta Account」ボタンを押します。

image.png

５. 画面に戻るとパスワードのセットアップを促されるので、「セットアップ」ボタンを押します。

image.png

６. パスワード要件に従い任意のパスワードを入力し、「次へ」ボタンを押します。

image.png

７. Okta Verifyのセットアップを促されるので「セットアップ」ボタンを押します。
image.png

８. スマホアプリをインストールし、セットアップします。

image.png

image.png

９. 初期設定が始まります。「Other」ボタンを押すと、入力欄が表示されるのでAmazon Cognitoと入力し、「Submit」ボタンを押します。
image.png

image.png

１０. 画面右下の「Next」ボタンを押します。
image.png

１１. 次も同じく「Other」ボタンを押し、Amazon Cognitoと入力し、「Submit」ボタンを押します。
image.png

image.png

１２. 「Single Sign-On (SSO)」を選択し、画面右下の「Next」ボタンを押します。
image.png

image.png

１３. 「Done」ボタンを押して、設定完了です。
image.png

image.png

準備② ユーザープールを作成する

詳細はこちら

１. AWSマネジメントコンソールにアクセスします。

２. 「Amazon Cognito」>「ユーザープール」の画面を開きます。
image.png

３. 画面右上の「ユーザープールを作成」ボタンを押します。
image.png

アプリケーションのリソースを設定する

４. アプリケーションタイプに「シングルページアプリケーション(SPA)」を選択します。
５. アプリケーションに名前を付けるでは、任意の名前を入力します。
image.png

６. サインイン識別子のオプションでは、メールアドレスにチェックを入れます。
image.png

７. リターンURLを追加欄にログイン成功後、どの画面に遷移させるかを指定します。今回は、「http://localhost:5174」としました。

image.png

８. 最後に「ユーザーディレクトリを作成する」ボタンを押します。
image.png

これでユーザープールが出来上がりました。
image.png

既にログイン画面も用意されているので、ブラウザで開いてみましょう。
「ログインページを表示」ボタンを押します。
image.png

以下のようなログイン画面が表示されます。
image.png

準備③ ログイン後に表示する画面を作成する

詳細はこちら

１. viteを使用して空のプロジェクトを作成します。

> npm create vite@latest

Need to install the following packages:
create-vite@6.0.1
Ok to proceed? (y) y
√ Project name: ... test_cognito_app
√ Select a framework: » React
√ Select a variant: » JavaScript

Scaffolding project in D:\\test_cognito_app...

Done. Now run:

vite
Viteは、モダンなWebアプリケーション開発のための高速なビルドツールです。
従来のビルドツールよりも高速な開発サーバーの起動と、効率的な本番ビルドを提供し、React、Vue、Svelteなど様々なフレームワークをサポートしています。

２.依存パッケージをインストールします。

cd test_cognito_app
npm install

３. ローカル環境で画面を立ち上げてみます。

npm run dev

ブラウザでhttp://localhost:5173/ にアクセスし、以下の画面が表示されればOKです。
今回はこの画面をログイン後に表示されるメイン画面として扱います。
image.png

事前準備で以下のところまで作りました。この後、実際にSAML周りの設定を行います。
image.png

Step1. OktaにSAMLの設定をする

Okta側にSAML認証を行うために必要な設定をしていきます。
image.png

アプリケーションの作成

１. Oktaに管理者でログインします。

image.png

２. 画面左のメニューから「アプリケーション」 > 「アプリケーション」を開き、「アプリ統合を作成」を押します。
image.png

３. 「SAML 2.0」のラジオボタンを選択し、「次へ」ボタンを押します。
image.png

４. 「アプリ名」欄に任意の名称を入力し、「次へ」ボタンを押します。
image.png

５. SAMLの設定値を入力します。

image.png

シングルサインオンURLの入力
ユーザープールのドメインURL + 固定/saml2/idpresponseがシングルサインオンURLとなります。

https://okta-saml.auth.ap-northeast-1.amazoncognito.com/saml2/idpresponse

オーディエンスURL (SPエンティティID)の入力

固定でurn:amazon:cognito:sp:+ CognitoのユーザープールIDがオーディエンスURLとなります。

オーディエンスURL (SPエンティティID)
urn:amazon:cognito:sp:ap-northeast-1_xq0EZffDF

属性ステートメントの入力
image.png

６. 画面下までスクロールし、「次へ」ボタンを押します。

image.png

７. そのまま「終了」ボタンを押します。これでOktaのSAMLの設定は完了です。
image.png

アプリケーションにユーザーを割り当てる

  1. 作成したアプリケーションの画面から「割り当て」タブを開き、「割り当て」>「ユーザーに割り当て」を押します。
    image.png

  2. 登録した自分のユーザーがいると思うので、「割り当て」ボタン > 「保存して戻る」ボタン>「完了」ボタンを押します。
    image.png

Cognitoに設定するメタデータを取得する

１. 「サインオン」タブを開きます。
image.png

２. 「サインイン方法」にメタデータURLがあるので、コピーしておきます。(このURLを後ほどCognitoに設定します)
image.png

Cognitoでは、XMLファイルとしてもメタデータを設定することができます。
その場合、画面を下までスクロールすると、「SAML署名照明書」欄があります。
その中の「SHA-2」の行の「アクション」を押し、メニューから「IdPメタデータを表示」押して内容をファイル保存してください。
image.png

image.png

これでOkta側の設定は以上となります。次からはCognito側の設定に移ります。

Step2. Cognitoにアイデンティティプロバイダーを追加する

image.png

  1. ユーザープールを開き、画面左のメニューから「認証」>「ソーシャルプロバイダーと外部プロバイダー」を開きます。開いたら「アイデンティティプロバイダーを追加」ボタンを押します。
    image.png

２.アイデンティティプロバイダーでは、「SAML」のラジオボタンを選択します。
image.png

３. SAMLでは「プロバイダー名」、「識別子」に任意の値を入力します。
image.png

４．続けて「メタデータドキュメントのエンドポイントURLを入力」のラジオボタンを選択し、先ほどOktaの設定でコピーしたメタデータURLを入力します。
image.png

５. 最後に「SAML属性」欄にemail属性を入力し、画面下の「アイデンティティプロバイダーを追加」ボタンを押します。
image.png

６．追加できました。
image.png

Step3. アプリケーションクライアントにアイデンティティプロバイダーを紐づける

１. ユーザープールを開き、「アプリケーション」>「アプリケーションクライアント」>「(任意のアプリケーションクライアント)」を選択します。
image.png

２. タブの中から「ログイン」タブを押します。
image.png

３. 「編集」ボタンを押します。
image.png

４. IDプロバイダー欄のセレクトボックスを押すとプルダウンが表示されるので、先ほど作成したアイデンティティプロバイダーが選択します。
image.png

５. 下までスクロールし、「変更を保存」ボタンを押します。
image.png

Step4. 動作確認

期待値は以下の画面遷移となることです。
image.png

先ほどのログイン画面を再度開いてみます。「Continue with okta-saml-provider」ボタンが増えているので、押します。
image.png

Oktaのログイン画面が表示されるので、Oktaのユーザー情報を入力します。
image.png

それぞれ「コードを入力する」、「パスワード」の項目を「選択」ボタンから入力します。
image.png

すると...

期待通りローカル環境で実行した画面(http://localhost:5174) が表示されました。
image.png

まとめ

今回、SAML認証によるシングルサインオンを試してみました。
各要素の関係性が理解しづらかったため、図にすることで理解を深めることができました。

実際に試してみると、動作自体は意外と容易でしたが、これがSAMLではなくOpenID Connectに変わったり、IdPがOktaではなくMicrosoft ADに変わることを考えると、設定や覚えることが多くて大変だと感じました。

また、実運用を考えると、IdP側とSP側が別会社ということも往々にしてあると思うので、そのあたりのコミュニケーションも骨が折れそうだなと思いました。

今後の展望としては、今回のCognitoの設定をCloudFormationで自動化してみたいと思います。

0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?