FirebaseUIで日本語化したうえでAuthDomainを設定したい
とある用で Firebase Authentication を使っていて、FirebaseUI をログイン画面に実装していました。
FirebaseUI でウェブアプリに簡単にログイン機能を追加する
上のリンクを見ていただければわかるように、FirebaseUI では以下の画像のように、ただコンテナを作れば、勝手にログイン画面を作ってくれます。
最終的にここまでたどり着くまでに、いろいろ躓いたので、備忘録的なものです。
案1
まず、Google のガイドにはいくつかの方法が載っていました。
自分は ESM(ES Modules)で、Webpack を使って 1 ファイルにまとめていたので、ガイド通り npm install firebaseui --save
を実行して、プロジェクトに組み込みました。
この際用いたコードは、途中省きますが以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="./bundle.js"></script>
<link
type="text/css"
rel="stylesheet"
href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css"
/>
</head>
<body>
<div id="firebaseui-auth-container"></div>
</body>
</html>
//----- ログイン処理 -----//
import * as firebaseui from 'firebaseui'
import { firebaseConfig } from './firebaseConfig'
import firebase from 'firebase/app'
import 'firebase/auth'
// Firebaseを初期化
firebase.initializeApp(firebaseConfig)
const auth = firebase.auth()
auth.languageCode = 'ja'
if (location.pathname === '/login') {
const ui = new firebaseui.auth.AuthUI(firebase.auth())
ui.start('#firebaseui-auth-container', {
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
],
callbacks: {
signInSuccessWithAuthResult: () => {
return true
},
},
signInSuccessUrl: '/',
privacyPolicyUrl: '/policy',
})
}
これを開いてみると、以下のような表示になりました。
日本語じゃない...。
案2
「でも、やっぱりユーザーのことを考えたら日本語がいいな...」ということで、もう一つの方法「CDN を使う」を試すべく、先ほどの TypeScript ファイルを消して、HTML ファイルを変更。<head>
タグが終わる前に、これを追記しました。
<script src="/__/firebase/7.23.0/firebase-app.js"></script>
<script src="/__/firebase/7.23.0/firebase-analytics.js"></script>
<script src="/__/firebase/7.23.0/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.7.1/firebase-ui-auth__ja.js"></script>
<script>
const ui = new firebaseui.auth.AuthUI(firebase.auth())
ui.start('#firebaseui-auth-container', {
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
],
callbacks: {
signInSuccessWithAuthResult: () => {
return true
},
},
signInSuccessUrl: '/',
privacyPolicyUrl: '/policy',
})
</script>
日本語になりました!
しかし、ここでも問題が。
例えば今 hogehoge.com
にいても、ログインボタンを押したら <project-id>.firebaseapp.com
に飛ばされてから、OAuth 画面へ飛びます。
つまり、OAuthの流れとしては「hogehoge.com
→<project-id>.firebaseapp.com
→(OAuth認証)→<project-id>.firebaseapp.com
→hogehoge.com
」と、謎(?) の firebaseapp.com
を経由してしまうというわけです。
これについては、Firebase の設定の authDomain
という Key で設定できますが、そもそも CDN では設定ファイルを埋め込めない...。
解決策
ドキュメントを見てみると、FirebaseUI のソースコードから自分でビルドすれば解決するのでは?と考え、試してみました。結果成功しました。
GitHub: firebase/firebaseui-web
参考: firebaseui-web/README.md at master · firebase/firebaseui-web
Step1
まず、ビルドのために必要となる開発環境をインストールします。
- Node.js
- npm
- Java SE Runtime Environment 8
Step2
ソースコードを Clone します。
git clone https://github.com/firebase/firebaseui-web.git
cd firebaseui-web
npm install
Step3
ESM 用の日本語版ファイルをビルドします。
npm run build build-esm-ja
dist
フォルダ 内にある esm__ja.js
が出力されたファイルになります。
Step4
読み込みます。TypeScript を用いているので、 index.d.ts
もコピーしました。
import './firebaseui/@types/index'
import { auth } from './firebaseui/esm__ja'
// ~ Firebaseの設定は略 ~ //
window.addEventListener('DOMContentLoaded', () => {
if (location.pathname === '/login') {
const ui = new auth.AuthUI(firebase.auth())
ui.start('#firebaseui-auth-container', {
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
],
callbacks: {
signInSuccessWithAuthResult: () => {
return true
},
signInFailure: (err) => {
console.error(err)
},
uiShown: () => {},
},
signInSuccessUrl: '/',
privacyPolicyUrl: '/policy',
})
}
})
Step5
Step4 のままだと、まだ <projectid>.firebaseapp.com
に飛ばされます。
そこで、Firebase の設定ファイルを変更します。
{
apiKey: '...',
// authDomain: '<projectid>.firebaseapp.com',
authDomain: 'hogehoge.com',
databaseURL: '...',
// 以下略
}
これで、Webpack でビルドすると、きちんと日本語になり、 hogehoge.com
に飛ばされました!
Author And Source
この問題について(FirebaseUIで日本語化したうえでAuthDomainを設定したい), 我々は、より多くの情報をここで見つけました https://qiita.com/a01sa01to/items/5c8324e0f37bdf0eacd7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .