実践！Firebase Authでソーシャルログインとユーザー管理

※目次のみです。そのうち中身追加します。

事前準備

スキルセット最低ライン
jQueryが使えたり、ajaxが何となく分かる人向け

セキュリティリスク
ある程度Firebase(Google)任せになるので、深い知識は必要としないが潜在的なリスクがあるので、勉強するのに越したことはない。

メリット
認証のサーバー側セキュリティをFB任せにできる。
フロントエンドだけで会員登録&ページ認証ができる

デメリット
セキュリティポリシーがある会社は使えないかも。

基本はFIREBASEのドキュメントにすべて書いてあるので、それに沿って行います。

Fierbase環境設定

※Firebaseドキュメントどおりに勧めばOK
1. Firebaseコンソールに移動
1. プロジェクトを追加する
1. Authenticationに移動し、ログイン方法を「匿名を有効」に設定。※匿名以外は後記
1. Databaseに移動して、Cloud Firestoreで「データベースを作成」する。※テストモードでいいです。
1. 公開するサイトがなければHostingもinitに沿って作成

開発環境設定

※Firebaseドキュメントどおりに勧めばOK
※ FWとの連携する場合は後記

1. index.htmlを作成
2. FirebaseAuthenticationのWeb要設定を追加
3. 実行・確認

閲覧者を匿名ユーザー化しよう

※Firebaseドキュメントどおりに勧めばOK
1. 匿名ユーザーを作成
1. 実行・確認
1. ユーザーを削除しよう

------ ここまではドキュメント読めばOK

パスワード認証で匿名ユーザーの永久化しよう

ここまでの段階で、ページにアクセスした閲覧者には、匿名ユーザーのUIDが振られています。詳しくはこちら

1. メール・パスワードの入力項目を作成
2. サインアップする
3. メール認証する

ソーシャルログインでアカウントとリンクしよう

1. アカウント管理項目を追加
2. 各サービスのデベロッパーIDを取得
3. アカウントリンクする
4. アカウントリンクを外す
5. 匿名からSNS認証への永久化

ユーザー情報の管理しよう

1. Authが保持できる情報
2. ソーシャルから取得できる情報

FirebaseStoreで独自にユーザー情報の管理しよう

1. FirebaseStoreでAuth以上のユーザー情報を登録する
2. セキュリティルールを設定する
3. Storageで画像を管理
4. FireStoreと紐付いた情報と一緒にユーザーを削除しよう

その他

1. vueでの連携
2. laravelでの連携
3. 匿名ユーザーのバッチ削除
4. push通知使ってみる
5. Analytics連携