Zenn
👻

Cognitoでログイン機能？

2024/01/27に公開
AWS
Cognito
AWS CDK
ログイン
tech

はじめに

このページは、Cognitoについて基本的な内容から、マネジメントコンソールで&CFでの構築までまとめたページとなっております。

Cognitoってなんだ？

AWSが提供しているサーバーレスな認証機能こと。
APIベースで実装されるモバイルやWebアプリ向けのユーザー認証で使われている模様。

Cognitoの特徴

  • サーバーレス
    AWS上に認証システムが構築されており、最小限の開発コスト・管理コストで実装することができる
    また、AWSの他のサービスとも連携可能となっていて、Application Load Balancerと連携して、ユーザー認証をALBに任せたり、Lambdaと連携してサインインフローの変更なども可能。
  • サードパーティとの連携
    Google・Amazon・Facebookなどの外部IDプロバイダーと連携を行うことが可能
  • 豊富なセキュリティ機能
    業界の中でも標準のセキュリティを持っており、以下内容でセキュリティ機能を実装することができる。
  • Cognito独自のログインUIが存在する
    ログイン画面を実装しなくてもCognitoが予め持っているログインUIを使用すれば、すぐにログイン機能を実装することができる。

・電話番号とEmailの検証
・多要素認証（MFA）の利用
・SMSテキストメッセージ
・TOTPソフトウェアトークン
・クライアントデバイスの追跡
・アドバンスドセキュリティの機能
・侵害された認証情報が使われていないかの確認
・アダプティブ認証（リスクに応じてMFAの利用を求めたり、ブロックしたりする）

料金体系

Cognitoは従量課金性となっていて、使ったら使った分だけお金がかかる仕組みとなっている。
具体的には、月間アクティブユーザー数（MAU）に応じて計算されるので、ユーザーが多ければ多いいほどお金がかかる仕組みとなっている。

主要な用語

  • ユーザープール（認証機能）
    ユーザー管理・サインイン・サインアウトなど、認証を制御するための機能のこと。

  • フェデレーティッドアインデンティティ（IDプールと言われ、認可機能）
    ユーザープールのアカウントに対して、IAMロールの付与を行う機能のこと。
    作成されるアカウントはユーザープールとは別物になっているとのこと。

  • Cognito Sync
    IDプールで管理されるユーザー単位にデバイス間のアプリデータを同期する機能。
    （AppSyncというサービスができたため、現在使用は推奨されていない）

利用されるシチュエーション

  • ユーザーのログイン機能
  • アプリのAPIへサクセスする際にのトークン機能

実際に簡単なログイン画面を作成してみよう

今回はCognitoが提供するUIを使用したログイン機能を実装してみようと思います。
（日本語対応はしていないみたいです）

AWSマネジメントコンソールで作成

ログイン後ローカルのVueの初期画面が表示されるように作成していきます。
※基本的にデフォルトの設定を作成していく。

  • まずはマネジメントコンソールからユーザープールの作成を選択

  • サインオプションでEメールを選択

  • セルフサービスアカウントの復旧を選択

  • 自己登録を有効化を選択

  • CognitoでEメール送信を選択

  • ユーザープール名とホストされたUIにチェック

  • ドメインにはアプリケーションで使用するドメインを使用

  • アプリケーション名を入力


  • 作成されたユーザープールからアプリケーション統合のタブを選択し、アプリクライアントと分析をクリック


  • ホストされたUIをクリック

  • Cognitoで用意しているUIが表示されるので、案内通りにユーザー登録をしていく

  • Vueの初期画面が表示されたら成功

  • ユーザープールから作成したユーザーがいることを確認する

CDKで作成

    // User Poolの作成（設定していない項目は基本デフォルトの値が設定される）
    const userPool = new cognito.UserPool(this, "userpool", {

      // サインイン・アウト時に何を使用するのか設定することができる
      signInAliases: {
        email: true,
      },

      // 設定しない場合はコンソールの場合と同じデフォルト設定
      // passwordPolicy: {
      //   minLength: 10,
      //   requireLowercase: false,
      //   requireUppercase: false,
      //   requireDigits: false,
      //   requireSymbols: false,
      //   tempPasswordValidity: cdk.Duration.days(7),
      // },

      // セルフサービスのサインアップ設定(ログイン画面からユーザーの登録ができる)
      accountRecovery: cognito.AccountRecovery.EMAIL_ONLY,

      // PassWordを忘れた際にユーザー自信で復旧できるようにする設定
      selfSignUpEnabled: true, 

       // ユーザープールの名前
      userPoolName: "login-test",

      // cdk destroyでの削除設定　デフォルトは削除されない
      removalPolicy: cdk.RemovalPolicy.DESTROY,

      // 誤ってユーザープールを削除してしまうことを防ぐことができる設定
      // deletionProtection:true

      // Cognitoでの操作を行うタイミングでCognitoからイベントを受信してLambdaを実行する設定
      // lambdaTriggers: {
      //   preSignUp: サインイン時に実行するラムダ名
      //   customMessage: パスワードの再設定等を行う際に実行されるラムダの名前,
      // },

      // ユーザーを登録する際に使用する属性
      standardAttributes: {
        email: {
          required: true, // サインアップ時にemailアドレスを必須にする
          mutable: true,  //true場合emailアドレスの変更が可能
        },
      },

    });

    // User Pool Clientの追加
    userPool.addClient("userPoolClient",{

      // Cogunitoと結びつけるアプリの名前（任意な名前でOK）
      userPoolClientName: 'userPoolClient',

      // クライアントシークレットの作成設定
      generateSecret: false,

      // サインイン・アウトの設定
      oAuth: {
        callbackUrls: ['http://localhost:8080'], // サインイン時のページのURL
        logoutUrls: ['https://classmethod.jp/'], // サインアウト時のページのURL
        flows: { authorizationCodeGrant: true },

        // OpenID Connect のスコープ
        scopes: [
          cognito.OAuthScope.EMAIL,
          cognito.OAuthScope.PROFILE,
          cognito.OAuthScope.OPENID,
        ],
      },
    })

    // Cognitoのが用意している認証画面を設定するのに必要なドメイン設定
      userPool.addDomain('userPoolDomain', {
      cognitoDomain: { domainPrefix: 'marumegane' },
    });

TODO

  • 独自のログイン画面を実装してCognitoを使用したログイン機能を作成
  • IDプールを使用したAWSリソースのアクセス制御の実施

参考サイト

Discussion