WebアプリにAmazon Cognitoでログイン画面を簡単に作成する

当記事ではAmazon Cognitoを使って、Reactで作成したフロントエンドアプリに簡単にログイン機能を設定する方法を紹介します。

Z-A-K-I

ログイン機能に時間をかけたくないな〜

簡単に自分のアプリに組み込いたいな〜

と、思ってる方におすすめです。

この記事では、以下のことを紹介してます。

AmazonCognitoとは
既存WebアプリにCognitoのログイン機能を設定する方法

認証機能は、ほぼすべてのWebアプリに必須ですが、セキュリティ面で非常に重要なコンポーネントで間違いが許されないものとなります。しかし、利用者への価値提供には寄与しないコンポーネントであるため、あまり時間をかけたくありません。

Amazon Cognitoと連携することで、簡単にログイン画面が作成できますので、手順を追って記載していきます。

Amazon Cognitoとは
Reactとは
Amplifyとは
Cognitoのログイン機能の実装
1. Cognitoの設定
2. ソースコードの修正
まとめ
1. WebアプリにCognitoと連携したログイン画面を設定するまとめ

Amazon Cognitoとは

AWSが提供している認証、認可サービスです。簡単に認証・認可の機能を利用できます。

詳細は、以下の記事を参照ください。API Gatewayで公開するAPIを認証付きで公開する方法を紹介した記事となります。すでにご存知の方は読み飛ばしてください。

Reactとは

JavaScriptのライブラリです。SPA方式のフロントエンドアプリを構築するのに向いてます。

詳細は、以下の記事で説明してますので、よろしければご参照ください。Reactでフロントエンドアプリを開発するための環境構築と実際にアプリを作成する方法を紹介した記事となります。

Amplifyとは

AWSが提供するフルスタックなウェブアプリケーションを開発するための開発プラットフォームです。Reactのようなフロントエンドアプリから、バックエンドアプリまで作成することができます。

今回はAmplifyを使うわけではなく、Amplifyが提供している認証ライブラリのみを利用します。

Cognitoのログイン機能の実装

Cognitoの設定

API Gatewayに認証機能を設定したものと同じです。

そのまま利用できますので、設定内容、方法は以下の記事を参照ください。すでにご存知の方は読み飛ばしてください。

ソースコードの修正

以下の手順で既存のWebアプリにログイン画面を作成します

AmplfyのSDKをインストール
接続先のCognitoの情報を設定
ソースコードの修正

AmpifyのSDKをインストール

以下コマンドでreactプロジェクトにインストールします。

npm install aws-amplify

react用のUIコンポーネントもインストールします。

npm install @aws-amplify/ui-react

接続先のCognitoの情報を設定

index.jsに接続先のCognitoの情報を設定します。

リージョン、アプリケーションプールID、アプリケーションクライアントIDを設定します。

以下のコードとなります。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { Amplify } from 'aws-amplify';
 
Amplify.configure({
  aws_project_region: 'ap-northeast-1',
  aws_cognito_region: 'ap-northeast-1',
  aws_user_pools_id: 'ap-northeast-xxxxx',
  aws_user_pools_web_client_id: 'xxxxx'
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ソースコードの修正

認証後に表示したいコンポーネントをAmplifyのコンポーネントで囲むだけです。

以下のようなイメージとなります。

また、ログイン後に表示されるコンポーネントにログアウトボタンを追加してます。

import { CognitoUserPool, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';

// import { Auth } from 'aws-amplify';
import { Authenticator, Button as ButtonA } from '@aws-amplify/ui-react'
import "@aws-amplify/ui-react/styles.css";


function App() {

・・・　省略　・・・

  return (
    <Box m={2}>
    <Authenticator>
      {({ signOut, user }) => (
        <Authenticator.Provider>
            <div>
              <h3>検索条件</h3>
              <TextField id="standard-basic" label="名前" variant="standard"
              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
              value={name}
                  onChange={(e) => setName(e.target.value)} />
            </div>
            <div>
              <h3>検索結果</h3>
              {/* グリッド部分 */}
              <Box
                sx={{
                  height: 500,
                  width: '100%',
                  '& .actions': {
                    color: 'text.secondary',
                  },
                  '& .textPrimary': {
                    color: 'text.primary',
                  },
                }}
              >
              <DataGrid
                rows={rows}
                columns={columns}
                editMode="row"
                rowModesModel={rowModesModel}
                onRowModesModelChange={handleRowModesModelChange}
                onRowEditStop={handleRowEditStop}
                processRowUpdate={processRowUpdate}
                slots={{
                  toolbar: EditToolbar,
                }}
                slotProps={{
                  toolbar: { setRows, setRowModesModel },
                }}
              />
            </Box>
          </div>
        <ButtonA onClick={signOut}>Sign Out</ButtonA>
      </Authenticator.Provider>
    )}
  </Authenticator>
  </Box>
  );
}

export default App;

実行すると以下のログイン画面が表示されます。