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

D0cbc297e483306fb188649ea56f0c8d?s=47 mikakane
November 17, 2018

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

D0cbc297e483306fb188649ea56f0c8d?s=128

mikakane

November 17, 2018
Tweet

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!