Firebase で作る Web アプリケーション

Transcript

1. chatbox.inc 後藤 知宏 Firebase で作る Web アプリケーション
2. chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter : @_mikakane エンジニア / 技術顧問
3. chatbox.inc firebase google のアプリケーションプラットフォーム
4. chatbox.inc Firebase Authentication Realtime Database Storage Hosting Functions
5. chatbox.inc Firebase Authentication ユーザ認証の機能を提供するバックエンド コードを書かずに認証基盤を構築可能 Github や Google などの Oauth 認証アプリ開発も Redirect URL 向けの ngrok など構築不要 管理ユーザは Web GUI で一覧確認可能で、 各ユーザに割り振られる UID でユーザ管理可能
6. chatbox.inc 多様な認証フロー
7. 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 で 作成したプロジェクトのヒモ付を行う。 ▷ ドメイン単位の認証制限が可能
8. 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 も
9. chatbox.inc Login Persistance firebase.auth().onAuthStateChanged(user => { if(user){ // ... }else{ // ... } }) ▷ ログインの永続化も可能 ▷ 一度ログインした状態であれば、再度認証を実行しなくても上記で true の if ブロックが走る
10. chatbox.inc Web上でのユーザ管理
11. chatbox.inc Firebase Realtime Database クラウド上に操作可能なデータストレージを展開 WebSockets を利用してリアルタイム性の高い同期が行える データベースはアプリケーション全体で共有 JSON 形式で階層化可能だが、深くするより横に広くするのが設 計上のベスト・プラクティス 認証ユーザとの連携も可能で、 uid ベースで 指定キーへの読み書き制限を行うことで ユーザ private なデータストアとしても利用可能
12. chatbox.inc vuexfire Vue.js / Nuxt.js で Firebase Realtime Database を利用する際のおすすめプラグイン WS と JS フレームワークのストア連携は 自力で頑張るよりライブラリに頼ったほうが良さげ https://github.com/posva/vuexfire
13. 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 にも反映される形式
14. chatbox.inc 読み書きの管理と認証の連携
15. chatbox.inc 使ってみて Hosting / Functions あたりは Netlify を利用したほうが便利そう Authentication は想像以上に簡単で便利 あとから剥がす際のコストは気になる ( auth:export で csv 出力は可能なよう ) RealtimeDatabase は考え方に慣れが必要そう Rule の設定ミスでのお漏らしが怖い
16. chatbox.inc Thanks!