Firebase with Windows

無料で認証やらデータベースやらが揃ったサイトが作れる。 デザインこそ一から作らないとだが、そこさえどうにかすれば認証だのリアルタイムデータ表示だの、そういう楽しそうなサイトを作る受け皿を、目の前に準備してくれるというね。

Firebase価格表

インストール

  1. Node.jsをここからダウンロードして、インストール

  2. （WindowsメニューのNode.jsではなく）Node.js command promptがあるので、開く

  3. インストールされているか確認 
    $ node --version
$ npm --version
  4. インストール 
    $ npm install -g firebase-tools

ただし、以降は個人的な趣味によりGit Bashで作業。

プロジェクト

作成とか

Firebaseのコンソールより、プロジェクトを作成 Firebase Console

既にインストール済みですね Firebase Console Deploy

ログイン

ホスティング設定 Firebase Console Deploy

怒られた

$ firebase login

Error: Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.

ヘルプを見てみる

$ firebase --help
Usage: firebase [options] [command]

Options:
  -V, --version                              output the version number
  -P, --project <alias_or_project_id>        the Firebase project to use for this command
  -j, --json                                 output JSON instead of text, also triggers non-interactive mode
  --token <token>                            supply an auth token for this command
  --non-interactive                          error out of the command instead of waiting for prompts
  --interactive                              force interactive shell treatment even when not detected
  --debug                                    print verbose debug output and keep a debug log file
  -h, --help                                 output usage information

Commands:
（略）
  login [options]                            log the CLI into Firebase
  login:ci [options]                         generate an access token for use in non-interactive environments
（略）

login:ciのヘルプも見てみる

$ firebase login:ci --help
Usage: login:ci [options]

generate an access token for use in non-interactive environments

Options:
  --no-localhost  copy and paste a code instead of starting a local server for authentication
  -h, --help      output usage information

こういうことか

$ firebase --interactive login:ci

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=（略）.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=5（略）&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

Googleさんが権限を要求してきた Firebase Hosting Domain

許可した

+  Success! Use this token to login on a CI server:
（略）
Example: firebase deploy --token "$FIREBASE_TOKEN"

確認

Git Bashで作業している場合、メニュー→Options→Text→LocaleとCharacter setを確認して、ja_JPとUTF-8になっているか確認しないとリストの枠線が「笏€笏€笏€」だらけになる

$ firebase list
┌─────────────┬───────────────────────┬─────────────┐
│ Name        │ Project ID / Instance │ Permissions │
├─────────────┼───────────────────────┼─────────────┤
│ projectname │ project-id            │ Owner       │
└─────────────┴───────────────────────┴─────────────┘

開始

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  （今いるディレクトリ）

? Are you ready to proceed? (Y/n)

作業を進めてみる

