【はじめてのFirebase】第2話：FirebaseUI使ってみた

おはこんばんちはaomaです。

Maday（まっでい）というアプリを作っていきます。 （どんなサービスかはまだヒミツ） プラットフォームはFirebaseです！
ただここでひとつ問題がありまして、Firebase使ったことないんですよね。。。

この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである！第2話！

第2話の内容

• FirebaseUIでログイン周りの実装できるようになる

本編

うおお！firebaseやっていく！

— aoma23 (@aoma23) 2020年5月7日

ログイン周りやっていくよ！
FirebaseUI か Firebase Authentication SDK か。2パターンあるらしい。前者はさくっと導入可能そうで、後者はいろいろカスタマイズしたり玄人向けで、ログイン方法ごとに実装必要そう。
前者でいくよ！https://t.co/1hjeX6d58d

— aoma23 (@aoma23) 2020年5月7日

まずFirebase を JavaScript プロジェクトに追加するらしいんだけど、 Firebase Hosting を使用するようにしたので、まぁよくわからん。https://t.co/GIxs9pSETY

— aoma23 (@aoma23) 2020年5月7日

/__ の意味はこれ。

> Firebase にデプロイするとき（firebase deploy）と、ローカル サーバー上でアプリを実行するとき（firebase serve）の両方で利用できます。https://t.co/8cwI0NgNyP

— aoma23 (@aoma23) 2020年5月7日

なんかPWAにする場合の注意事項的なのあったのでメモしておく。https://t.co/hXC6imEKJs

— aoma23 (@aoma23) 2020年5月7日

とりあえずFirebase SDKがhead内で読み込まれていたので、body内に移動。https://t.co/lNIFWTk0t0

— aoma23 (@aoma23) 2020年5月7日

予約済みの Hosting URL （/__）を使う場合はFirebase 構成オブジェクト（firebaseConfig）を指定する必要はない。
覚えておこう！！https://t.co/1SEP9LaDxJ

— aoma23 (@aoma23) 2020年5月7日

1のウェブ アプリケーションに Firebase Authentication を追加します。
完了ー！！https://t.co/LrQcR7DMGM

— aoma23 (@aoma23) 2020年5月7日

2. 次のいずれかのオプションを使用して FirebaseUI を追加します。

a,b,cどれにしようかな。bのnpm モジュール！

— aoma23 (@aoma23) 2020年5月7日

待ってvar firebaseui = require('firebaseui');でrequire is not defined エラーになる。そうjavascriptにはrequireなんてないんだよね。
はい、ここでわからなくなるー。からaのCDNにしーよおっと！

— aoma23 (@aoma23) 2020年5月7日

OAuth プロバイダでGoogleを有効にしちゃうぜー！ pic.twitter.com/zr2EyyTg7d

— aoma23 (@aoma23) 2020年5月7日

Googleアカウントでログインできるようになった。。。
なんなんだこれは。。。

— aoma23 (@aoma23) 2020年5月7日

寝る！！

— aoma23 (@aoma23) 2020年5月7日

そして月日は流れ。。。

起きた！（約5ヶ月ぶり）
firebaseやっていき！

— aoma23 (@aoma23) 2020年9月29日

さて、ログイン状態を保持するにはどうすればいいんだ？

— aoma23 (@aoma23) 2020年9月29日

ログインしてるかはこれか？
firebase.auth().onAuthStateChanged(function(user) {https://t.co/PUCiIfxdmC

— aoma23 (@aoma23) 2020年9月29日

ログインしてるか判定でけたー！
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
// User is signed in.
console.log("ログインしてる");
console.log(user);
} else {
displaySignIn();
}
}

— aoma23 (@aoma23) 2020年9月29日

さて、、、ログアウトはどうすればいいのかな？？

— aoma23 (@aoma23) 2020年9月29日

ログアウトはこちらを参考に！https://t.co/MTuM7KVLRh

— aoma23 (@aoma23) 2020年9月29日

ログアウト
firebase.auth().signOut().then(() => {

— aoma23 (@aoma23) 2020年9月29日

ログイン中の判定とログアウト処理実装できた！
今日はここまで！

— aoma23 (@aoma23) 2020年9月29日

To Be Continued...