Firebase.com からウェブ / Node.js アプリをアップグレード

このドキュメントでは、既存のウェブアプリと Node.js アプリを Firebase.com から新規の Firebase console および 3.x SDK にアップグレードする方法について説明します。

アップグレードには次の 3 つの手順が必要になります。

  1. プロジェクトを新規の Firebase console にインポートする
  2. データベースのコードを更新する
  3. 認証コードを更新する

プロジェクトはいつでもインポートできます。アプリケーションと既存の SDK の動作は継続します。アプリケーションで Firebase の新機能の一部を使用できるようになったら、コードを更新することができます。

プロジェクトを Firebase console にインポート

  • Firebase console に進み、「現在 Firebase.com に存在するプロジェクト」で対象のプロジェクトを見つけます。
  • アップグレードしたいプロジェクトの [インポート] ボタンをクリックします。
    • プロジェクトが firebase.com の有料プランに属する場合は、新規コンソールでプロジェクトのお支払い先を指定する必要があります。お支払い情報が自動的に移行することはありません。
    • 請求先アカウントを選択または作成します。インポートの完了後、プロジェクトのすべての請求はこのアカウントで行われます。
  • Realtime Database と Hosting のコンテンツは、Firebase console に即座に自動インポートされます。
  • ユーザーデータは新たな認証バックエンドに自動的に移行します。データの移行はバックグラウンドで実行されるため、ユーザーはアプリの使用を続行できます。ユーザーの登録やログインも影響を受けません。ユーザー アカウントの移行中は、Firebase console の Auth タブにスピナーが表示されます。
  • Firebase.com アプリにアクティブなプロモーション コードがある場合は、お問い合わせください

Firebase CLI をアップグレード

アップグレードされたプロジェクトでコマンドライン インターフェースを使用するには、バージョン 3.0 以降のインストールが必要になります。インストールするには、以下を実行します。

npm install -g firebase-tools

Firebase CLI の最新バージョンを入手したら、firebase login を実行して再認証を行う必要があります。継続的な統合サーバーまたは他のヘッドレス システムの新しいトークンを取得するには、firebase login:ci を実行します。

最後に、移行済みの Firebase.com プロジェクトの各プロジェクト ディレクトリで、firebase tools:migrate を実行する必要があります。

クライアントのバージョンを更新

アプリケーションのコードを即座に更新する必要はありません。既存のデータベースと認証コードは、アップグレード済みのプロジェクトでも引き続き使用できます。ただし、アプリケーションで Firebase の新機能の一部を使用する準備ができたら、以下の手順に従ってデータベースのコードを新規の API に移行できます。

最も簡単な開始方法は、以下のスクリプトを変更することです。

変更前
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
変更後
<script src="https://www.gstatic.com/firebasejs/3.0.4/firebase.js"></script>

Node.js アプリを移行する場合は、以下のコマンドで firebase の npm パッケージの最新バージョンをダウンロードできます(firebase が 2.X バージョンに確実に固定されないようにするには、最新バージョンをインストールする前にこれをアンインストールします)。

$ npm uninstall firebase --save
$ npm install firebase --save

データベース参照を作成

新規の SDK では、new Firebase を介してデータベース参照をインスタンス化することができなくなります。代わりに、firebase.initializeApp() で SDK を初期化します。

変更前
var ref = new Firebase("https://databaseName.firebaseio.com");
変更後
// See https://firebase.google.com/docs/web/setup#project_setup for how to
// auto-generate this config
var config = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com"
};

firebase.initializeApp(config);

var rootRef = firebase.database().ref();

ウェブ設定ページの手順に従い、上記の設定を自動生成できます。

読み取り専用プロパティとなった引数のないゲッター

引数のないゲッターの多くは、読み取り専用プロパティに変更されています。

変更前
// Reference
var key = ref.key();
var rootRef = ref.root();
var parentRef = ref.parent();

// Query
var queryRef = query.ref();

// DataSnapshot
ref.on("value", function(snapshot) {
  var dataRef = snapshot.ref();
  var dataKey = snapshot.key();
});
変更後
// Reference
var key = ref.key;
var rootRef = ref.root;
var parentRef = ref.parent;

// Query
var queryRef = query.ref;

// DataSnapshot
ref.on("value", function(snapshot) {
  var dataRef = snapshot.ref;
  var dataKey = snapshot.key;
});

認証コードを更新

Firebase Authentication 機能は現在、独自の firebase.auth() サービスの背後で動作しているため、多くのメソッド名が変更されています。OAuth プロバイダでユーザーを認証する方法を以下に示します。

変更前
ref.authWithOAuthPopup("twitter", function(error, authData) {
  if (error) {
    // An error occurred
    console.error(error);
  } else {
    // User signed in!
    var uid = authData.uid;
  }
});
変更後
var auth = firebase.auth();

var provider = new firebase.auth.TwitterAuthProvider();
auth.signInWithPopup(provider).then(function(result) {
  // User signed in!
  var uid = result.user.uid;
}).catch(function(error) {
  // An error occurred
});

使用可能なメソッドの完全なリストについては、ウェブNode.js の両方の認証 API リファレンスを参照してください。

アクセス トークンを取得

Firebase.com Authentication API で、プロバイダのアクセス トークンを簡単に使用してプロバイダの API を呼び出し、追加情報を取得できます。このアクセス トークンは、ログイン動作の完了直後まで使用可能です。

変更前
ref.onAuth(function(authData) {
  if (authData) {
    var accessToken = authData.providerData[authData.provider].accessToken;
  }
})
変更後
var auth = firebase.auth();

var provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider).then(function(result) {
  var accessToken = result.credential.accessToken;
});

Firebase Authentication はアクセス トークンを保持できないため、アプリケーション自身が必要に応じてこれを行う必要があります。

認証状態をモニタリング

認証状態をモニタリングする際のメソッド名とコールバック引数が、若干変更されました。

変更前
ref.onAuth(function(authData) {
  if (authData) {
    // User signed in!
    var uid = authData.uid;
  } else {
    // User logged out
  }
});
変更後
var auth = firebase.auth();

auth.onAuthStateChanged(function(user) {
  if (user) {
    // User signed in!
    var uid = user.uid;
  } else {
    // User logged out
  }
});

既存のログインを移行

ユーザーが以前の SDK でアプリにログインしている場合、新しい SDK でログインし続けるためにはコードの修正が必要になります。それ以外の場合は、再度サインインする必要があります。これを行うためのオープンソースのサンプルコードは Firebase Auth Migration Helpers GitHub リポジトリで提供されています。

新しいパスワードのリセット テンプレートを更新

アプリで、メールとパスワードの認証によるユーザー ログインを許可する場合、パスワードのリセット オプションをユーザーに付与するものと思います。

新規の SDK へのアップグレードが完了すると、パスワード リセットのメールでは、Firebase console で指定された新たなテンプレートが使用されます。アプリでのニーズに応じてこれを更新してください。

Firebase のライブラリを更新

以下のいずれかのライブラリを使用している場合は、最新バージョンへのアップグレードが必須になります。

ライブラリ サポートされているバージョン リソース
AngularFire 2.x.x Github
ReactFire 1.x Github
GeoFire 4.1.x Github

フィードバックを送信...