株式会社 Purpom-Media-Lab でエンジニアをしております、おかやんです！
とある案件で「Amplify」を使い、契約管理画面でよく使う、招待機能を実装しました。
Amplify を使って、招待機能を実装しようとしている方の参考になれば幸いです。
Hello! Purpom-Media-Lab
Purpom Media Lab inc では、AWS Amplify や、Lambda などの Serverless Stack を中心とした高速 MVP 構築及びサービス価値の検証を行っています。
また、MVP を構築するだけでなく、AWS Amplify を中心としたオープンソースの機能改善、基盤構築を行っています。
前提
下記のことが実装済みの前提で作成。
- Next.js に Amplify を追加
- Amplify に、下記を追加
- auth
- api
- function(lambda)
やったこと
以下の流れに沿った招待フローを、amplify を使って実装しました。
また、lambda を呼び出す際に、appSync 経由で呼び出しています。
「メールを使った招待フロー」
- 指定したメールアドレスに招待の送信
- 届いたメールからアカウントの登録
- 認証完了
ここから、上記のフローの実装例をご紹介します。
1. メールアドレスに招待の送信
admin 権限でユーザーを招待するには、AWS SDK の「AdminCreateUserCommand」を使用する必要があります。
import * as AWS from "@aws-sdk/client-cognito-identity-provider";
const client = new AWS.CognitoIdentityProviderClient({
region: "ap-northeast-1",
});
const createInviteUserMutation = async (
email: string,
familyName: string,
givenName: string,
userPoolId: string
) => {
const input: AWS.AdminCreateUserCommandInput = {
UserPoolId: userPoolId,
Username: email,
UserAttributes: [
{
Name: "family_name",
Value: familyName,
},
{
Name: "given_name",
Value: givenName,
},
],
};
await client.send(new AWS.AdminCreateUserCommand(input));
};
このように、client に対して AdminCreateUserCommand を呼び出すことで、よくある招待メールを簡単に送ることができます。
export const handler = async (
event: HandlerArguments
): Promise<CognitoCustomMessageResponse> => {
if (!event.triggerSource) {
console.error("missing triggerSource parameter");
const e = new Error("internal server error");
throw e;
}
try {
switch (event.triggerSource) {
case "CustomMessage_AdminCreateUser": {
const url = `${process.env.DOMAIN}/auth/login`;
event.response.emailMessage = `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br>
管理者から招待されました<br>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br>
以下の情報でログインを実施し、パスワードの再設定をお願いします。<br>
<br>
メールアドレス: ${event.request.usernameParameter}<br>
仮パスワード: ${event.request.codeParameter}<br>
<br>
${url}<br>
<br>
認証コードの有効期限は7日間になります。<br>
期限を過ぎると記載のURLから登録できなくなるのでご注意ください。<br>
<br>
`;
event.response.emailSubject = "アカウント招待のお知らせ";
break;
}
default:
break;
}
return event;
} catch (e) {
console.error("Failed to custom message");
return event;
}
};
2~3. 届いたメールからアカウントの登録から認証
以下の様なメールが届きました。
あとはあらかじめ指定しておいた URL から認証画面に飛んでいただき、仮パスワードを入力すればアカウント登録が完了します。
最後に
今回は、Amplify と AWS SDK を使用してメールアドレスを使用したユーザの招待フローの実装例をご紹介させていただきました。
Amplify を使った初めての実装だったため、appsync 経由で typescript を使った lambda を呼び出す方法から苦労しましたが、なんとか実装できました。
今後も、引き続き Amplify を使った実装をチャレンジしていきます。
参考
Discussion