AmplifyとMonacaを使用したアプリ開発
このシリーズ記事では、AWS AmplifyとMonacaを使用して、会員登録と認証機能を中心としたモバイルアプリの開発を行います。
記事は全部で3回に分けており、2回目になるこの記事では前回設定したAmplifyをMonacaに組み込むところまでを紹介します。
1回目の記事では、AWS Amplifyの設定を行いました。
1回目の記事は下記リンクから確認ください。今回の記事で作成するアプリのローカル環境への導入方法もこちらの記事をご参照ください。
■ AWS Amplifyを使って認証アプリを作ろう(AWS Amplify設定編)
https://press.monaca.io/hirose/21695
アプリの仕様
今回はAWS Amplifyを使って下記の機能を実装について解説します。
- サインアップ機能：
- 新規ユーザーは、メールアドレスとパスワードを使用してアカウントを作成できます。
- ユーザー登録後、確認コードがメールで送信され、アカウントの確認が必要です。
- サインイン機能：
- 既存のユーザーは、メールアドレスとパスワードを使用してサインインできます。
- パスワードリセット機能：
- ユーザーはパスワードを忘れた場合、メールアドレスを使用してパスワードリセットをリクエストできます。
- パスワードリセット用の確認コードがメールで送信されます。
サインアップ機能の実装
このセクションでは、ユーザーが新規登録できるサインアップ機能について説明します。
新規登録の処理
const handleSignUp = async () => {
const password = document.getElementById('passwordSignUp').value;
const email = document.getElementById('emailSignUp').value;
try {
await signUp({
username: email,
password,
options: {
userAttributes: {
email,
}
}
});
alert(Confirmation code was sent to ${email});
} catch (error) {
console.log('error signing up:', error);
alert('Failed to sign up!');
}
};
この関数は、ユーザーが入力したメールアドレスとパスワードを使用してAWS Amplifyの signUp メソッドを呼び出します。
メールアドレスをユーザーの識別子にするために、signUp メソッドの username パラメータにメールアドレスを指定します。
メソッドが実行されると、新規ユーザーアカウントが作成され、Amazon Cognitoからメールアドレスへ確認コードが送信されます。このコードはユーザーがアカウントを確認するために必要で、サインアッププロセスの完了に必須です。
ユーザー登録の確認コード処理
新規登録後、ユーザーはメールに送信された確認コードを入力して登録を完了する必要があります。
確認コードの入力と処理
const handleSignUpConfirmation = async () => {
const email = document.getElementById('emailSignUpConfirmation').value;
const confirmationCode = document.getElementById('confirmationCodeSignUpConfirmation').value;
try {
await confirmSignUp({
username: email,
confirmationCode
});
alert('Successfully confirmed signed up!');
} catch (error) {
console.log('error confirming sign up', error);
alert('Failed to confirm sign up!');
}
};
このhandleSignUpConfirmation関数は、ユーザーが入力した確認コードを使用して、AWS AmplifyのconfirmSignUpメソッドを呼び出します。これにより、ユーザーのアカウント登録が完了します。
サインイン機能の実装
サインイン処理は以下のように行われます。
サインインの処理
const handleSignIn = async () => {
const username = document.getElementById('emailSignIn').value;
const password = document.getElementById('passwordSignIn').value;
try {
await signIn({ username, password });
await handleFetchUserAttributes();
alert('Successfully signed in!');
} catch (error) {
console.log('error signing in', error);
alert('Failed to sign in!: ' + error.message);
}
};
handleSignIn関数は、ユーザーが入力したメールアドレスとパスワードを使用してAWS AmplifyのsignInメソッドを呼び出します。
サインインに成功すると、ユーザーの属性情報を取得するためのhandleFetchUserAttributes関数が呼び出されます。
パスワードリセット機能の実装
ユーザーがパスワードを忘れた場合に対応するための機能です。
パスワードリセットの処理
async function handleResetPassword() {
const email = document.getElementById('emailResetPassword').value;
try {
const output = await resetPassword({ username: email });
handleResetPasswordNextSteps(output);
alert('Successfully reset password.');
} catch (error) {
console.log(error);
alert('Failed to reset password!: ' + error.message);
}
}
function handleResetPasswordNextSteps(output) {
const { nextStep } = output;
switch (nextStep.resetPasswordStep) {
case 'CONFIRM_RESET_PASSWORD_WITH_CODE':
const codeDeliveryDetails = nextStep.codeDeliveryDetails;
alert(Confirmation code was sent to ${codeDeliveryDetails.deliveryMedium});
// Collect the confirmation code from the user and pass to confirmResetPassword.
break;
case 'DONE':
alert('Successfully reset password.');
break;
}
}
この実装では、以下のステップに従ってパスワードリセットプロセスが行われます：
- リセット要求の処理:
handleResetPassword 関数は、ユーザーが入力したメールアドレスを使用して resetPassword メソッドを呼び出し、パスワードリセットプロセスを開始します。 - 確認コードの送信:
resetPassword 関数は、ユーザーのメールアドレスにパスワードリセットの確認コードを送信します。 - 次のステップの処理:
handleResetPasswordNextSteps 関数は、パスワードリセットプロセスの次のステップを処理します。これには、ユーザーに確認コードの送信を通知することや、リセットプロセスが完了したことをユーザーに知らせることが含まれます。
この方法により、ユーザーはメールアドレスを基にパスワードをリセットでき、セキュアな方法でアカウントへのアクセスを回復することが可能になります。
パスワードリセットの確認コード処理
ユーザーがパスワードをリセットする際には、確認コードが必要です。
パスワードリセットの確認
const handleConfirmResetPassword = async () => {
const email = document.getElementById('emailConfirmResetPassword').value;
const confirmationCode = document.getElementById('confirmationCodeConfirmResetPassword').value;
const newPassword = document.getElementById('newPasswordConfirmResetPassword').value;
try {
await confirmResetPassword({
username: email,
confirmationCode,
newPassword
});
alert('Successfully confirmed reset password.');
} catch (error) {
console.log(error);
alert('Failed to confirm reset password!: ' + error.message);
}
};
この関数では、ユーザーが入力した確認コードを使用してパスワードリセットを完了します。
サインイン状態の画面表示
ユーザーがサインインした状態を画面に反映させます。
サインイン状態の表示
Hub.listen('auth', async ({ payload }) => {
switch (payload.event) {
case 'signedIn':
case 'signedOut':
await handleAuthStateChanged();
break;
}
});
const handleAuthStateChanged = async () => {
const user = await getLoginUser();
let userAttributes = null;
if (user) {
userAttributes = await handleFetchUserAttributes();
}
await renderSignInStatus(userAttributes);
};
const renderSignInStatus = async (userAttributes) => {
const signInStatus = document.getElementById('signInStatus');
if (userAttributes) {
signInStatus.innerHTML = `
<p>Signed in</p>
<p>Email: ${userAttributes.email}</p>
<button class="button" id="signOutButton">Sign Out</button>
`;
document.getElementById('signOutButton').addEventListener('click', handleSignOut);
} else {
signInStatus.innerHTML = <p>Not logged in</p>;
}
};
このコードは、以下のステップで構成されています：
- イベントリスニング：
AWS Amplifyの Hub モジュールを使用して、認証関連のイベント（サインインやサインアウト）をリッスンします。 - 状態の確認：
ユーザーのサインイン状態が変わるたびに、handleAuthStateChanged 関数を呼び出し、現在のサインイン状態を確認します。 - 表示の更新：
renderSignInStatus 関数で、ユーザーがサインインしているかどうかに応じて、ウェブページ上の表示を更新します。サインインしている場合はユーザーのメールアドレスとサインアウトボタンを表示し、サインインしていない場合は「Not signed in」というメッセージを表示します。
この実装により、アプリケーションはユーザーのサインイン状態をリアルタイムに反映できます。
まとめ
この記事では、AWS AmplifyとMonacaを使用して、会員登録、サインイン、パスワードリセット機能を備えたモバイルアプリの実装方法を紹介しました。
AWS Amplifyの強力な認証機能とMonacaの使いやすいフロントエンド開発環境を組み合わせることで、セキュアかつ使いやすいモバイルアプリの開発が可能です。
このシリーズの次の記事では、開発したアプリのデプロイと動作確認に焦点を当てます。最終的には、ユーザーにとって魅力的で安全なアプリケーションを提供するための重要なステップを踏んでいきます。