Firebaseで Twitterアカウントを使った Webアプリを作る🔥

Firebase Hosting, Authentication でTwitterアカウントを用いたユーザー登録・ログインをするアプリを作る。
肝心のアプリの中身を作るまでいかなかった……！

Transcript

1. Firebaseで Twitterアカウントを使った Webアプリを作る 2018/11/29 テックランチ Masataka Yoshida
2. おしながき • Firebaseについて • はじめかた • 実装について • 今後の展開・料金プラン
3. Firebaseって 最近よく聴く
4. 今、サービス開発に使われている https://qiita.com/numanomanu/items/2140da0dcb3cb32903fc
5. 今、サービス開発に使われている https://qiita.com/zonbitamago/items/4e215e305062dde016bb
6. 名前をよく聞いたり 勉強会のネタになっている https://supporterzcolab.com/event/572/
7. https://firebase.google.com/
8. “mobile app”と書いて あるのに なぜWebアプリか
9. プロダクトのページ • https://firebase.google.com/products/
 イメージしやすいかな
10. より優れたアプリを作成 ?! 機械学習?! Function?! 認証機能 ホスティング (Webサイトの公開) ストレージ データベース
11. iOS Android Web C++ Unity
12. 今回使うのは…… 認証機能 ホスティング (Webサイトの公開)
13. 残りの2つは • https://firebase.google.com/products/
14. Improve app quality(品質) クラッシュの分析 パフォーマンス監視 仮想端末でのテスト…… スマートフォン向け Grow your business(拡大) アナリティクス A/Bテスト プッシュ通知……
15. Android開発を経験したなら • 端末にプッシュ通知を送る際にFirebaseを用いる - Firebase Cloud Messaging - Grow your business内
16. はじめかた
17. 流れ • Firebaseのコンソールに入る • Firebaseのプロジェクトを作る • Firebaseの開発環境を整える • Webサイトを公開する(Hosting) • 認証機能を実装する(Authentication)
18. Firebaseのコンソールに入る https://firebase.google.com/
19. Firebaseのプロジェクトを作る
20. いきなりHostingを始める
21. npmが無い！詰んだ！！　→　Node.jsの環境を整える
22. Webサイトを公開する (Hosting)
23. firebase-tools でログインする • firebase-toolsをインストールしたら次へ • firebase login • Firebaseのプロジェクトを作ったGoogleアカウントでロ グインする
24. ローカルにプロジェクトを作る • firebase-toolsでログインできたら firebase init で
 ローカル側にFirebaseのプロジェクトを作成する • その前にプロジェクトとなるディレクトリをあらかじめ 作って中に入る $ mkdir firebase-auth $ cd firebase-auth $ firebase init
25. firebase init • ↑/↓キーとSpaceキーで Hosting にチェックを入れて次へ • コンソールで作ったプロジェクトが表示される！　→選択する
26. firebase init(つづき) • 公開するディレクトリは？ • SIngle Page Appを作る？
27. Webサイトが用意されてる！ • firebase initを実行したディレ クトリに用意される • サブフォルダにプロジェクトは 作成されない
28. Webサイトを公開する • index.htmlを変えて firebase deploy
29. これで公開されました
30. これで公開されました
31. ローカルで確認/デバッグしたい • firebase serve • http://localhost:5000 で確認できる
32. 一旦Hostingによる公開を止める • firebase hosting:disable • “This will immediately…” とあるけど、無効化まで ちょっと時間がかかるかも
33. コンソールの画面も更新される
34. 認証機能を実装する (Authentication)
35. Firebaseのコンソールを開く
36. ✨充実の認証方法✨
37. Authenticationの設定をする • 「有効にする」をONにする • コールバックURLをコピーする
38. Twitter Developer Platform
39. 右上を確認 • 右上に<ユーザー名> / Apps があるか？ • もし無ければ…… ユーザー名 Apps
40. 登録しましょう
42. くっそ面倒くさい
43. Twitterのアプリを登録する • Appsを開いて “Create an app”
45. コールバックURLを貼り付ける チェックを入れる
48. くっっっっっっっっそ面倒くさい
49. Twitterの愚痴おしまい
50. 設定項目はもう一つあります • APIキー, APIシークレット
51. Twitterのアプリを開く • Appsの画面でDetailsを見る • Keys and tokensのConsumer API keysをFirebaseに入力して 保存する
52. Webページを編集する • Firebaseの設定が保存できたら、index.htmlを編集する
53. スクリプトの読み込み • 必要な機能だけ読み込む • `/__/firebase…` はアプリがデプロイされたとき
 自動的に配置される ▼
