WebアプリにAmazon Cognitoのログイン機能を組み込む方法

この記事では、Amazon CognitoでWebアプリケーションにログイン機能を組み込む方法を紹介します。

こんな悩みをお持ちの方にオススメ！

ログイン機能の作成に時間をかけたくない
高品質なログイン機能が作れるか不安
外部サービスのログイン機能を利用したい

認証機能は、ほとんどのアプリケーションに必須です。

また、セキュリティ面で重要なコンポーネントのため、間違いは許されません。そのため、時間をかけてコンポーネントの作成とテストが必要です。

一方で、ログイン機能は利用者にとってあまり価値がないコンポーネントです。

サービス提供側としては、ログイン機能ではなく、他機能の開発に時間をかけたいと思っています。

そこでこの記事では、ログイン機能を自分で作成せず、外部サービスであるAmazon Cognitoのログイン機能を利用する方法を紹介します。

Amazon Cognitoを利用することで、ログイン機能の作成時間が大幅に減ります。

Webアプリへ組み込み方法を手順を追って紹介していますので、ぜひ最後までご覧ください。

今回はReactで作成したアプリケーションにログイン機能を組み込みます。

利用するAWSサービスの紹介
1. Amazon Cognito
2. AWS Amplify
ログイン機能の組み込み方法
まとめ

利用するAWSサービスの紹介

利用するAWSサービスを紹介します。

Amazon Cognito

AWSが提供している認証、認可サービスです。アプリケーションに認証・認可の機能を組み込むことができます。

詳細はAWSの公式ドキュメントを参照ください。

AWS Amplify

AWSが提供するフルスタックなウェブアプリケーションを開発するための開発プラットフォームです。

簡単にいうと、アプリケーションを開発するための統合環境です。

統合環境のため、AWS AmplifyではさまざまなAWSサービスのライブラリが提供されています。

詳細はAWSの公式ドキュメントを参照ください。

今回、AWS Amplifyが提供しているAmazon Cognitoのライブラリを利用します。

それ以外の機能は利用しないので、Amplifyについて詳しく知る必要はありません。

ログイン機能の組み込み方法

では、Amazon Cognitoを使ってログイン機能を組み込んでいきます。

Amazon Cognitoの設定

Amazon Cognitoでは、セキュリティの設定やサインインの方法、パスワード再発行時の復旧方法の指定が可能です。

作成したCognitoの設定は、WebAPIを呼び出す際の認証にも利用できます。

設定手順は、WebAPIの認証設定を解説した記事で紹介していますので、「API GatewayでWebAPIを認証機能を設定して公開する」を参照ください。

Amazon CognitoをWebAPIとログイン画面の両方で利用が可能です。

ソースコードの組み込み方法

以下ステップでログイン機能を組み込んでいきます。

ログイン機能を組み込むステップ

Step1
AmplfyのSDKをインストール
Step2
接続先のCognitoの情報を設定
Step3
既存Webアプリにログイン機能のソースコード追加

Ampify用SDKのインストール

Amplifyのライブラリを利用するので、SDKをインストールします。

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

npm install aws-amplify

ログイン画面のUIもAmplifyで提供しているものを利用します。以下コマンドでUIコンポーネントもインストールします。

npm install @aws-amplify/ui-react

Cognitoへの接続情報をプログラムに設定

Amazon Cognitoへの接続情報をプログラムに記述します。

「index.js」というファイルを作成し、接続先のCognitoの情報を記述します。

記述するCognitoの情報

記述する設定値は、以下となります。

リージョン
アプリケーションプールID
アプリケーションクライアントID

ソースコードは以下のようになります。

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'
});

私は東京リージョンを接続先としていますが、自身の内容に置き換えて設定してください。

「index.js」の全体はこのようになります。

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();

Webアプリケーションにログイン機能の追加

WebアプリケーションにAmazon Cognitoのログイン機能を組み込みます。

ソースはこちらです。

<Authenticator>
    {({ signOut, user }) => (
      <Authenticator.Provider>
      ・・・認証後に表示するコンポーネント・・・
      </Authenticator.Provider>
</Authenticator>

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

ログアウト機能の追加

ログイン機能を組み込むので、ログイン状態を解除するログアウト機能も組み込みます。

ソースコードはこちらです。

<Authenticator>
    {({ signOut, user }) => (
      <Authenticator.Provider>
        ・・・認証後に表示するコンポーネント・・・
        <ButtonA onClick={signOut}>Sign Out</ButtonA>
      </Authenticator.Provider>
</Authenticator>

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

ログアウトの処理に利用するsignOut関数はログイン時に利用するAuthenticatorコンポーネントから渡されます。自前で作成は不要です。

ソースコード全体

ソースコード全体はこちら。

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;

ここまでで解説した通り、簡単な変更でログイン機能を組み込んでいます。