第2回GatsbyにCognitoを導入してログイン画面をカスタマイズする
前回の第1回では、@aws-amplify/cliを利用して、GatsbyプロジェクトにCognitoの認証基盤導入を行いました。
第2回では、導入したログイン画面のUI作成と日本語対応を行います。
Amplify UI Reactの導入
aws amplify UIなるものが既に用意されており、こちらのUIライブラリを利用することで簡単にリッチなUIを作成することができます。
@aws-amplify/ui-reactとaws-amplifyの導入
yarn add @aws-amplify/ui-react aws-amplify
ログインUIの作成
ログイン画面は、<Authenticator>を利用します。
この時、@aws-amplify/ui-react/styles.cssを読み込ませることで、しっかり用意されたスタイルを当てることができるので必要な場合はこちらをimportしてください。
import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
const IndexPage = () => {
return (
<>
<Authenticator>
{({ signOut, user}) => (
<main>
<p>Hello, {user?.username}</p>
<button onClick={signOut}>ログアウト</button>
</main>
)}
</Authenticator>
</>
)
}
export default IndexPage
あっという間にリッチなUIが完成しました！
前回作ったアカウント等で認証が完了されると<Authenticator>配下に記述していたエレメントが表示されます。
amplify UIの日本語対応
いい感じのUI画面はできましたが、表示が英語になっているので次に日本語対応を行います。
aws-amplifyのI18nAPIが用意されているので、こちらを活用していきます。
日本語化はプロジェクト全体に適応させたいため、gatsby-browser.jsに設定を記述していきます。
import { Amplify, I18n } from 'aws-amplify'
import { translations } from '@aws-amplify/ui-react'
import awsConfig from "./src/aws-exports"
import './src/styles/global.css'
Amplify.configure(awsConfig)
I18n.putVocabularies(translations);
I18n.setLanguage('ja');
日本語化完了！
翻訳漏れの対応
しかし、なぜかパスワードリセットの「Send code」が翻訳されていませんでした、、。
どうやら、Send Codeはあるけど、Send codeがないから見たいですね。
なんだかなぁ。。
とりあえず、I18n.putVocabulariesForLanguage APIによって、翻訳しておきました。
/* 省略 */
I18n.putVocabulariesForLanguage('ja', {
'Send code': 'コードを送信する'
})
サーバーエラーの日本語対応
ここまでで、フロント側の日本語対応は概ね完了しているはずです。
しかし、存在しないアカウント情報等でログインした場合のサーバーエラー等が翻訳されていません。
仕方ないかと思いながらも、最低限利用されるメッセージの一覧を確認できたら良いのですが。
最終的にこちらを見つけました。
UIは今回オリジナルで作成する予定のため、一覧だけ拝借させていただき、I18n.putVocabulariesForLanguageにて対応しました。
/* 省略 */
I18n.putVocabulariesForLanguage('ja', {
'Your passwords must match': 'パスワードが一致していません',
'User does not exist.': 'ユーザーが存在しません',
'Incorrect username or password.': 'ユーザー名またはパスワードが違います',
'User is not confirmed.': 'ユーザーは検証されていません',
'User already exists': 'ユーザーは既に存在します',
'Invalid verification code provided, please try again.': '指定された確認コードが無効です。もう一度お試しください',
'Invalid password format': 'パスワードのフォーマットが不正です',
'Account recovery requires verified contact information': 'アカウントの復元には確認済みの連絡先情報が必要です',
'Invalid phone number format': '不正な電話番号フォーマットです。 電話番号は次のフォーマットで入力してください: +12345678900',
'An account with the given email already exists.': 'そのメールアドレスは既に存在します',
'Username cannot be empty': 'ユーザー名は必須です',
'Password attempts exceeded': 'パスワード試行回数が超過しました',
'Attempt limit exceeded, please try after some time.': '試行制限を超過しました。しばらくしてからもう一度お試しください',
'Username/client id combination not found.': 'ユーザーが存在しません',
'CUSTOM_AUTH is not enabled for the client.': 'パスワードは必須です',
'Password did not conform with policy: Password not long enough': 'パスワードは8文字以上を入力してください (8文字以上の大文字小文字を含む英数字)',
'Password did not conform with policy: Password must have uppercase characters': 'パスワードには大文字を含めてください (8文字以上の大文字小文字を含む英数字)',
'Password did not conform with policy: Password must have lowercase characters': 'パスワードには小文字を含めてください (8文字以上の大文字小文字を含む英数字)',
'Password did not conform with policy: Password must have numeric characters': 'パスワードには数字を含めてください (8文字以上の大文字小文字を含む英数字)',
"1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6": 'パスワードは8文字以上、大文字小文字を含む英数字を指定してください',
"2 validation errors detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6; Value at 'password' failed to satisfy constraint: Member must satisfy regular expression pattern: ^[\S]+.*[\S]+$": 'パスワードは8文字以上、大文字小文字を含む英数字を指定してください',
'Email cannot be empty': 'メールアドレスが入力されていません',
'Phone number cannot be empty': '電話番号が入力されていません',
'Password cannot be empty': 'パスワードが入力されていません',
'Confirmation code cannot be empty': '認証コードが入力されていません',
'Error creating account': 'アカウント作成時のエラーが発生しました',
'Network Error': 'ネットワークエラーが発生しました',
'Please use your credentials to sign in': '認証情報を使ってログインしてください',
'Custom auth lambda trigger is not configured for the user pool.': 'パスワードが入力されていません',
'Send code': 'コードを送信する'
})
とりあえず、最低限必要そうなものを導入してみました。
しかし、どうやらサーバーエラーは他にも利用さているものがあるようで、検証を進めているとたまに翻訳されていないメッセージが表示されるみたいです。
出会った時にコツコツ潰していくしかないのだろうか...
この辺の気持ち悪さは残りつつも、今回は一旦これで日本語化完了ということにしました。（何かご存知の方いたら教えてください。🙏）
次回はフォーム周りのカスタマイズ、オリジナルデザインの適応を行なっていきたいと思います！
参考
Discussion