当記事ではAmazon Cognitoを使って、Reactで作成したフロントエンドアプリに簡単にログイン機能を設定する方法を紹介します。
ログイン機能に時間をかけたくないな〜
簡単に自分のアプリに組み込いたいな〜
と、思ってる方におすすめです。
この記事では、以下のことを紹介してます。
- AmazonCognitoとは
- 既存WebアプリにCognitoのログイン機能を設定する方法
認証機能は、ほぼすべてのWebアプリに必須ですが、セキュリティ面で非常に重要なコンポーネントで間違いが許されないものとなります。しかし、利用者への価値提供には寄与しないコンポーネントであるため、あまり時間をかけたくありません。
Amazon 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;
実行すると以下のログイン画面が表示されます。
認証成功後、コンポーネントが表示されます。
まとめ
WebアプリにCognitoと連携したログイン画面を設定するまとめ
本記事では、Reactで作成したフロントエンドアプリにAmazonCognitoと連携したログイン画面を設定する方法を紹介しました。
API Gatewayもそうでしたが、AWS Cognitoを利用すると簡単に認証・認可機能をアプリケーションに設定することができます。今後は、ここでログインした内容を利用して、ログイン後のSPA方式の画面からAPI Gatewayの認証も行うよう方法をご紹介します。
皆様の参考になりましたら幸いです。
コメント