logo
【AWS】フォームで送信したユーザー情報を、Amazon Cognitoでユーザー認証する
AWS

【AWS】フォームで送信したユーザー情報を、Amazon Cognitoでユーザー認証する

作成日：2022年01月31日
更新日：2022年01月31日

前回は、Amazon Cognito から送られてきた確認コードを確認済みにしました。

aws-cognito-user_pools-verificationemail

【AWS】Amazon Cognitoの確認コード用のフォームを作成する

今回は、フォームで送信したユーザー情報を、Amazon Cognito でユーザー認証します。

まずは、Login.jsx を作成するために、ユーザー登録時に作成したコードをコピーします。

SignUpをLoginへ修正しましょう。

jsx
import React, { useState } from "react";
import * as AmazonCognitoIdentity from "amazon-cognito-identity-js";
const Login = () => {
const [auth, setAuth] = useState({ email: "", password: "" });
const poolData = {
UserPoolId: "*****",
ClientId: "*****",
};
const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
const attributeList = [];
const dataEmail = {
Name: "email",
Value: auth.email,
};
const attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(
dataEmail
);
attributeList.push(attributeEmail);
const handleChange = (e) => {
const newAuth = { ...auth };
newAuth[e.target.id] = e.target.value;
setAuth(newAuth);
};
const handleSubmit = (e) => {
e.preventDefault();
userPool.signUp(
auth.email,
auth.password,
attributeList,
null,
function (err, result) {
if (err) {
console.log(err.message || JSON.stringify(err));
return;
}
var cognitoUser = result.user;
console.log("Email is " + cognitoUser.getUsername());
}
);
};
return (
<div>
<form onSubmit={(e) => handleSubmit(e)}>
<label>
メールアドレス:　
<input
type="email"
id="email"
value={auth.email}
onChange={(e) => handleChange(e)}
/>
</label>
<br />
<label>
パスワード　　:　
<input
type="password"
id="password"
value={auth.password}
onChange={(e) => handleChange(e)}
/>
</label>
<div>
<button type="submit">送信</button>
</div>
</form>
<br />
</div>
);
};
export default Login;

UsernameとPasswordを設定する、authenticationDataを作成します。

jsx
const authenticationData = {
Username: auth.email,
Password: auth.password,
};

AmazonCognitoIdentityのAuthenticationDetailsでauthenticationDetailsを作成します。

jsx
const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(
authenticationData
);

dataEmailとattributeEmailを削除します。

UsernameとPoolを設定する、userDataを作成します。

jsx
const userData = {
Username: auth.email,
Pool: userPool,
};

AmazonCognitoIdentityのCognitoUserで、cognitoUserを作成します。

jsx
const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);

handleSubmit内で、cognitoUserのauthenticateUserを使用します。

jsx
const handleSubmit = (e) => {
e.preventDefault();
cognitoUser.authenticateUser(authenticationDetails, {},
});
};

認証が成功した場合と、失敗した場合を設定します。

失敗した場合は、エラーを返すようにします。

jsx
const handleSubmit = (e) => {
e.preventDefault();
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {},
onFailure: function (err) {
console.log(err.message || JSON.stringify(err));
},
});
};

result から、トークンを取得します。

jsx
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
const accessToken = result.getAccessToken().getJwtToken();

AWS の SDK を利用するために、ターミナルでnpm install --save aws-sdk　を実行し、インストールします。

regionを設定します。

jsx
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
const accessToken = result.getAccessToken().getJwtToken();
AWS.config.region = "ap-northeast-1";

Cognito のフェデレーティッド ID が必要になるので、Amazon Cognito サービスへアクセスします。

ダッシュボードの『フェデレーティッド ID』をクリックします。

image2

ID プール名を入力します。

image3

認証されていない ID にチェックを入れます。

image4

認証プロバイダーをクリックし、Cognito のユーザープール ID とアプリクライアント ID を入力します。

image5

『プールの作成』をクリックします。

image6

『許可』をクリックします。

image7

Amazon Cognito での作業開始画面へ遷移しました。

プラットフォームを JavaScript へ変更します。

IdentityPoolId が必要になるので、値をコピーします。

image8

コードエディタに戻って、CognitoIdentityCredentialsを設定します。

<IdentityPoolId>には、先程コピーした値を貼り付けます。

<リージョン>には、AWS.config.regionの値（ap-northeast-1）を貼り付けます。

<UserPoolId>には、上部に設定したpoolDataのUserPoolIdを貼り付けます。

jsx
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: <IdentityPoolId>,
Logins: {
"cognito-idp.<リージョン>.amazonaws.com/<UserPoolId>":
result.getIdToken().getJwtToken(),
},
});

credentialを更新します。

更新が成功した場合は、トークンを返し、失敗した場合は、エラーを返すようにします。

jsx
AWS.config.credentials.refresh((error) => {
if (error) {
console.log(error);
} else {
console.log(accessToken);
}
});

一通り完成したので、フォームで確認しましょう。

image9

『送信』ボタンをクリックし、Console で確認すると、

image10

トークンが返ってきました。

全文は、以下の通りです。

jsx
import React, { useState } from "react";
import * as AmazonCognitoIdentity from "amazon-cognito-identity-js";
import AWS from "aws-sdk/global";
const Login = () => {
const [auth, setAuth] = useState({ email: "", password: "" });
const authenticationData = {
Username: auth.email,
Password: auth.password,
};
const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(
authenticationData
);
const poolData = {
UserPoolId: "*****",
ClientId: "*****",
};
const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
const userData = {
Username: auth.email,
Pool: userPool,
};
const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
const handleChange = (e) => {
const newAuth = { ...auth };
newAuth[e.target.id] = e.target.value;
setAuth(newAuth);
};
const handleSubmit = (e) => {
e.preventDefault();
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
const accessToken = result.getAccessToken().getJwtToken();
AWS.config.region = "ap-northeast-1";
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "*****",
Logins: {
"cognito-idp.ap-northeast-1.amazonaws.com/*****": result
.getIdToken()
.getJwtToken(),
},
});
AWS.config.credentials.refresh((error) => {
if (error) {
console.log(error);
} else {
console.log(accessToken);
}
});
},
onFailure: function (err) {
console.log(err.message || JSON.stringify(err));
},
});
};
return (
<div>
<form onSubmit={(e) => handleSubmit(e)}>
<label>
メールアドレス:　
<input
type="email"
id="email"
value={auth.email}
onChange={(e) => handleChange(e)}
/>
</label>
<br />
<label>
パスワード　　:　
<input
type="password"
id="password"
value={auth.password}
onChange={(e) => handleChange(e)}
/>
</label>
<div>
<button type="submit">送信</button>
</div>
</form>
<br />
</div>
);
};
export default Login;

お知らせ

Udemy Online Cource

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

カテゴリ

最新順

© 2024あずきぱんウェブスタジオ