Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Firebase で作る Web アプリケーション
mikakane
November 17, 2018
Programming
1
120
Firebase で作る Web アプリケーション
mikakane
November 17, 2018
Tweet
Share
More Decks by mikakane
See All by mikakane
コーディングがわからない
mikakane
0
92
Web制作現場のディレクションを支えるGitHub
mikakane
0
280
nuxt.js で plugins を作る
mikakane
0
400
@ionic/vue で Web アプリを作ってみる
mikakane
0
2.3k
Laravel Package Development
mikakane
16
4.6k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
1.7k
フロントエンドで作る理由
mikakane
1
890
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
650
Other Decks in Programming
See All in Programming
WindowsコンテナDojo:第6回 Red Hat OpenShift入門
oniak3ibm
PRO
0
180
Pythonで鉄道指向プログラミング
usabarashi
0
130
Git操作編
smt7174
2
230
SGGとは
inoue2002
0
430
FullStack eXchange, July 2022
brucel
0
200
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
fixstars
0
150
Introduction to Property-Based Testing @ COSCUP 2022
cybai
1
150
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
110
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
oniak3ibm
PRO
0
180
動画合成アーキテクチャを実装してみて
satorunooshie
0
540
Now in Android Overview
aosa4054
0
390
How to start contributing to Kubernetes Projects
ydfu
0
130
Featured
See All Featured
Building an army of robots
kneath
298
40k
4 Signs Your Business is Dying
shpigford
169
20k
The Invisible Side of Design
smashingmag
290
48k
Happy Clients
brianwarren
89
5.6k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Atom: Resistance is Futile
akmur
255
20k
Building Adaptive Systems
keathley
25
1.1k
Stop Working from a Prison Cell
hatefulcrawdad
262
17k
The Power of CSS Pseudo Elements
geoffreycrofte
47
4k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Robots, Beer and Maslow
schacon
152
7.1k
Debugging Ruby Performance
tmm1
65
10k
Transcript
chatbox.inc 後藤 知宏 Firebase で作る Web アプリケーション
chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :
@_mikakane エンジニア / 技術顧問
chatbox.inc firebase google のアプリケーションプラットフォーム
chatbox.inc Firebase Authentication Realtime Database Storage Hosting Functions
chatbox.inc Firebase Authentication ユーザ認証の機能を提供するバックエンド コードを書かずに認証基盤を構築可能 Github や Google などの Oauth
認証アプリ開発も Redirect URL 向けの ngrok など構築不要 管理ユーザは Web GUI で一覧確認可能で、 各ユーザに割り振られる UID でユーザ管理可能
chatbox.inc 多様な認証フロー
chatbox.inc Setup Firebase firebase.initializeApp({ apiKey: process.env.FB_APIKEY, authDomain: process.env.FB_AUTHDOMAIN, databaseURL: process.env.FB_DATABASEURL,
projectId: process.env.FB_PROJECTID, storageBucket: process.env.FB_STORAGEBUCKET, messagingSenderId: process.env.FB_MESSAGINGSENDERID }) ▷ firebase.initializeApp で 作成したプロジェクトのヒモ付を行う。 ▷ ドメイン単位の認証制限が可能
chatbox.inc Login with Github const provider = new firebase.auth.GithubAuthProvider() provider.addScope("admin:org")
provider.addScope("repo") const result = await firebase.auth().signInWithPopup(provider) console.log(result.credential.accessToken) console.log(result.user) ▷ provider を作成して、signInWithPopup でポップアップの認証が可能 ▷ Promise ベースで認証結果が受け取れる ◦ ユーザ情報に加えてサービスの access token も
chatbox.inc Login Persistance firebase.auth().onAuthStateChanged(user => { if(user){ // ... }else{
// ... } }) ▷ ログインの永続化も可能 ▷ 一度ログインした状態であれば、再度認証を実行しなくても上記で true の if ブロックが走る
chatbox.inc Web上でのユーザ管理
chatbox.inc Firebase Realtime Database クラウド上に操作可能なデータストレージを展開 WebSockets を利用してリアルタイム性の高い同期が行える データベースはアプリケーション全体で共有 JSON 形式で階層化可能だが、深くするより横に広くするのが設
計上のベスト・プラクティス 認証ユーザとの連携も可能で、 uid ベースで 指定キーへの読み書き制限を行うことで ユーザ private なデータストアとしても利用可能
chatbox.inc vuexfire Vue.js / Nuxt.js で Firebase Realtime Database を利用する際のおすすめプラグイン
WS と JS フレームワークのストア連携は 自力で頑張るよりライブラリに頼ったほうが良さげ https://github.com/posva/vuexfire
chatbox.inc vuexfire import { firebaseMutations } from 'vuexfire' export const
store = () => { state: { ... }, mutations: { ...firebaseMutations }, actions: setTokenRef = firebaseAction(({bindFirebaseRef}) => { bindFirebaseRef(‘token’,firebase.database().ref(‘/token’)) }) } ▷ Vuex Store のルートの mutations に firebaseMutations をマッピング ▷ firebaseAction をコールして state と database のヒモ付を行う。 ▷ firebase.database().ref(‘/token’).set(token) のコールで、自動的に Vuex にも反映される形式
chatbox.inc 読み書きの管理と認証の連携
chatbox.inc 使ってみて Hosting / Functions あたりは Netlify を利用したほうが便利そう Authentication は想像以上に簡単で便利
あとから剥がす際のコストは気になる ( auth:export で csv 出力は可能なよう ) RealtimeDatabase は考え方に慣れが必要そう Rule の設定ミスでのお漏らしが怖い
chatbox.inc Thanks!