freee-app-template-firebase

このアプリは Firebase 上で動作する freee SDK を利用して、認証や API コールを行うサンプルコードを実装したものです。

サンプルアプリでできること

freee ログイン画面へリダイレクト -> 認可 -> コールバックで user 情報を Firebase に保存 -> ホーム画面へ遷移
ログアウト
事業所情報の読み込み (GET api/1/users/me)
取引情報の登録 (POST api/1/deals)
アクセストークン、リフレッシュトークンの暗号化と key rotation

実行環境

Windows環境はサポートしておりません。

フォルダ構成

静的ファイルを所有する任意のドメインで配布する Firebase Hosting から Firebase Cloud Functions を call して、 freee API や Cloud FireStore（NoSQL database）にアクセスしてアプリが動作します。

Firebase での Web アプリ作成については公式リファレンスもご参照ください。

Root
├ hosting .. Firebase Hosting にデプロイされるソースのルートフォルダ
├ functions .. Firebase Cloud Functions にデプロイされるソースのルートフォルダ
   ├ config .. 各種 configuration
   ├ config.xxxx.json .. SDKConfig 用の設定情報
   ├ service-account.json .. Service Account credential file for firebase

事前に必要なアプリケーション

git
nodenv
Google Chrome

開発環境のセットアップ

Step1: project 作成

① git clone

$ git clone https://github.com/freee/freee-app-template-firebase.git
$ cd freee-app-template-firebase

② firebase-tools をインストール
npm install -g firebase-tools@7.12.1

③ firebase にログイン
firebase login
認証画面に遷移するので承認してください。

④ firebase のコンソールでアプリを作成 https://console.firebase.google.com/u/0/?hl=ja

Firestore、Storage デプロイ時にエラーになるため、サイドバーからそれぞれの画面に遷移してアクティベートしておいてください。ロケーションは特別な理由がない限りasia-northeast1で統一してくだだい(Firestore のロケーションは後から変更できないので注意)

⑤ firebase プロジェクトを紐付け

firebase projects:listを実行し、 [Project ID]を確認する

出力例)


┌──────────────────────────────┬───────────────────────────────────┬──────────────────────┐
│ Project Display Name         │ Project ID                        │ Resource Location ID │
├──────────────────────────────┼───────────────────────────────────┼──────────────────────┤
│ template-firebase-local      │ template-firebase-local           │ asia-northeast1      │
├──────────────────────────────┼───────────────────────────────────┼──────────────────────┤

firebase use [Project ID]を実行して現在フォルダとプロジェクトを紐付ける

実行例)


firebase use template-firebase-local

⑥ freee アプリストアでアプリを作成する

こちらを参考にしながらアプリを作成してください。
コールバック URL は http://localhost:5001/{{project-id}}/us-central1/api/auth/callback にしてください。 ※us-central1を指定するのはローカルで動作させるためです。

Step2: Cloud Functions の設定

Cloud Functions はサーバーレスで実行できる関数で、ローカルで動かすこともできます。ここでは、ローカルで Cloud Functions を動作させる手順を紹介します。

① functions/.runtimeconfig.json を準備する
以下のように設定してください。 env.modeはfunctions/src/config/config.xxx.jsonの環境ごとの読み分けに利用する変数です。

{
  "env": {
    "serviceaccountpath": "config/service-account.local.json",
    "mode": "local"
  },
  "freee": {
    "client_id": "登録したfreeアプリのclient_id",
    "client_secret": "登録したfreeアプリのclient_secret"
  }
}

※ runtimeconfig は Cloud Functions をローカルで動作させる場合のみ function に反映されます。デプロイ時はこちらを参考に、環境変数を設定してください。

② サービスアカウント認証用ファイルを準備するこちらのリンクを参考に json file をダウンロードし、 functions/src/config/service-account.local.json というファイルで保存してください。

service-account.local.json の中身の例

{
  "type": "service_account",
  "project_id": "sample-pjt-xxx",
  "private_key_id": "xxx",
  "private_key": "xxx",
  "client_email": "xxx",
  "client_id": "xxx",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "xxx"
}

③ サービス固有の設定ファイルを準備する functions/src/config/config.local.json に以下のファイルを準備してください。

{
  "freee": {
    "authHost": "http://localhost:5001/{{project-id}}/us-central1/api/auth",
    "appHost": "http://localhost:5000",
    "homePath": "/select_company",
    "tokenHost": "https://accounts.secure.freee.co.jp",
    "apiHost": "https://api.freee.co.jp"
  },
  "firebase": {
    "apiKey": "{{project-api-key}}",
    "cryptoKeyBucket": "{{project-id}}.appspot.com"
  }
}

step3: Firebase Hosting の設定

Firebase Hosting は静的なファイル（HTML, JavaScript等）をデプロイして任意のドメインで公開できるホスティングサービスです。このアプリでは Firebase Hosting から Cloud Functions をコールして、アプリを動作させています。

① .env の設定 hosting/.env に以下の設定を記載してください。

# functions の URL
CLOUD_FUNCTION_HOST=http://localhost:5001/{{project-id}}/us-central1

# fucntionsのonCall呼び出しをローカルで動かす時に必要設定(CORSエラー対策)
CLOUD_FUNCTION_LOCAL_HOST=http://localhost:5001

# src/firebase/firebase_app で利用する設定ファイルを分岐させるため
REACT_APP_APP_ENV=local

# hosting が接続する functions のリージョンを指定する
HOSTING_REQUEST_FUNCTIONS_REGION=us-central1

# 会計 freee のドメイン
CFO_DOMAIN=https://secure.freee.co.jp

step4: project の起動

① npm run setup を実行する

② npm start を実行し、http://localhost:5000 （hosting のURL）にアクセスする

デプロイ（本番環境で動作させる）

project 作成

本番用に改めて firebase project と freee のアプリを作成してください。 firebase project を作成したら、コマンドラインからプロジェクトの切り替えを行います。

$ firebase use {{project-id}}

また、freee のアプリのコールバック URL には、以下を設定してください。

https://asia-northeast1-{{project-id}}.cloudfunctions.net/api/auth/callback

production 用の Cloud Functions の設定

ローカル環境用に設定した functions の設定ファイルについても、 production 用に作成する必要があります。

service-account.production.json
functions/src/config/config.production.json

functions/src/config/config.production.json の設定例

{
  "freee": {
    "authHost": "https://asia-northeast1-{{project-id}}.cloudfunctions.net/api/auth",
    "appHost": "{{hosting-url}}/home",
    "homePath": "/select_company",
    "tokenHost": "https://accounts.secure.freee.co.jp",
    "apiHost": "https://api.freee.co.jp"
  },
  "firebase": {
    "apiKey": "{{project-api-key}}",
    "cryptoKeyBucket": "{{project-id}}.appspot.com"
  }
}

またローカル以外で Cloud Functions を動作させるためには、.runtimeconfig.json の内容を functions に設定する必要があります。こちらのリンクを参考に functions の環境変数設定を行う必要があります。以下を参考にコマンドラインから設定してください。

$ firebase functions:config:set env.mode=production env.region="asia-northeast1" freee.client_id=xxx freee.client_secret=xxx env.serviceaccountpath="config/service-account.production.json"

デプロイの実行

npm run deploy を実行してください。

FAQ

Q. Firebase の料金プランはどうしたら良いか？
A. Blaze プランにする必要があります。freee の API は外部の API にあたり、functions 上からの接続には Blaze プランにする必要があります。

gn-spawn/freee-app-template-firebase