🌊

【コード付き】Amazon Cognito で認証機能を構築する最速チュートリアル

SEXYGO

2024/12/20に公開

Amplify

Cognito

tech

 はじめにこのガイドでは、Cognitoを使用してログイン機能を実装する方法を解説します。

・AWS Cognito + nextjs +amplify uiを使ってログイン機能を実装します

 前提知識
 cognitoとはAWSが提供するユーザー認証とアクセス管理サービスです。ユーザープールとIDプールを使用して、ユーザー認証を行い、アプリケーションへの安全なアクセスを実現します。

 ユーザープールとはアプリケーションユーザーのサインアップ、サインイン、多要素認証(MFA)を管理する機能です。これにより、ユーザー情報を安全に保存し、認証プロセスをシンプルにします。

 1. ユーザプールの作成
 1). Cognitoのダッシュボードにアクセスし、「ユーザープール」をクリックします。

 2). 右上側の「ユーザープールを作成」をクリックする。

 3).アプリケーションの設定
 1. シングルページアプリケーションを選択
 2.名前を設定します。
 3.メールアドレスを選択します。
 4.必須はここでは入力しません
 5.callback時のurlを設定しますここではローカル環境の「http://localhost:3000/」を設定します
最後に作成ボタンを押します。


 4). ユーザープールの完成この手順のみでユーザプールが作成できます。


 2. ログイン機能を実装する
 1). Nextjsアプリを作成します。$ yarn create next-app
yarn create v1.22.22
warning package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-next-app@15.1.2" with binaries:
      - create-next-app
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/goshi/id_project/hoge/my-app.

Using yarn.
以下をインストールします。
yarn add aws-amplify @aws-amplify/ui-react 

 2). 不要なpage.tsxを削除して、index.tsxを作成します。# 以下のコマンドを実行して
$ cd my-app  # *ここではmy-appで作成しています。
$ rm app/page.tsx
$ mkdir pages
$ touch pages/index.tsx


 3). index.tsxを作成するimport { Amplify } from 'aws-amplify';
import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";


//configに設定する
import { COGNITO_CONFIG } from "./config";
Amplify.configure(COGNITO_CONFIG);
function Login() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          {user ? (
            <>
              <h1>Hello {user.username}</h1>
              <button onClick={signOut}>Sign out</button>
            </>
          ) : (
            <h1>Loading...</h1>
          )}
        </main>
      )}
    </Authenticator>
  );
}
export default Login;

 4). config.tsxを作成するimport { ResourcesConfig } from "aws-amplify"
import { LegacyConfig } from "aws-amplify/adapter-core"

export const COGNITO_CONFIG: ResourcesConfig | LegacyConfig = {
    Auth: {
        Cognito: {
            userPoolId: process.env.NEXT_PUBLIC_COGNITO_POOL_ID as string,
            userPoolClientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID as string,
            clientSecret: process.env.NEXT_PUBLIC_COGNITO_CLIENTSECRET as string,
            loginWith: {
                oauth: {
                    domain: process.env.NEXT_PUBLIC_DOMAIN as string,
                    scopes: ["openid","aws.cognito.signin.user.admin"],
                    redirectSignIn: ["http://localhost:3000/"],
                    redirectSignOut: ["http://localhost:3000/"],
                    responseType: "code",
                },
            },
        },
    },
};

 5) .envにユーザプールの設定を書くNEXT_PUBLIC_COGNITO_POO_ID=ap-northeast-****
NEXT_PUBLIC_COGNITO_CLIENT_ID=xxxxxx
NEXT_PUBLIC_API_URL=http://localhost:3000
NEXT_PUBLIC_DOMAIN=ap-northeast-xxxxxx.auth.ap-northeast-1.amazoncognito.com

 1. NEXT_PUBLIC_COGNITO_POO_IDは左メニューの概要に移動して「ユーザープールID」を.上記のenvに記入する

 2. NEXT_PUBLIC_DOMAINは左メニューの「ドメイン」に移動して「ドメイン」の「https://」を除いたものを上記の.envに記入する。

 3.NEXT_PUBLIC_COGNITO_CLIENT_IDは左メニューの「アプリケーションクライアント」に移動して「クライアントID」を.envに記入する

 動作確認
 1. アプリケーションを起動します。してブラウザでhttp://localhost:3000/にアクセス$ npm run dev
Create Accountに移動します


 2. ユーザー名とパスワードを使用してサインアップを試みます。


 3. 正常にログインできた場合、コンソールにユーザー情報が表示されます。

 4. cognitoの管理画面からユーザをクリックするとサインアップされたユーザが表示されれば完了です。

 おわりにAWS Cognitoを使用することで、安全でスケーラブルなログイン機能を簡単に実装できます。さらに、ソーシャルログインや多要素認証（MFA）を追加することで、より高度な認証機能も構築可能です。
ぜひこのガイドを参考に、Cognitoを活用したアプリケーション開発に挑戦してみてください！