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

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

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

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

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

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

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

次に、カスタム トークンによるログインの方法を 2.x API と新規 API とで示します。

変更前

ref.authWithCustomToken(AUTH_TOKEN, function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    console.log("Login Succeeded!", authData);
  }
});
変更後

firebase.auth().signInWithCustomToken(AUTH_TOKEN).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

サーバー上で生成するカスタム トークンは、新しい形式です。Node.js および Java 対応の Firebase Admin SDK を使用して、新規 API と互換性のあるカスタム トークンを作成することも、サードパーティの JWT ライブラリを使用してカスタム トークンを作成することもできます。

2.x API のヘルパー ライブラリでデフォルトで生成されるトークンは、有効期限が 24 時間となりますが、Firebase Admin SDK で生成されるカスタム トークンの有効期限は 1 時間です。

使用可能なメソッドの完全なリストについては、ウェブ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 コンソールで指定された新たなテンプレートが使用されます。アプリでのニーズに応じてこれを更新してください。

Firebase のライブラリを更新

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

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

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

ご不明な点がありましたら、Google のサポートページをご覧ください。