Skip to main content

CloudFront+S3 による静的サイトを Cognito + Google で認証する

概要​

CloudFront+S3 による静的サイトを、Amazon Cognito + Google で認証をおこなうよう設定する方法です。

構成

参考​

以下のサイトを参考にさせていただきました。

構築手順​

CloudFront+S3 による静的サイトは構築済みとします。

Google​

Google を IdP として使用するために、Google Cloud コンソールにプロジェクトを作成し、以下の設定をおこないます。

  1. Google Cloud コンソール > API Services
  2. 「OAuth 同意画面」に以下を設定
    • User Type: External
    • アプリ情報
      • アプリ名: (任意の名前)
      • アプリケーションのホームページ: (CloudFront+S3 でホストしている URL) (例: https://xxxxxxxx.yh1224.com)
      • 承認済みのドメイン: (CloudFront+S3 でホストしている URL のドメイン) (例: yh1224.com)
    • Scopes: 以下を追加
      • .../auth/userinfo.email
      • .../auth/userinfo.profile
      • openid
  3. 「認証情報」から OAuth クライアント ID を追加
    • アプリケーションの種類: Webアプリケーション
    • 名前: (任意の名前)
    • 承認済みの JavaScript 生成元: (CloudFront+S3 でホストしている URL) (例: https://xxxxxxxx.yh1224.com)
    • 承認済みのリダイレクト URI: https://{Cognito ドメイン}.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse

Client ID と Client Secret は Cognito の設定で必要になるため、控えておきます。

Amazon Cognito​

以下の手順で Cognito ユーザープールを作成します。

ユーザー自体は IAM Identity Center で管理するため、Cognito ユーザープールは認証処理のために使用します。以下は最小限の設定例ですので、必要に応じて設定をおこなってください。

  1. AWS 管理コンソール > Amazon Cognito
  2. 「ユーザープールを作成」
  3. 以下の設定で作成
    • 認証プロバイダー
      • プロバイダーのタイプ: 「フェデレーテッドアイデンティティプロバイダー」をチェック
      • Cognito ユーザープールのサインインオプション: 「E メール」をチェック
      • フェデレーティッドサインインのオプション: 「Google」をチェック
    • セキュリティ要件
      • 多対要素認証: 「MFA なし」を選択
      • ユーザーアカウントの復旧: 「セルフサービスのアカウントの復旧を有効化」のチェックを外す
    • セキュリティ要件
      • セルフサービスのサインアップ: 「自己登録を有効化」のチェックを外す
      • 属性検証とユーザーアカウントの確認: 「メッセージを自動的に送信しない」を選択
    • メール配信を設定
      • E メールプロバイダー: 「Cognito で E メールを送信」を選択
    • Google
      • クライアント ID: (生成した認証情報の OAuth クライアント ID) (例: xxxxxxxx.apps.googleusercontent.com)
      • クライアントシークレット: (生成した認証情報の OAuth クライアントシークレット)
      • 許可されたスコープ: profile email openid
      • Google とユーザープール間で属性をマッピング
        • 以下の属性を追加
          • ユーザープール属性: email
          • Google 属性: email
    • アプリケーションを統合
      • ユーザープール名: (任意の名前)
      • ホストされた認証ページ: 「Cognito のホストされた UI を使用」をチェック
      • ドメイン
        • ドメインタイプ: 「Cognito ドメインを使用する」を選択
        • Cognito ドメイン: (グローバルユニークな任意の名前)
      • 最初のアプリケーションクライアント
        • アプリケーションクライアント名: (任意の名前)
        • 許可されているコールバック URL: (CloudFront+S3 でホストしている URL) (例: https://xxxxxxxx.yh1224.com)

CloudFront: Cognito で認証する Lambda@Edge を追加​

Lambda@Edge で Cognito による認証ライブラリ cognito-at-edge を使用し、CloudFront へのアクセスを認証します。

以下のコードで Lambda 関数を作成しておきます。

const {Authenticator} = require("cognito-at-edge");

const authenticator = new Authenticator({
    region: "ap-northeast-1",
    userPoolId: "(ユーザープール ID)",
    userPoolAppId: "(アプリケーションクライアントのクライアント ID)",
    userPoolDomain: "(ユーザープールの Cognito ドメイン)",
});

exports.handler = async (request) => authenticator.handle(request);

これを CloudFront の Lambda@Edge (Viewer Request) に設定します。

  1. AWS 管理コンソール > Amazon CloudFront
  2. ディストリビューションを選択 >「ビヘイビア」タブ > ビヘイビアを選択して「編集」
  3. 関数の関連付けの「ビューアーリクエスト」に以下を設定します。
    • ビューワーリクエスト
      • 関数タイプ: Lambda@Edge
      • 関数 ARN/名前: ARN (例: arn:aws:lambda:(リージョン):(アカウントID):function:(関数名):(バージョン))
Last updated on