firebase authentication UIの日本語化をやっていきます。
ほとんど、firebase authentication UI を使う方法をほとんど同じなんで、すぐできるのではないでしょうか。
まずは日本語化の前にfirebase authentication UI を使えるようにしなければなりません。
まだの方はこちらの記事をご覧ください。
firebase auth UI の日本語化
firebase authentication UIを日本語化するには auth UIを使うときにインストールしたfirebaseui
でなく、firebaseui-ja
をインストールする必要があります。
(firebaseui
はアンインストールしてもOK)
npm install firebaseui-ja
あとはfirebaseui
を使っていたところをfirebaseui-ja
に置き換えます。
例えば
require('firebaseui') → require('firebaseui-ja')
import 'firebaseui/dist/firebaseui.css' → import 'firebaseui-ja/dist/firebaseui.css'
などです。
見てみると日本語化されています!!

コードのまとめ
import firebase from 'firebase/app'
if(firebase.apps.length === 0){
firebase.initializeApp(
{
apiKey: "AIzaSyCEkOx7J1k33QEs_cqn0Z2ocVN8iXzUkp8",
authDomain: "fir-authui-9f07c.firebaseapp.com",
projectId: "fir-authui-9f07c",
storageBucket: "fir-authui-9f07c.appspot.com",
messagingSenderId: "277729373844",
appId: "1:277729373844:web:27b3e51a6c6c4fb8e60e81"
}
)
}
export default firebase
<template>
<div>
<div id="firebase-authui"></div>
</div>
</template>
<script>
import firebase from '~/plugins/firebase'
import 'firebaseui-ja/dist/firebaseui.css'
export default{
mounted(){
const firebaseui = require("firebaseui-ja");
//firebaseuiの設定
const uiConfig = {
//signin成功後に遷移先
signInSuccessUrl:'/',
//signin方法
signInOptions:[
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
}
//再度アクセスした時に、もう一度 new するとerrorが出るため分岐
if(firebaseui.auth.AuthUI.getInstance()){
const ui = firebaseui.auth.AuthUI.getInstance();
ui.start('#firebase-authui', uiConfig);
}
else{
const ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebase-authui', uiConfig);
}
}
}
</script>
コメント