개요

Nuxt+Amplify로 인증 주위를 짜는 것을 상정하고 있습니다만, 그대로 Vue를 사용해도 React에서도 Angular에서도 가능한가라고 생각합니다.



이쪽을 일본어화하겠습니다.

결론전에

2020년 4월 정도에 Amplify UI Components에 새 버전이 출시된 모양입니다.
구체적으로는
Latest @aws-amplify/ui-<framework> 및 Legacy 버전입니다 aws-amplify-<framework>그리고, 현시점에서 Amplify hogehoge 같은 형태로 구그하면 대개 Legacy판의 블로그나 Qiita 기사가 나옵니다.
처음에는 잘 모르기 때문에 레거시 버전으로 코딩하고 있었습니다만, 라테스트판의 혜택이 크기 때문에, 뒤에 오는 분은 반드시 라테스트판을 사용합시다.
덧붙여서 자신은 공식 문서가 모두 영어이므로 읽는 것이 귀찮았기 때문에, 편하게 하려고 하면 다시 하는 날개가 되었습니다.

일본어화에 대해서

Latest판에서는 일본어화에 대해서도 제대로 공식 문서에 쓰고 있었습니다.
htps : // / cs. 아 mpぃfy. 아 ws / 우이 / 쿠 s와 미자치 온 / t ran s ぁ 치온 s / q / f 라메를 rk / ㄱ
구판에서는 볼 수 없었기 때문에, 신판의 혜택의 하나일지도 모릅니다.

구현

실제로 위의 문서에서 자신이 어떻게 구현하고 있는지가 아래와 같습니다.
그건 그렇고, 나는 Nuxt 대신 Vue를 사용하는 것이 처음이며, 로쿠스팟 공식 문서를 읽지 않았기 때문에 모범 사례인지 확실하지 않습니다. 좋은 방법이 있으면 알려주세요.
Nuxt로 개발한 경우, 우선은 Amplify용의 초기 설정 파일을 plugin 바로 아래에 만든다고 생각하기 때문에, 그쪽에 일본어화의 처리를 씁니다.
아마 vue로 구축하고 있는 경우는 main.js 입니다.

amplify.js

import Vue from 'vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import '@aws-amplify/ui-vue'
import awsExports from '../src/aws-exports'
import { vocabularies } from './dictionary.js'

AmplifyModules.I18n.putVocabulariesForLanguage('ja', vocabularies)

Vue.prototype.$Amplify = AmplifyModules
Vue.use(AmplifyModules)
Amplify.configure(awsExports)

공식대로군요.
I18 클래스의 putVocabulariesForLanguage 메소드를 호출합니다.
첫 번째 인수로 번역할 언어를 문자열로, 두 번째 인수로 실제 번역할 대상의 위치와 번역어의 일본어를 object로 지정합니다. 나는 변환 파일을 별도의 plugin 폴더에 만들고 있습니다.
제2 인수를 구체적으로 설명하면, 상기 화상 중에서 Sign in to your account 라고 하는 영어를 일본어화하고 싶다고 합니다. 그러면

dictionary.js

{[Translations.SIGN_IN_HEADER_TEXT]: 'ログイン',}

이러한 형태의 Object를 만듭니다.
그럼 어떤 영어가 어느 key에 대응하고 있는지라고 하면, 아래의 링크에 쓰고 있습니다.
htps : // 기주 b. 코 m / 아 ws 아 mp ぃ fy / 아 mp ぃ fy js / b ぉ b / 마인 / 파카 게 s / 아 mp ぃ fy 우이 코 m 포넨 ts / src / 코몬 / T 란 sぁ ち ん s. ts

그건 그렇고, 오류 메시지 시스템은 다음과 같습니다.
htps : // 기주 b. 코 m/아 ws-아 mpぃfy/아 mpぃfy-js/bぉb/마인/파카게 s/아우 th/src/코몬/아우테ㅇ로 rSt린gs. ts

그러면 위를 바탕으로 사전 파일을 만들어 갑시다.
표시하지 않으려는 문자열은 빈 문자입니다.
※덧붙여 Qiita의 사양으로 묶지 않으면 표시되지 않기 때문에 key를 싱글 쿼테이션으로 묶어 있습니다만, 실제로는 제외해 주세요.

dictionary.js

import { Translations } from '@aws-amplify/ui-components'

export const vocabularies = {
  '[Translations.CREATE_ACCOUNT_TEXT]': 'アカウントの作成',
  '[Translations.EMAIL_LABEL]': 'メールアドレス *', 
  '[Translations.EMAIL_PLACEHOLDER]': ' ',
  '[Translations.FORGOT_PASSWORD_TEXT]': 'パスワードをお忘れの場合',
  '[Translations.PASSWORD_LABEL]': 'パスワード *',
  '[Translations.PASSWORD_PLACEHOLDER]': ' ', 
  '[Translations.RESET_PASSWORD_TEXT]': 'パスワードを変更する',
  '[Translations.SIGN_IN_ACTION]': 'ログイン',
  '[Translations.SIGN_IN_HEADER_TEXT]': 'ログイン',
}

이와 같이 번역용의 Object를 준비해 주면,,,



성공했습니다.
placeholder라든지 불필요하므로 공문자로 하고 있습니다.

학습

영어로도 귀찮게 하지 않고, 제대로 공식을 읽어 갑시다.
읽으면 읽어도 큰 양이 아닙니다.

Amplify UI Components는 최신 버전을 사용합니다.
공식대로 Tutorial을 진행하면 최신판으로 구축하는 흐름이 되고 있습니다.

부탁

일부 오류 메시지의 정의 파일이 어디에 있는지 확실하지 않았습니다.
만약 발견된 분은 가르쳐 주실 수 있으면 다행입니다.

오류 메시지 예Custom auth lambda trigger is not configured for the user pool.An account with the given email already exists.