Firebase のログイン機能の設定
前回は、Vue と Firebase を利用してログイン機能を実装する方法を紹介しました。今回は、Firebase 側のもう少し詳しい設定について紹介します。
Firebase のログイン機能
Firebase のログイン機能については、前回の記事では簡単に触れただけでした。どちらかというと、Vue の記述方法を中心に紹介したので、今回は、Firebase のログイン機能を中心に紹介します。
Firebase はデータベースやオンラインストレージなどいろいろな機能を提供しています。本来は、Web サーバー側でサポートする機能を簡単なインターフェースで利用できるようにしているのが便利な点です。
その中の機能の一つがログイン（ユーザー認証）機能です。
このログイン機能もいくつかの方法が提供されてます。シンプルに、E-Mail アドレスとパスワードでユーザー管理する方法から、メジャーなインターネットのサービス、Google や Facebook といったサービスのユーザー認証（ログイン）を通して、利用者を特定する方法、携帯の電話番号を利用する方法など、必要に応じて選べるようになっています。
Firebase の利用には、Google のアカウントが必要です。この連載でも、何度か紹介していますが、Firebase を利用するにはまずは Google にアカウントを作成してください！
Firebase コンソール
Firebase の各種設定をするには、基本的にFirebase コンソールを利用します。「コンソール」といっていますが、要は Web サイトです。このサイトに行くと Firebase の基本設定ができる様になっています。
まずは、Firebase コンソールで Firebase のプロジェクトを作成します。その上で利用する機能の設定を行います。
プロジェクトの作成は、Firebase コンソールのトップページから「プロジェクトを追加（Add project）」をクリックして、プロジェクト名などを入力して作成します。
今回は、ログイン機能（ユーザー認証機能）を利用する方法を中心に紹介します。この機能の設定を行うには、「Authentication」の設定が必要です。
利用している Web ブラウザの画面の大きさによって表示が若干異なりますが、PC などの大きな画面の場合には、画面の左側にメニューが表示されている場合が多いかと思います。スマホなどの様に画面が小さい場合には、左上にメニューを開くアイコンがあるので、それをクリックするとメニューが表示されるので、その中か、日本語の表示では「構築」、英語の表示では「Build」の中の「Authentication」を選びます。
設定画面が表示されるので、「Sign-in method」でどの機能を使ってログインをするかを選択します。ログイン プロバイダ（Sign-in providers）で、「新しいプロバイダを追加（Add new provider）」で必要なプロバイダを選択します。前回の例では、「メール／パスワード（E-Mail/Password）」を選択して有効にします。
もう一つは、利用者を「Users」を選択して登録します。 Firebase の API「createUserWithEmailAndPassword（）」を使えばアプリの Web ページからユーザーを登録することも可能ですが、今回は実装をシンプルにするために、Firebase コンソールで登録する方法を紹介しています。
プロジェクトの情報
Firebase を利用するためには、Firebase の初期化が必要です。初期化を行うためには、プロジェクトの情報が必要になります。Firebase ではプロジェクト毎に利用者（ユーザ）の管理をおこなったり、データベースやオンラインストレージを作成してサービスを提供しているので、Firebase にどのプロジェクトからのアクセスなのかを教える必要があるためです。
Firebase のプロジェクトの情報は、Firebase コンソールから取得できます。
ログインの設定をしたメニューの上の「プロジェクトの概要（Project Overview）」の右側の設定のアイコン（⚙：歯車）をクリックして「プロジェクトの設定（Project settings）」を選択すると、右下の方に「SDK の設定と構成（SDK setup and configuration）」に表示されます。Vue をnpmを利用して利用する場合は、「npm」を選択すると、必要な初期化のための情報が表示されます。
以下が初期化の例です。 （＊）プロジェクト情報は実在のものではありません、実際の情報を適当に変えていますので、ご自身のプロジェクト情報をご確認の上利用ください！
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// h t t p s://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxAbc",
authDomain: "test-xxxxx.firebaseapp.com",
databaseURL: "h t t p s://test-xxxxx.firebaseio.com",
projectId: "test-xxxxx",
storageBucket: "test-xxxxx.appspot.com",
messagingSenderId: "1121252635433",
appId: "1:1010101010101:web:29axxxxxxxxxxxxxxxz208",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
前回の例では、この設定を「src/lib/firebase.js」に書いて、他の Vue の部品から参照できるように、初期化した Firebase のアプリ「app」をエキスポートしています。（前回の例では、「app」ではなく、「firebase」に換えてあります。）
さらに、ログイン機能を利用するには、以下の記述も必要です。
import { getAuth } from 'firebase/auth';
....
export const auth = getAuth();
セキュリティを考える
どのログイン機能を使うかを設定した画面（Sign-in method）の下の方を見ると、「承認済みドメイン(Authorized domains)」でユーザー認証の機能を利用できる「ドメイン」を指定できるようになっています。
標準設定では「localhost」が設定されていて、Firebase が割り当てるドメインになっています。このドメイン以外からはユーザー認証ができないようになっています。別のドメイン（自分で所有しているドメイン）でサービスを提供する場合には、そのドメインを追加する必要があります。
「localhost」は開発用で、開発用の Web サーバーが「localhost」を利用する場合が多いので設定に含まれています。このドメインは「（開発者なら）誰でも利用可能」なので、開発やデバッグ時以外は無効にしておいた方が安全です。Web ブラウザで実行される Javascript のコードは、Web ブラウザを使えば、誰でも簡単にダウンロード可能なので、プログラムを書き換えてログイン（ユーザー認証）をバイパスすることも技術的には可能なためです。
実行するドメインを限定する事で、ユーザー認証の実行可能なドメインを限定することができます。
まとめ
Firebase を利用すると、Web サービス（Web アプリ）に必要な機能を簡単に実装できます。今回は、ログイン機能（ユーザー認証機能）を利用する例を紹介しました。
プログラミング（コード）は最低限の API の呼び出しで済みますが、必要な Firebase の設定や初期化は慣れないと少し面倒です。プロジェクトの作成から、利用するログイン方法、ユーザーの設定などやることも多く、さらにプロジェクトの情報を使って Firebase を使うための準備（初期化）も必要になります。
一旦やり方を覚えてしまえば、あとは同じ事の繰り返しになるので、何度か Firebase のプロジェクトを作成して設定を行えば、Firebase のいろいろな機能を簡単に利用できる様になります。是非実際にプロジェクトを作成して、設定の仕方を体験してみてください！
