aoma blog

エンジニアの日常とか技術とか

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

IT firebase firebaseUI

この記事は移転しました。約5秒後に新記事へ移動します。
移動しない場合はココをクリックして新サイトをお楽しみください。

おはこんばんちは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...