AWS Cognitoユーザー認証の購読、ログイン(amazon-認知-アイデンティティ-js)

https://github.com/seomimi/nextapp/tree/cognito
nextjs+typescriptで作成した簡単会員入力・ログインページには、amazon-cognito-identity-js会員認証登録とログイン機能が追加されています.

AWS Cognitoでのユーザープールの作成

管理ユーザプールクリック

ユーザープールの作成->デフォルトのチェック

다른 건 기본값 그대로 사용하였지만, 
- 필수속성 대신 사용자 이름 속성을 email로 변경
- 암호 정책 변경(선택)
- 앱 클라이언트 추가 (클라이언트 보안키 생성 체크해제)
- 발신 이메일 주소에서 이메일 확인 메시지를 코드에서 링크로 변경
  (이메일로 회원가입 후 이메일이 유효한지 인증을 받아야 함)
  (코드로 하면, 코드 인증을 위한 페이지가 필요)

amazon-cognito-identity-jsのインストール

> npm i amazon-cognito-identity-js

ユーザープールの読み込み

// src/userPool.tsx => git에 올리지 않음
//생성한 사용자 풀의 풀ID와 앱클라이언트ID를 넣어서 CongnitoUserPool을 생성
import { CognitoUserPool } from "amazon-cognito-identity-js";
const userpoolData={
	UserPoolId: "ap-northeast-2_xxxxxxxxx",
    ClientId: "3ata4e8o2q9e6em9xxxxxxxxx"
}
export default new CognitoUserPool(poolData);

会員に加入する

// components/SignupForm.tsx
import userPool from "../src/userPool"
userPool.signUp(email, password, [], [], (err, data) => {
          if (err) {
                    return console.error(err);
                }
                alert('가입완료! 이메일 인증 후 로그인 하세요.');
                gologinBtn.current?.click();
            });

cognitoユーザープールのユーザーに追加します.
ログインには電子メール認証が必要です.
電子メール確認リンクをクリックして電子メールを検証すると、電子メール確認部分がfalseからtrueに変更されます.
会員情報の登録とロード

//components/LoginForm.tsx
const congnitoUser = new CognitoUser({Username: email,Pool: userPool});
const authDetails = new AuthenticationDetails({ Username: email, Password });
congnitoUser.authenticateUser(authDetails, {
            onSuccess: function (result: any) {
              	console.log(result);
              //result.idToken.payload에 가입한 회원의 정보가 들어있음
              	setUserId(result.idToken.payload.email);
            },
            onFailure: function (err) {
                console.log(err);
                if (err.message == 'User is not confirmed.') {
                    alert('가입한 이메일을 인증해주세요.');
                } else if (err.message == 'Incorrect username or password.') {
                    alert('잘못 된 이메일 또는 비밀번호가 입니다.');
                } 
            },
        });

更新時にログインを保持

//pages/index.tsx
class newCognitoUser extends CognitoUser {public storage?: any;}
const currentUser: newCognitoUser | null = userPool.getCurrentUser();
//현재 로그인한 사용자 정보 가져오기
if (currentUser) {
  console.log(currentUser);
  const { user_id } = currentUser.storage;
  setUserId(user_id); //user_id에 email이 저장되어 있음
}

ログアウト

//pages/index.tsx
const currentUser = userPool.getCurrentUser();
currentUser?.signOut(() => {setUserId(null);});

の最後の部分
AWS Amplifyを使用して、導入前と導入後を特定します.