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!