54. 表示する内容 • ログインの状態だけにする • 今回はこのページを閲覧するのにログインが必要
 な設定にする
 ログインしていなければログインページに
 リダイレクトさせる
 ▼
55. 認証スクリプト • ログイン状態の確認 • ログインページへリダイレクト
56. ログイン状態を確認する • firebase.auth().onAuthStateChanged((user) => {}); • 閲覧にログイン・ユーザー登録が必要なページはこれを 設定する • ログインしているとuser 変数がセットされる
57. ログインを促す • new firebase.auth.TwitterAuthProvider(); • はじめに provider を設定する。この場合はTwitter • firebase.auth().signInWithRedirect(provider); • provider のログインページにリダイレクトさせる • firebase.auth().getRedirectResult().then(function (result) { }); • リダイレクトから帰ってきたときにログインできたか 判定する (実質)
 この行がなくてもログイン・ユーザー登録ができる Twitterのログインをキャンセルした場合
58. 動作確認 • firebase serveでローカルで動作させる
59. アプリのユーザー登録 • Twitterでログインした時点でFirebaseの Authenticationに登録される Firebase側で登録処理する
 ……ので登録するためのコードは不要
60. ユーザーのログアウト・削除 • ユーザーのログアウト: firebase.auth().signOut() • ユーザーの削除: user.delete() • 本当に運用する場合は事前に再認証をする
61. Twitterの情報は？ 変数名 値の例 備考 uid 123456789… Twitterのuser.id(数値, not @~ …) displayName オープンストリーム Twitterに登録された名前(not @~ …) email null Twitterにメールアドレスを登録してもnull photoURL https://pbs.twimg.com/… プロフィール画像
62. あれ?! Twitterのアカウントが使えるけど アプリになってないじゃん?!
64. 今後の展開
65. より優れたアプリを作成 ?! 機械学習?! Function?! 認証機能 ホスティング (Webサイトの公開) ストレージ データベース
66. 各サービスはもちろん連携できる サーバサイドで
 コードを実行 認証機能 ストレージ データベース ホスティング ユーザー
67. 各サービスはもちろん連携できる 認証機能 ストレージ データベース • ストレージ • データベース
 もユーザーのブラウザから
 取得・更新をする 認証機能でログインした
 ユーザーなのか
 Firebase側でチェックして
 制限をかける
68. Firebaseの料金プラン • プロジェクト開始直後は無料のSparkプランになる • プロジェクトごとに料金プランを設定する
69. しょぼいけど 今回の料金は • Authentication: 電話による認証以外は無料 • Hosting: 無料枠 • ホスティング用のストレージ、転送量、複数サイトを 持てるか
70. Spark, Flameの制限を超えたら • これ以上は請求されることはない • データベース・ストレージの制限を超えると動作がス トップする https://firebase.google.com/support/faq/#pricing
71. まとめ • Firebaseはmobileだけのためのサービスではない • Node.jsの環境があれば、数回のクリックとコマンド2発 (init, deploy)で完結できる！ サービスの展開が速い！ • 始めたときは無料枠だけを使うSparkプランになって、 料金面で安心できる！ • (Functionsを使わず)Webアプリを作るとフロントエンド の技術だけを使う Firebaseの処理がクライアントに見えるかも……
72. 参考 ✤ firebaseのいろはのい Webアプリ開発から公開まで - Qiita • https://qiita.com/Tachibana446/items/ eba2fc67d8ef1535541a#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3 ✤ Web開発が捗るFirebase入門！JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開！ - paiza開発日誌 • https://paiza.hatenablog.com/entry/2016/10/03/ Web%E9%96%8B%E7%99%BA%E3%81%8C%E6%8D%97%E3%82%8BFirebase%E5%85%A5%E9%96%80% EF%BC%81JavaScript%E3%81%A7%E3%80%8CWeb%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC% E8%AA%8D%E8%A8%BC%E3%80%8D%E6%A9%9F%E8%83%BD%E3%82%92 ✤ firebase入門 ユーザー認証を行う方法まとめ │ Web備忘録 • https://webbibouroku.com/Blog/Article/firebase-auth ✤ Firebase Authentication これだけは覚えておけ！テストに出るぞ！ - Qiita • https://qiita.com/niusounds/items/829780bdc45d34b4d1e7 • `onAuthStateChanged` を設定するとユーザー登録・ログインを求めることができる。 ✤ firebase/firebaseui-web • https://github.com/firebase/firebaseui-web#using-firebaseui-for-authentication • Firebase Authentication が動いているサンプル • ただし、Firebase UIを使っているため、ボタンの配置などが異なる