【AWS】Congnitoを用いたログイン機能 #AWS

Cognitoとは

公式の定義では以下の通りである。要約するとログイン機能を実装できる機能である。

Amazon Cognito を使用すると、ユーザーのサインアップおよびサインイン機能を追加し、ウェブおよびモバイルアプリケーションへのアクセスを制御できます。

ログイン画面の作り方

オリジナル(旧)コンソール画面と新しい(他のAWSサービス画面に似ている)コンソール画面の二つやり方があるが、今回は新しいコンソール画面での作り方を紹介する。

Amazon Cognito コンソールに移動する
画面左の[ユーザープール]を選択する
右上の[ユーザープールの作成]を選択する
サインインエクスペリエンスの設定画面で、Cognito ユーザープールのサインインオプションでEメールと電話番号を選択する
ここでフェデレーテッドアイデンティティプロバイダーはSNS認証のことである

ユーザーは、Facebook、Google、Amazon、Apple などのソーシャルアイデンティティプロバイダーの認証情報を使用して、サインインできます。
セキュリティ要件の設定画面で、パスワードポリシー、多要素認証の有無、ユーザーアカウントの復旧の仕方を設定する
サインアップエクスペリエンスの設定で、セルフサインアップの踏む、属性検証とユーザーアカウントの確認、必須の属性を設定する
メッセージ配信の設定で、E メール、SMSの送信方法を設定する
アプリケーションの統合で、ユーザープール名、ホストされた認証ページの使用の有無、ドメイン、最初のアプリケーションクライアント、高度なアプリケーションクライアントの設定を設定する
確認および作成で設定を確認し、ユーザープールを作成を押す

※SMSメッセージのセットアップを要求された場合、以下のサイトに従って、電話番号の取得(有料)とSMS 使用量クォータの引き上げを行う
https://us-east-1.console.aws.amazon.com/pinpoint/home
https://docs.aws.amazon.com/sns/latest/dg/channels-sms-awssupport-spend-threshold.html

ログイン画面の開き方

Amazon Cognito コンソールに移動する
ユーザープール名を選択する
アプリケーションの統合のタブからアプリケーションクライアントのリストのアプリケーションクライアント名を開く
ホストされた UI を表示を押す

ホストされた UIの規則

https://<your user pool domain>/authorize?client_id=<your app client ID>&response_type=<code/token>&scope=<scopes to request>&redirect_uri=<your callback URL>

ログイン Cognito からコールバックページにリダイレクトされたURLは、末尾にcode というクエリ文字列が付与される。

http://localhost:8080/callback.php&code=XXXXX

code=********は、Authentication code と呼ばれる

ID プールの作成

Cognitoコンソール画面の左側「IDプール」を押す
ID プールの信頼を設定を入力する
IAM ロールを設定する
ID プロバイダーを接続の設定をする
プロパティを設定をする
ID プールを作成を押す

Node.jsからCUIでサインインしてみる

下記のTypescriptコードsample.tsを作って、コンパイルし、nodeでコンソール上で実行してみる

mkdir MycognitoJS
cd MycognitoJS
npm install -g typescript
npm install aws-amplify
tsc –-init
tsc .\sample.ts
node .\sample.js

sample.ts

import { Amplify, Auth } from 'aws-amplify';

// 使用するユーザープール、クライアントの ID を指定
Amplify.configure({
  Auth: {
        region: 'us-east-1',
    userPoolId: 'us-east-1_*******',
    userPoolWebClientId: '7********************',
  }
});

async function signIn() {
  const username = 'User-1';
  const password = 'Password-1';
  try {
    const user = await Auth.signIn(username, password);
    console.log(user);
    // console.log(user.attributes.email);
  } catch (error) {
    console.error(error);
  }
}

signIn();

成功すると、以下のような出力が標準出力に表れる。

CognitoUser {
  username: '*****',
  pool: CognitoUserPool {
    userPoolId: 'us-east-1_**********',
    clientId: '******************************',
    client: Client {
      endpoint: 'https://cognito-idp.us-east-1.amazonaws.com/',
      fetchOptions: {}
    },
    advancedSecurityDataCollectionFlag: true,
    storage: [Function: MemoryStorage] {
      setItem: [Function (anonymous)],
      getItem: [Function (anonymous)],
      removeItem: [Function (anonymous)],
      clear: [Function (anonymous)]
    },
    wrapRefreshSessionCallback: [Function (anonymous)]
  },
  Session: null,
  client: Client {
    endpoint: 'https://cognito-idp.us-east-1.amazonaws.com/',
    fetchOptions: {}
  },
  signInUserSession: CognitoUserSession {
    idToken: CognitoIdToken {
      jwtToken: '****************************************************************',
      payload: [Object]
    },
    refreshToken: CognitoRefreshToken {
      token: '********************************************************'
    },
    accessToken: CognitoAccessToken {
      jwtToken: '**********************************',
      payload: [Object]
    },
    clockDrift: 0
  },
  authenticationFlowType: 'USER_SRP_AUTH',
  storage: [Function: MemoryStorage] {
    setItem: [Function (anonymous)],
    getItem: [Function (anonymous)],
    removeItem: [Function (anonymous)],
    clear: [Function (anonymous)]
  },
  keyPrefix: 'CognitoIdentityServiceProvider.****************',
  userDataKey: 'CognitoIdentityServiceProvider.******************************',
  attributes: {
    sub: '47*************************',
    email_verified: true,
    email: '*****@email.com'
  },
  preferredMFA: 'NOMFA'
}

まとめ

今回は、AWS Congnitoを使ったログインページ作成方法を紹介した。

【AWS】Congnitoを用いたログイン機能

Cognitoとは

ログイン画面の作り方

ログイン画面の開き方

ID プールの作成

Node.jsからCUIでサインインしてみる

まとめ

参考サイト