? Are you ready to proceed? (Y/n) y
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select)
>( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 ( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules

Hosting: Configure deploy Firebase Hosting sitesを選択
…したいのだが、Git Bashだと矢印キーで選択できない
Git Bashでfirebase loginするを参照し、4を選択

=== Project SetupHosting sites

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project.

? Select a default Firebase project for this directory: (Use arrow keys)
> [don't setup a default project]
  （ブロジェクトがずらずらと）
  [create a new project]

さっきの要領で数字で選択
あとはディレクトリ名指定やトップページを上書きするかとか

? Select a default Firebase project for this directory: (Use arrow keys)
? Select a default Firebase project for this directory: プロジェクトID (プロジェクト名)
i  Using project プロジェクトID (プロジェクト名)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public) ディレクトリ名指定
? What do you want to use as your public directory?  ディレクトリ名
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+  Wrote ディレクトリ名/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

いろいろ作成されてる

firebase
 ├─ ディレクトリ名
 |   ├─ 404.html 
 |   └─ index.html
 ├─ .firebaserc
 └─ firebase.json

管理

切り替える

$ firebase use プロジェクトID
Now using project プロジェクトID

プロジェクトIDに対して名前をつける（プロジェクト名ではない）

$ firebase use --add プロジェクトID --alias 付けたい名前
Created alias 付けたい名前 for プロジェクトID.
Now using alias 元の名前 (プロジェクトID)

すると、プロジェクトIDではなく付けた名前で切り替えができる

$ firebase use 名前
Now using alias 名前 (プロジェクトID)

名前を全部消す

$ firebase use --clear
Cleared active project.

Project aliases for ディレクトリ:

  default (現在のプロジェクトID)

Run firebase use --add to define a new project alias.

カスタムドメイン設定

  1. プロジェクトを選んで開発→Hosting→ドメインを接続 Firebase Hosting Domain
  2. ドメインの追加 Firebase Hosting Add Domain
  3. DNSに指定された値をAレコードに追加 Firabase A record
  4. 既存のサイトから移行する場合は、詳細設定で提示されるTXTレコードを追加 Firebase TXT record
  5. 設定待ち Firebase Hosting Waiting
  6. DNS確認待ち? Firebase Hosting Waiting
  7. 完了 Firebase Hosting OK

作る

アプリを作成

左上にあるからプロジェクトの設定→全般にいろいろ情報が。
Firebase settings general

下にあるマイアプリからを選ぶとWebアプリ作成画面が。 Firebase settings general add web app

いろいろ入力してアプリを登録を押すと、作成に必要な情報が。 Firebase settings general add web app

このコードはマイアプリから確認できるし、変更できるし、追加できるし。 Firebase settings general add web app

これを貼り付ければ使えるように。

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/6.2.4/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#reserved-urls -->

<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>

上記のやつだと認証もデータベース弄りもできないので、使うものだけ呼び出すと良いかなと。

<!-- update the version number as needed -->
<script defer src="/__/firebase/6.2.4/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/6.2.4/firebase-auth.js"></script>
<script defer src="/__/firebase/6.2.4/firebase-database.js"></script>
<script defer src="/__/firebase/6.2.4/firebase-messaging.js"></script>
<script defer src="/__/firebase/6.2.4/firebase-storage.js"></script>

<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>

トッピングの情報はFirebase を JavaScript プロジェクトに追加するを参照に。

見たい

ローカルで確認

$ firebase serve

=== Serving from 'ディレクトリ名'...

i  hosting: Serving hosting files from: プロジェクト名
+  hosting: Local server: http://localhost:5000

こういう風になってた Firebase init site

外から見えるように

deployしてみる

$ firebase deploy

=== Deploying to 'プロジェクトID'...

i  deploying hosting
i  hosting[プロジェクトID]: beginning deploy...
i  hosting[プロジェクトID]: found 1 files in プロジェクト名
i  hosting: uploading new files [0/1] (0%)
i  hosting: uploading new files [0/1] (0%)
+  hosting[プロジェクトID]: file upload complete
i  hosting[プロジェクトID]: finalizing version...
+  hosting[プロジェクトID]: version finalized
i  hosting[プロジェクトID]: releasing new version...
+  hosting[プロジェクトID]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/プロジェクトID/overview
Hosting URL: https://プロジェクトID.firebaseapp.com

とりあえず器だけはできた…
さっそく無駄に背景やらファビコンやらを仕掛け済み。 Firebase hosting setup complete

立ち上げるとエラーが出る

ローカルで確認しようとしたら、こんなエラーが。

$ firebase serve

Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.

認証してみた。

$ firebase login:ci --no-localhost

Error: Cannot run login:ci in non-interactive mode.

non-interactiveがダメなら、オプションを追加してみた。

$ firebase login:ci --no-localhost --interactive

Visit this URL on any device to log in:
（やたらと長いURLが出てくる）

Googleさんから認証が出るので、貼り付けた。

? Paste authorization code here: （出てきた文字列を貼り付け）

認証ができたはずなのに、やっぱり立ち上げられない。

$ firebase serve

Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.

いろいろ調べてコマンドを叩く。 ただ、またnon-interactiveと怒られたので、こちらにも--interactiveオプションを追加。

$ firebase login --reauth --interactive
? Allow Firebase to collect anonymous CLI usage and error reporting information?
 Yes
Visit this URL on any device to log in:
（略）

Waiting for authentication...

+  Success! Logged in as メールアドレス

そしたら、できるようになったみたい。

$ firebase serve

=== Serving from 'ファイルのパス'...

i  hosting: Serving hosting files from: アプリ名
+  hosting: Local server: http://localhost:5000

参考

認証

さて、ここからが本題。

ブロジェクトのAuthenticasin→ログイン方法に、ログイン方法一覧が。

Firebase auth sign in list

メール・パスワード認証

JavaScript でパスワード ベースのアカウントを使用して Firebase 認証を行う

メール / パスワードを設定。
今回の目的はメール確認までさせたいので、メールリンクは無効に。 Firebase auth sign in list

Google認証

ログイン方法としてGoogleを追加 Google new OAuth app

ウェブSDK設定の横にある疑問符から設定画面に飛べる Google how-to-OAuth app

認証情報→認証情報を作成→OAuthクライアントID→OAuthクライアントIDの作成→ウェブアプリケーションでOAuthクライアントのIDとシークレットキーを作成 Google how-to-OAuth

認証情報→ドメインの確認でドメインを追加 Google how-to-OAuth

認証情報→OAuth同意画面→承認済みドメインに必要なやつを追加

保存すると認証情報のOAuth 2.0 クライアント IDに追加されてる
追加したやつの名前を選ぶと、ウェブアプリケーションのクライアントIDが確認できるので、Firebaseのログイン方法に追加 Google how-to-OAuth

下の方にある承認済みのJavascript生成元や承認済みのリダイレクトURIにドメインを追加

アプリを実際に使ってみると、Unverified appsと怒られた。
Unverified apps
アカウントにアクセスできるサードパーティのサイトやアプリ
個人的に使いたいだけなので、プロジェクトをGsuiteのドメインの組織として登録したら使えるように1。
組織へのプロジェクトの移行

Facebook認証

facebook for developersにてアプリを作成
JavaScript で Facebook ログインを使用して認証する
アプリのプロダクト→Facebookログイン→設定→クライアントOAuth設定→有効なOAuthリダイレクトURIを取得し、Firebaseに貼り付ける Facebook OAuth app

Firebase側から取得したhttps://プロジェクト名.firebaseapp.com/__/auth/handlerなOAuthリダイレクトURIを貼り付ける
Facebook OAuth app

だいぶ前にアプリを作っていて放置してたけど、その間に権限が一部削除されてたり（ただし承認やOGPに関係ないやつ）、個人認証ってことで証明証を送らないと作業が進められなかったり…

Twitter認証

まずはログイン方法一覧から設定を。 Firebase auth sign in Twitter

Twitter Developerからアプリ作成
（すでに作ってあって、複数作るには開発者アカウントを申請しないといけないみたいので割愛）

App detailsのCallbackURLsに、Firebaseから取得したhttps://プロジェクト名.firebaseapp.com/__/auth/handlerを追加
Tell us how this app will be usedも必須だけど、短すぎるとエラーになるのでどうやって埋めようかと… Twitter app App details

Keys and tokensから取得したキーをFirebase側に貼り付ける Twitter app Keys and tokens

GitHub認証

ログイン方法一覧からGitHubを選んで有効にすると、こういう画面に。

Firebase auth sign in GitHub

JavaScript による GitHub を使用した認証 FirebaseUI でウェブアプリに簡単にログイン機能を追加する Firebase | Authenticationで複数の認証プロバイダへ同時対応する (Web編)

Setting→Developer setting→OAuth Appsへ。
平たく言えば下記リンクを。
OAuth Apps（要・GitHubログイン）から登録

GitHub new OAuth app

Authorization callback URLに、Firebaseから取得したhttps://プロジェクト名.firebaseapp.com/__/auth/handlerを追加。
あとはアプリ名やサイトURLとか。

作成したアプリを開くとClient IDとClient Secretが表示されているので、それをFirebase側に登録。

FirebaseUIで作る

  • メールアドレスとパスワードを登録すると未認証でも画面が見えるので、それは避けたい
  • メール認証が済むまでは登録画面へ追い出す
  • ログインしていない状態で飛び先のURLを直接開いた場合も追い出す

FirebaseUIが手間なく作れるらしくて手を出したけど、認証後のほうが大変だったという…
かなり大量のサイトを参照にしたので、何がどこでどうなったのやら。

まずは手元の環境設定を。

$ npm install firebaseui -g

そして認証用ページ。
認証しか使わないなら、呼び出すのはfirebase-app.jsとfirebase-auth.jsとinit.jsだけでいい。
あと<div id="firebaseui-auth-container"></div>は必須。 firebase-ui-auth__ja.jsの部分を変えると言語を選べるので、下記リストを参考にjaの部分を書き換え。
Supported Languages

さらに認証画面のスクリプト。

こういう感じに。 FirebaseUI sign

次に認証後のページ。
FirebaseUIっぽいボタンが欲しかったので、こちらでもcssを呼び出す。
画面を整えるためにMaterializeも使ってみた。

認証後のスクリプト。 認証後に表示されるやつは別スクリプトにしたかったので、こういうやつ↓を呼び出して、

function appendScript(URL) {
	var el = document.createElement('script');
	el.src = URL;
	document.body.appendChild(el);
};

処理をしたいところで呼び出して、その中にある関数を呼び出している。

appendScript(外部ファイル名);
（外部ファイルでの関数名）

あとはCSSを頑張って書くと、こんな感じに。 FirebaseUI done

ボタンはmdl-button mdl-button--raised mdl-button--coloredをクラス指定するとFirebaseUIっぽい感じになる。
Algoliaの検索画面を認証式にしたかったので、これで実現できたかな。

FirebaseUIなしで作る

元ネタはFirebase Auth Quickstarts。

同じ画面で遷移

まずはこういうページを。

そしてスクリプト。

ログイン画面の初期状態はSNS認証用の画面。
各種SNSの設定をしてあれば使える。

Firebase before sign in

GitHub認証をするとこんな感じに。
Algoliaの検索フォームを出してる。 Firebase sign in with GitHub

Email/Passwordボタンでメール認証モードに。 登録もパスワード再設定もできる。
SNS Buttonsで、さっきのSNS認証モードに戻れる。

Firebase after sign in

サインインでフォーム部分を隠して、Algoliaの検索画面を。
Firebase after sign in

サインイン→認証後のページへ

同じ画面で遷移するやつを分解手術したら、別ページへ飛ばすことも。
ポイントとしては、

  • サインインページから認証後、location.hrefで飛ばす
  • 飛び先のページでonAuthStateChangedを使って情報を受け取る
  • 飛び先のページを直接開いてもlocation.replaceでサインインページへ追い出す

というところかな。

メールテンプレート

そのままだとfirebase丸出しのメールアドレスになるので、メールテンプレートのカスタムドメインを。 Firebase custom mail

ホスト タイプ 値
ドメイン TXT v=spf1 include:_spf.firebasemail.com ~all
ドメイン TXT firebase=プロジェクト名
firebase1._domainkey.ドメイン CNAME mail-ドメイン.dkim1._domainkey.firebasemail.com.
firebase2._domainkey.ドメイン CNAME mail-ドメイン.dkim2._domainkey.firebasemail.com.

ドメインの所有権を確認するまで、最大48時間かかるんだそうな。

  1. Google Apps for Your Domain万歳。 ↩

コメントする

メールアドレスが公開されることはありません。次の印のある項目は必ず入力してください : *

Markdown を使用できます