あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

React+Amplify+Cognitoのサインイン画面を日本語化する

以下の記事で、React + Amplify + Cognito でユーザー認証を行うことができるようになりました。

www.aruse.net

一方で、Cognito でデフォルトで用意された画面は以下のように英語表記になっていて、このままでは使い物になりません。

f:id:fnyablog:20190325224926p:plain:w480

ですが、Cognito のサインイン(ログイン)画面は国際化対応がされているので、簡単に日本語化することができます。

実際に日本語化した画面が以下のようになります。

f:id:fnyablog:20190325225118p:plain:w480

ではどうするかですが、Amplify の I18n モジュールを読み込み、英語と日本語の辞書を定義するだけで日本語化できてしまいます。

実際のコードは以下のようになります。

一応、ログインまわりの日本語化が済んでいます。

import Amplify from 'aws-amplify';
import { I18n } from 'aws-amplify'
import { Authenticator } from 'aws-amplify-react';
import * as React from 'react';

Amplify.configure({
  Auth: {
    identityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxxx', // FederatedID連携後に追加する
    region: 'ap-northeast-1', // REQUIRED - Amazon Cognito Region
    userPoolId: 'ap-northeast-1_xxxxxxxxx', // OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx', // OPTIONAL - Amazon Cognito Web Client ID
  }
});

class App extends React.Component {
  public render() {
    return (
      <Authenticator />
    );
  }
}

export default App;

const dict = {
  'ja': {
    'Back to Sign In': 'サインイン画面に戻る',
    'Confirm': '確認',
    'Confirm Sign Up': 'サインアップの確認',
    'Confirmation Code': '確認コード',
    'Create Account': '新規登録',
    'Create a new account': 'アカウントの新規登録',
    'Create account': '新規登録',
    'Email': 'メールアドレス',
    'Enter your code': '確認コードを入力してください',
    'Enter your password': 'パスワードを入力してください',
    'Enter your username': 'ユーザー名を入力してください',
    'Forget your password? ': 'パスワードをお忘れの方 ',
    'Have an account? ': 'アカウント登録済みの方 ',
    'Hello': 'こんにちは ',
    'Incorrect username or password': 'ユーザー名またはパスワードが異なります',
    'Lost your code? ': 'コードを紛失した方 ',
    'No account? ': 'アカウント未登録の方 ',
    'Password': 'パスワード',
    'Phone Number': '電話番号',
    'Resend Code': '確認コードの再送',
    'Reset password': 'パスワードのリセット',
    'Reset your password': 'パスワードのリセット',
    'Send Code': 'コードの送信',
    'Sign In': 'サインイン',
    'Sign Out': 'サインアウト',
    'Sign in': 'サインイン',
    'Sign in to your account': 'サインイン',
    'User does not exist': 'ユーザーが存在しません',
    'Username': 'ユーザー名',
    'Username cannot be empty': 'ユーザー名は必須入力です',
    'Username/client id combination not found.': 'ユーザー名が見つかりません',
   }
};

I18n.putVocabularies(dict);
I18n.setLanguage('ja');

なお、以下のコードを参考にさせていただきました。

aws-amplify-react の withAuthenticator HOC を日本語化する · GitHub