Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Firebaseで Twitterアカウントを使った Webアプリを作る🔥
Search
Masataka Yoshida
November 29, 2018
Programming
0
590
Firebaseで Twitterアカウントを使った Webアプリを作る🔥
Firebase Hosting, Authentication でTwitterアカウントを用いたユーザー登録・ログインをするアプリを作る。
肝心のアプリの中身を作るまでいかなかった……!
Masataka Yoshida
November 29, 2018
Tweet
Share
More Decks by Masataka Yoshida
See All by Masataka Yoshida
StorybookでWeb UI部品開発のススメ
ysd_marrrr
0
220
あなたのOrganizationどうなの?Qiita API と スクレイピング
ysd_marrrr
0
660
AWSのコンテナウォークスルー
ysd_marrrr
0
440
「使いどころ」 からはじめるVuex
ysd_marrrr
1
1.9k
Web技術(AR.js)でARを実現する夢を見た
ysd_marrrr
0
530
CodePipelineでLambdaのデプロイをしようとして躓いた話
ysd_marrrr
0
1.3k
Other Decks in Programming
See All in Programming
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
1
400
CSC305 Lecture 08
javiergs
PRO
0
210
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
540
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
150
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
120
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
180
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Done Done
chrislema
185
16k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Docker and Python
trallard
46
3.6k
Gamification - CAS2011
davidbonilla
81
5.5k
How to Ace a Technical Interview
jacobian
280
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Transcript
Firebaseで Twitterアカウントを使った Webアプリを作る 2018/11/29 テックランチ Masataka Yoshida
おしながき • Firebaseについて • はじめかた • 実装について • 今後の展開・料金プラン
Firebaseって 最近よく聴く
今、サービス開発に使われている https://qiita.com/numanomanu/items/2140da0dcb3cb32903fc
今、サービス開発に使われている https://qiita.com/zonbitamago/items/4e215e305062dde016bb
名前をよく聞いたり 勉強会のネタになっている https://supporterzcolab.com/event/572/
https://firebase.google.com/
“mobile app”と書いて あるのに なぜWebアプリか
プロダクトのページ • https://firebase.google.com/products/ イメージしやすいかな
より優れたアプリを作成 ?! 機械学習?! Function?! 認証機能 ホスティング (Webサイトの公開) ストレージ データベース
iOS Android Web C++ Unity
今回使うのは…… 認証機能 ホスティング (Webサイトの公開)
残りの2つは • https://firebase.google.com/products/
Improve app quality(品質) クラッシュの分析 パフォーマンス監視 仮想端末でのテスト…… スマートフォン向け Grow your business(拡大)
アナリティクス A/Bテスト プッシュ通知……
Android開発を経験したなら • 端末にプッシュ通知を送る際にFirebaseを用いる - Firebase Cloud Messaging - Grow your
business内
はじめかた
流れ • Firebaseのコンソールに入る • Firebaseのプロジェクトを作る • Firebaseの開発環境を整える • Webサイトを公開する(Hosting) •
認証機能を実装する(Authentication)
Firebaseのコンソールに入る https://firebase.google.com/
Firebaseのプロジェクトを作る
いきなりHostingを始める
npmが無い!詰んだ!! → Node.jsの環境を整える
Webサイトを公開する (Hosting)
firebase-tools でログインする • firebase-toolsをインストールしたら次へ • firebase login • Firebaseのプロジェクトを作ったGoogleアカウントでロ グインする
ローカルにプロジェクトを作る • firebase-toolsでログインできたら firebase init で ローカル側にFirebaseのプロジェクトを作成する • その前にプロジェクトとなるディレクトリをあらかじめ 作って中に入る
$ mkdir firebase-auth $ cd firebase-auth $ firebase init
firebase init • ↑/↓キーとSpaceキーで Hosting にチェックを入れて次へ • コンソールで作ったプロジェクトが表示される! →選択する
firebase init(つづき) • 公開するディレクトリは? • SIngle Page Appを作る?
Webサイトが用意されてる! • firebase initを実行したディレ クトリに用意される • サブフォルダにプロジェクトは 作成されない
Webサイトを公開する • index.htmlを変えて firebase deploy
これで公開されました
これで公開されました
ローカルで確認/デバッグしたい • firebase serve • http://localhost:5000 で確認できる
一旦Hostingによる公開を止める • firebase hosting:disable • “This will immediately…” とあるけど、無効化まで ちょっと時間がかかるかも
コンソールの画面も更新される
認証機能を実装する (Authentication)
Firebaseのコンソールを開く
✨充実の認証方法✨
Authenticationの設定をする • 「有効にする」をONにする • コールバックURLをコピーする
Twitter Developer Platform
右上を確認 • 右上に<ユーザー名> / Apps があるか? • もし無ければ…… ユーザー名 Apps
登録しましょう
None
くっそ面倒くさい
Twitterのアプリを登録する • Appsを開いて “Create an app”
None
コールバックURLを貼り付ける チェックを入れる
None
None
くっっっっっっっっそ面倒くさい
Twitterの愚痴おしまい
設定項目はもう一つあります • APIキー, APIシークレット
Twitterのアプリを開く • Appsの画面でDetailsを見る • Keys and tokensのConsumer API keysをFirebaseに入力して 保存する
Webページを編集する • Firebaseの設定が保存できたら、index.htmlを編集する
スクリプトの読み込み • 必要な機能だけ読み込む • `/__/firebase…` はアプリがデプロイされたとき 自動的に配置される ▼
表示する内容 • ログインの状態だけにする • 今回はこのページを閲覧するのにログインが必要 な設定にする ログインしていなければログインページに リダイレクトさせる ▼
認証スクリプト • ログイン状態の確認 • ログインページへリダイレクト
ログイン状態を確認する • firebase.auth().onAuthStateChanged((user) => {}); • 閲覧にログイン・ユーザー登録が必要なページはこれを 設定する • ログインしているとuser
変数がセットされる
ログインを促す • new firebase.auth.TwitterAuthProvider(); • はじめに provider を設定する。この場合はTwitter • firebase.auth().signInWithRedirect(provider);
• provider のログインページにリダイレクトさせる • firebase.auth().getRedirectResult().then(function (result) { }); • リダイレクトから帰ってきたときにログインできたか 判定する (実質) この行がなくてもログイン・ユーザー登録ができる Twitterのログインをキャンセルした場合
動作確認 • firebase serveでローカルで動作させる
アプリのユーザー登録 • Twitterでログインした時点でFirebaseの Authenticationに登録される Firebase側で登録処理する ……ので登録するためのコードは不要
ユーザーのログアウト・削除 • ユーザーのログアウト: firebase.auth().signOut() • ユーザーの削除: user.delete() • 本当に運用する場合は事前に再認証をする
Twitterの情報は? 変数名 値の例 備考 uid 123456789… Twitterのuser.id(数値, not @~ …)
displayName オープンストリーム Twitterに登録された名前(not @~ …) email null Twitterにメールアドレスを登録してもnull photoURL https://pbs.twimg.com/… プロフィール画像
あれ?! Twitterのアカウントが使えるけど アプリになってないじゃん?!
None
今後の展開
より優れたアプリを作成 ?! 機械学習?! Function?! 認証機能 ホスティング (Webサイトの公開) ストレージ データベース
各サービスはもちろん連携できる サーバサイドで コードを実行 認証機能 ストレージ データベース ホスティング ユーザー
各サービスはもちろん連携できる 認証機能 ストレージ データベース • ストレージ • データベース もユーザーのブラウザから 取得・更新をする
認証機能でログインした ユーザーなのか Firebase側でチェックして 制限をかける
Firebaseの料金プラン • プロジェクト開始直後は無料のSparkプランになる • プロジェクトごとに料金プランを設定する
しょぼいけど 今回の料金は • Authentication: 電話による認証以外は無料 • Hosting: 無料枠 • ホスティング用のストレージ、転送量、複数サイトを
持てるか
Spark, Flameの制限を超えたら • これ以上は請求されることはない • データベース・ストレージの制限を超えると動作がス トップする https://firebase.google.com/support/faq/#pricing
まとめ • Firebaseはmobileだけのためのサービスではない • Node.jsの環境があれば、数回のクリックとコマンド2発 (init, deploy)で完結できる! サービスの展開が速い! • 始めたときは無料枠だけを使うSparkプランになって、
料金面で安心できる! • (Functionsを使わず)Webアプリを作るとフロントエンド の技術だけを使う Firebaseの処理がクライアントに見えるかも……
参考 ✤ 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を使っているため、ボタンの配置などが異なる