FirebaseUI for Webを日本語化してVue.jsで使う

FirebaseUI for Webを、日本語化して、Vue.jsでコンポーネント化して使ってみます。

FirebaseUI for Webとは

FirebaseUI for Webは、Firebase Authenticationによるログインのボイラーポレートコードを、シンプルに書けるjs/cssです。

こんな感じで

<script src="https://cdn.firebase.com/libs/firebaseui/2.4.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.4.1/firebaseui.css" />
<div id="firebaseui-auth-container"></div>

      var uiConfig = {
        signInSuccessUrl: '<url-to-redirect-to-on-success>',
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.TwitterAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID,
          firebase.auth.PhoneAuthProvider.PROVIDER_ID
        ],
        tosUrl: '<your-tos-url>'
      };
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start('#firebaseui-auth-container', uiConfig);

こんなんできます。

デモ: FirebaseUI Auth Demo

あーもうfirebase好き

日本語にローカライズ

単純に上記の例のように、htmlファイルでjs/cssを静的に読み込むなら使うのはほんとに簡単です。以下に書き換えるだけ。

<script src="https://www.gstatic.com/firebasejs/ui/2.4.1/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/2.4.1/firebase-ui-auth.css" />

{LANGUAGE_CODE}にjaを指定すれば日本語になります。 かーんたん

しかし、このローカライズされたjsをnpmでそのまま使うことはできません。 npmのモジュールの形式(require("")とかmodule.exportsとかのやつ)にしてやらないといけないです。

日本語版npmモジュールビルド

$ git clone https://github.com/firebase/firebaseui-web/
$ yarn run build
$ yarn run build build-npm-ja
$ ls dist
firebaseui-rtl.css      firebaseui.js           npm.js                  npm__ja.js
firebaseui.css          firebaseui__en.js       npm__en.js

dist/npm__ja.js、firebaseui.cssをimport/requireしてあげればOK！

ちなみにビルドの仕方はここらへん読みました。 firebaseui-web/gulpfile.js at master · firebase/firebaseui-web · GitHub

公式ドキュメントあってもよさそうなのにみあたらーん

Vue.jsのコンポーネント作成

ビルドしたものをnpmモジュールにするまでもないので、上記で生成したjs、cssをプロジェクトのソースディレクトリにそのまま取り込みました。ただ、素で使うのは流石にあれなので、コンポーネント化します。

以下の名前で、先程ビルドしたjs/cssを配置して、

• src/components/firebaseui/firebaseui.css
• src/components/firebaseui/firebaseui__ja.js

こんな感じのcomponentを作って。 src/components/Login.vue

<template>
    <div id="firebaseui-auth-container">
    </div>
</template>

<script>
import firebase from "firebase";
import firebaseui from "./firebaseui/firebaseui__ja";
import "./firebaseui/firebaseui.css";

export default {
  props: ["config"],
  mounted() {
    // Initialize the FirebaseUI Widget using Firebase.
    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    // The start method will wait until the DOM is loaded.
    ui.start("#firebaseui-auth-container", this.config);
  }
};
</script>

使うときはこんな感じ

src/views/Login.vue

<template>
    <div>
        <login :config="config"></login>
    </div>
</template>

<script>
import Login from "../components/Login.vue";
import firebase from "firebase";

export default {
  components: {
    Login
  },
  data() {
    return {
      config: {
        signInSuccessUrl: '<url-to-redirect-to-on-success>',
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.TwitterAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID,
          firebase.auth.PhoneAuthProvider.PROVIDER_ID
        ],
        tosUrl: '<your-tos-url>'
      }
    };
  }
};
</script>

日本語化された！わーい 横幅が・・・微調整必要そうです。

泥臭い感じがちょっとは隠れたしとりあえずこれで使ってみることにしました！