はじめに
皆さん。こんにちは！ DreamHanksのエルムです。
今回はUIコンポーネントのカスタマイズについて説明していきます。
前回の記事はUserプール認証フローです。
UIテーマのカスタマイズ (Customize UI theme)
Webフレームワークでは、CSS Variablesを使用することができます。
React Nativeでは、AmplifyTheme.jsで定義されたプロパティをここでオーバーライドする必要があります。
|
1 2 3 4 5 6 |
import { AmplifyTheme } from 'aws-amplify-react-native'; const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' }); const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader }); <Authenticator theme={MyTheme} /> |
独自のUIを作る方法 (Create your own UI)
デフォルトの認証体験をさらにカスタマイズするために、独自の認証UIを作成することができます。
そのために、コンポーネントは以下のAuthenticatorプロパティを利用します:
|
1 2 3 |
- authState - authData - onStateChange |
次の例では、「Always On」Auth UIを作成し、アプリの現在の認証状態を継続的に表示しています:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import { Authenticator, SignIn, SignUp, ConfirmSignUp, Greetings } from 'aws-amplify-react'; const AlwaysOn = (props) => { return ( <div> <div>現在の認証状態を示すために常にここにいます。 {props.authState}</div> <button onClick={() => props.onStateChange('signUp')}>ショー・サインアップ</button> </div> ) } handleAuthStateChange(state) { if (state === 'signedIn') { /* ユーザーがサインインしたら何かをします */ } } render() { return ( <Authenticator hideDefault={true} onStateChange={this.handleAuthStateChange}> <SignIn/> <SignUp/> <ConfirmSignUp/> <Greetings/> <AlwaysOn/> </Authenticator> ) } |
独自のAuthenticatorを作成する方法 (Authentication flows)
Authenticatorは、いくつかのAuthコンポーネントのコンテナとして設計されています。各コンポーネントは、例えば、SignIn、SignUpなどの単一のジョブを実行します。デフォルトでは、認証の状態に応じて、これらの要素がすべて表示されます。
Authenticator 要素の一部またはすべてを置き換える場合は、hideDefault={true} を設定し、コンポーネントがデフォルトのビューをレンダリングしないようにする必要があります。そうすれば、authStateを聞いて何をすべきかを決める、独自の子コンポーネントのセットを渡すことができます。
また、使用したい子コンポーネントを渡すこともできます。例えば、以下のAuthenticatorの設定では、Sign Outボタンを持つGreetingコンポーネントのみがレンダリングされます：
|
1 2 3 |
<Authenticator hideDefault={true}> <Greetings /> </Authenticator> |
グリーティングメッセージのカスタマイズする方法(Customize greeting message)
Greetingsコンポーネントには、signedInとsignedOutの2つの状態があります。グリーティングメッセージをカスタマイズするには、文字列や関数を使ってinGreetingとoutGreetingのプロパティを設定します。
|
1 2 3 4 5 6 |
<Authenticator hideDefault={true}> <Greetings inGreeting={(username) => 'こんにちは ' + username} outGreeting="サインインしてください..." /> </Authenticator> |
エラーメッセージをカスタマイズする方法 (Customize Error Messages)
認証フロー中、Amplifyはサーバーから返されたエラーメッセージを処理します。Amplifyでは、messageMapコールバックを使って、これらのエラーメッセージを簡単にカスタマイズすることができます。
この関数は、元のメッセージを引数として受け取り、目的のメッセージを出力します。AmplifyMessageMap.jsファイルをチェックして、Amplifyがどのようにマップを機能させているかを確認してください。
|
1 2 3 4 5 6 7 8 9 |
const map = (message) => { if (/incorrect.*username.*password/i.test(message)) { return 'ユーザー名またはパスワードが正しくないです'; } return message; } <Authenticator errorMessage={map} /> |
テキストラベルのカスタマイズする方法 (Customize Text Labels)
ログインコンポーネントの日本語化:
Amplify UI FrameworkではI18nモジュールを使って言語対応しているようです。 ちなみにI18nは、国際化という意味で、internationalizationのiとnの間に18文字あることからI18nと表記されているようです。
カスタム辞書を作成し、それをアプリのボキャブラリーとして設定することができます。辞書は、さまざまな用語や言語を実装できるJavaScriptのオブジェクトです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
export const vocabularies = { ja: { 'Sign In': 'サインイン', 'Sign Up': 'サインアップ', 'Sign Out': 'サインアウト', 'Sign in to your account': 'アカウントにサインイン', 'Username *': 'ユーザー名 *', 'Password *': 'パスワード *', 'Username': 'ユーザー名を入力', 'Password': 'パスワードを入力', 'Email': 'メールを入力', 'Email Address *': 'メール *', 'Phone Number *': '電話番号 *', 'Enter your username': 'ユーザー名を入力', 'Enter your password': 'パスワードを入力', 'No account?': 'アカウントが未登録ですか？', 'Forgot your password?': 'パスワードをお忘れですか？', 'Reset password': 'パスワードをリセット', 'User does not exist': 'ユーザーが存在しません', 'User already exists': 'ユーザーは既に存在します', 'Incorrect username or password.': 'ユーザー名またはパスワードが違います', 'Invalid password format': 'パスワードのフォーマットが不正です', 'Create account': 'アカウントを作成', 'Forgot Password': 'パスワードを忘れた', 'Change Password': 'パスワードを変更', 'New Password': '新しいパスワード', 'Email': 'メール', 'Phone Number': '電話番号', 'Confirm a Code': 'コードを確認', 'Confirm Sign In': 'サインインを確認', 'Confirm Sign up': 'サインアップを確認', 'Back to Sign In': 'サインインに戻る', 'Send Code': 'コードを送信', 'Confirm': '確認', 'Resend Code': 'コードを再送', 'Submit': '送信', 'Skip': 'スキップ', 'Verify': '検証', 'Verify Contact': '連絡先を検証', 'Code': 'Code', 'Confirmation Code': '確認コード', 'Lost your code?': 'コードがありませんか？', 'Account recovery requires verified contact information': 'Account recovery requires verified contact information', 'Invalid phone number format': '不正な電話番号フォーマットです。 電話番号は次のフォーマットで入力してください: +12345678900', 'Create Account': 'アカウントを作成', 'Have an account?': 'アカウントをお持ちですか？', 'Sign in': 'サインイン', 'Create a new account': '新しいアカウントを作成', 'Reset your password': 'パスワードをリセット', 'Email Address': 'メール', 'An account with the given email already exists.': 'そのメールアドレスは既に存在します', 'Username cannot be empty': 'ユーザー名は必須です', 'Password attempts exceeded': 'パスワード試行回数が超過しました', }, }; |
日本語のリストをvocabulariesファイルにまとめて、app.jsで読み込んで、I18nのputVocabularies()に渡せば日本語化できます。
|
1 2 3 4 5 |
import { I18n } from 'aws-amplify'; import { vocabularies } from '../assets/amplify/vocabularies'; I18n.putVocabularies(vocabularies); I18n.setLanguage('ja'); |
初期のauthStateをカスタマイズする方法：
Authenticatorの初期の認証状態を変更することができます。デフォルトでは、初期状態はsignInで、signInコンポーネントが表示されます。signUpコンポーネントが最初に表示されるようにしたい場合は、そうすることができます：
|
1 |
<Authenticator authState='signUp'> |
withAuthenticator HOCによるカスタマイズ (Customize withAuthenticator HOC)
withAuthenticator HOCでは、デフォルトの認証画面が用意されています。提供されているデフォルトのコンポーネントではなく、独自のコンポーネントを使用したい場合は、カスタマイズされたコンポーネントのリストをwithAuthenticatorに渡すことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, { Component } from 'react'; import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator } from 'aws-amplify-react'; class App extends Component { render() { ... } } // これは私のカスタムSign inコンポーネントです。 class MySignIn extends SignIn { render() { ... } } export default withAuthenticator(App, false, [ <MySignIn/>, <ConfirmSignIn/>, <VerifyContact/>, <SignUp/>, <ConfirmSignUp/>, <ForgotPassword/>, <RequireNewPassword /> ]); |
UIコンポーネントにカスタムスタイルを追加したい場合は、上記の手順でwithAuthenticator HOCにカスタムテーマオブジェクトをパラメータとして渡すことができます：
|
1 |
export default withAuthenticator(App, false, [], null, MyTheme); |
終わりに
今回の記事は以上になります。
次回は[第11回] データストアの設定を学びましょう。
ご覧いただきありがとうございます。
コメント