FirebaseUI for Web を使って、ログイン・サインアップ機能を作るときは気を付けよう！
こんにちは。地図パズル製作所の都島です。地図パズル製作所では Firebase Authentication を使って、ログイン・サインアップ機能を構築中です。構築には、FirebaseUI for Web を使っているのですが、想定外な点がいろいろありましたので、説明して行きたいと思います！
とここで、まず、地図パズル製作所を知らない方向けに、地図パズル製作所の宣伝をします。地図パズル製作所では、ブラウザでできる無料の地図パズルを公開しています。
まだ、やったことのない方はぜひ日本地図の地図パズルに挑戦してみてください。10分以内でできたら上級者です！楽しいですよ～
※上の画像は地理院タイルを加工して利用しています。
では、本題に入りましょう！
Firebase Authentication とは？
Firebase Authentication とは、Firebase のシステムの一つで、認証機能を提供しています。Cognito や Auth0 などと似た感じのシステムです。Cognito よりは設定項目が少なくて使いやすい印象です。逆の言い方をすると自由度が少ないかもです。
そんな Firebase Autentication には、ログイン画面を簡単に作るための、「FirebaseUI for Web」というものがあります。下の URL みたいな UI をとても簡単に作れます。
私は上司から「ログイン機能を作って」と言われたとき、「FirebaseUI for Web があるから、すぐできちゃう。すぐに完成させて、上司からも好感度アップだ♪」と思っていたわけですが、私にはぜんぜん簡単ではありませんでした(笑)
では、どこが難しかったのか、まとめていきましょう！
FirebaseUI for Web を使う前に知っておきたかった点
日本語化が大変。。。
地図パズル製作所では React を使っているので、最初は firebaseui-web-react を使って実装してみました。でも、ある程度作ってみて、困ったことに気づきました。firebaseui-web-react は多言語対応していないのです。。このまま英語でいくか、、、とも思ったのですが、やっぱりそれはないですよね(笑) ということで、firebaseui-web の日本語版を直接インポートして使おうと方針転換しました。でも、これがまた、大変でした。下の URL に従ってやればできる、と書かれていますが、これがいろいろ難しく。。
日本語版をビルドするには、Java と Chrome が入っている環境が必要なのです。そんな環境なかったので、作るか、、と思いましたが、最近 Java ってライセンスが厳しくなったんじゃなかったっけ？？という問題に直面しました。ということで、この方法もあきらめました。ライセンスとか、苦手なんです。
次に CDN から日本語版を取得する方法で、どうにか実装できました。こんな感じのソースコードになっています。（テスト前なので、間違っているところがあるかもです。）
import {
EmailAuthProvider,
getAuth,
GoogleAuthProvider,
sendEmailVerification,
} from "firebase/auth";
import loadJs from "loadjs";
import { NextPage } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import React, { useEffect } from "react";
import { useWidowInnerHeight } from "../utils/hooks";
import "../utils/InitializeApp";
const auth = getAuth();
const Login: NextPage = () => {
const height = useWidowInnerHeight();
const router = useRouter();
useEffect(() => {
const redirectUrl =
router.query.redirectUrl != null
? router.query.redirectUrl.toString()
: "/";
const uiConfig = {
callbacks: {
signInSuccessWithAuthResult: async () => {
await sendEmailVerification(auth.currentUser!, {
url: "https://chizu-puzzle.com/",
});
return true;
},
},
signInFlow: "popup",
signInSuccessUrl: `/email_verifying?redirectUrl=${redirectUrl}`,
signInOptions: [
EmailAuthProvider.PROVIDER_ID,
GoogleAuthProvider.PROVIDER_ID,
],
tosUrl: "/",
privacyPolicyUrl: "/",
};
loadJs(
[
"https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js",
"https://www.gstatic.com/firebasejs/9.1.3/firebase-auth-compat.js",
"https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth__ja.js",
],
{
success: () => {
const ui = new (window as any).firebaseui.auth.AuthUI(auth);
ui.start("#firebaseui-auth-container", uiConfig);
},
}
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<React.Fragment>
<Head>
<title>ログイン | 地図パズル製作所</title>
<link
type="text/css"
rel="stylesheet"
href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css"
/>
</Head>
<div
style={{
height: `${height - 180}px`,
}}
className="m-5"
>
<div id="firebaseui-auth-container" />
</div>
</React.Fragment>
);
};
export default Login;
でも、ちょっとこのソースコード微妙な感じですよね(笑) いろいろうまくいかなくて、loadJs っていうライブラリで CDN からロードしています。他にいいやり方ある方はコメントで教えてください。
利用規約、プライバシーポリシーのチェックボックスがつけられない？
FireabaseUI for Web の UI は前にも書いたように、下の URL みたいな感じです。
と、ここで問題に気づきました。プライバシーポリシーと利用規約を確認するチェックボックスが付いていないのです。。FirebaseUI for Web でも採用している、ボタンを押したら同意したことにみなしますよ、というのでもいいことはいい感じですが、P マーク的に一番無難なのはチェックボックスを付けることみたいですね。
ちなみに、この件、こちらの issue でも取り上げられています。
今後に期待です。
ちなみに私は、Firebase Authentication でユーザ登録後に別画面にリダイレクトしてハンドル名を登録させ、その時にプライバシーポリシーと利用規約に同意させることにしました。これで P マーク、大丈夫ですよね？？
最後に
簡単に思っていた Firebase のログイン機能ですが、結構てこずっていて、まだ完成は遠そうです。。でも、おかげさまで Zenn の記事が一つかけました！と前向きにとらえて、頑張っていきます！！今後も継続して記事を投稿していきますので、よろしくお願いします！
ツイッターもよろしくお願いします！
アメブロもやってます！
Discussion