2018.08.04

WordPressのユーザー登録時にFirebase(Cloud Firestore)へデータを追加する方法

こんばんは、ゾノ( @ozonosho )です。

さて、今日のブログではWordPressのユーザー登録時にFirebaseへデータを追加する方法を紹介したいと思います。

具体的には、Wordpress側で新規ユーザーを登録した時にFirebaseのデータベースにも同じユーザー情報(名前やメールアドレス、趣味など)を挿入して同期させるための方法です。

ピンポイントのニーズは少ないかもしれませんが、ブラウザからFirebaseにデータを挿入したり、ブラウザ版とアプリ版で別のデータベースを利用している場合にお互いのデータを連携したりするときの参考になれば幸いです。

尚、Firebase側のデータべースは「Realtime Database」ではなく「Cloud Firestore」を利用した実装方法となります。

実装方法

実装は下記の4ステップでおこないます。

  1. Firebaseを利用するための初期化スぺニットを記載する
  2. Firebaseのユーザーアカウント(Authentication)を作成する
  3. 作成したユーザー情報を取得して任意のコレクションにデータを追加する
  4. 1~3の処理をWordpressのユーザー登録時に実行する

それぞれ説明していきます。

①Firebaseを利用するための初期化スぺニットを記載する

まずはWebでFirebaseを利用するために必要な初期化スぺニットを記載します。

<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script>
<script>
  //Initialize Firebase
  var config = {
    apiKey: "<ウェブAPIキー>",
    authDomain: "<プロジェクトID>.firebaseapp.com",
    databaseURL: "https://<データベース名>.firebaseio.com",
    projectId: "<プロジェクトID>",
    storageBucket: "<Bucket名>.appspot.com",
    messagingSenderId: "<送信者ID>"
  };
  firebase.initializeApp(config);
</script>

上記コード内のウェブAPIキーなどはFirebaseのコンソール画面よりそれぞれ確認できます。また、コンソール画面のAuthentication内にある「ウェブ設定」ボタンからすべての情報をまとめて確認することもできます。

②Firebaseのユーザーアカウント(Authentication)を作成する

今回はWordpressの登録ユーザーに紐づく情報をCloud Firestoreに追加したいため、まずはFirebase側にも同じユーザーのアカウントを作成します。

Firebaseの初期化スぺニットを読み込んだあとは、メールアドレスとパスワードを渡せば簡単にアカウントを作成できる関数を利用できます。

<script>
  var email = "<メールアドレス>";
  var password = "<パスワード>";
  //Firebaseのユーザーアカウントを作成
  firebase.auth().createUserWithEmailAndPassword(email, password);
</script>

これでFirebase側にユーザーのアカウントを作成することができました。

③作成したユーザー情報を取得して任意のコレクションにデータを追加する

Firebase側にユーザーのアカウントを作成するとユーザー固有のID(uid)が発行されるので、まずは作成したユーザーのuidを取得します。

コレクションにユーザー情報を追加する際にはuidをドキュメントIDに割り当てて追加します。そうすることでユーザー情報が複数のコレクションにまたがっても同一ユーザーの情報だと判別することができます。

<script>
  //ユーザー情報の取得
  firebase.auth().onAuthStateChanged(function(user) {
    if(user) {
      if(user.email == "<メールアドレス>") {
        //データ書き込み
        const db = firebase.firestore()
        db.collection("<コレクション名>").doc(user.uid).set({
          //以下は任意の項目
          name: "sample",
          address: "sample@test.com"
        })
      }
    }
  });
</script>

この書き方で良いのか不安な部分も多いのですが、、、

②で作成したユーザーはログイン状態になるため「firebase.auth().onAuthStateChanged」でログインユーザーの情報を取得し、該当ユーザーのデータをコレクションに追加しています。コレクション名や項目はご自身のケースに合わせて利用してください。

Cloud Firestoreを確認してデータが追加されていれば成功です。

Firebaseにユーザー情報を追加することが目的であればここまでの内容で完了です。

④1~3の処理をWordpressのユーザー登録時に実行する

今回はWordpressで新規ユーザーを登録した時に1~3の処理を実行したいので、最後にWordpressの「admin_print_footer_scripts」フックを利用して実装します。

WordPressの管理画面にjavascriptを適用するには、これらのフックを利用する必要があるんですよね。

実装は、下記コードをfunctions.phpに追加してください。

function firebase_user_create() {

  global $hook_suffix;

  if($hook_suffix == 'users.php') {

    if(isset($_GET['id'])) {

      $id = $_GET['id'];
      $user = get_userdata($id);

      echo '<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>';

      echo '<script>
        var config = {
          apiKey: "<ウェブAPIキー>",
          authDomain: "<プロジェクトID>.firebaseapp.com",
          databaseURL: "https://<データベース名>.firebaseio.com",
          projectId: "<プロジェクトID>",
          storageBucket: "<Bucket名>.appspot.com",
          messagingSenderId: "<送信者ID>"
        };
        firebase.initializeApp(config);
      </script>';

      echo '<script type="text/javascript">
        var email = "' . $user->user_email . '";
        var password = "' . $user->user_pass . '";
        var useridtext;
        //Firebaseのユーザーアカウントを作成
        firebase.auth().createUserWithEmailAndPassword(email, password);
        //ユーザー情報の取得
        firebase.auth().onAuthStateChanged(function(user) {
          if(user) {
            if(user.email == "' . $user->user_email . '") {
              //データ書き込み
              const db = firebase.firestore()
              db.collection("コレクション名").doc(user.uid).set({
                name: "sample",
                address: "sample@test.com"
              })
            }
          }
        });
      </script>';
    }
  }
}
add_action('admin_print_footer_scripts', 'firebase_user_create');

ユーザー登録完了後はユーザー一覧ページに作成したユーザーのパラメータが挿入されるため、hook_suffixとパラメータを元にユーザー登録完了後のタイミングを判別して処理を実行しています。

この方法でWordpressのユーザー登録時にFirebase(Cloud Firestore)にもデータを自動で追加することができました。

ちなみに、本当は「user_register」フックでユーザー登録後のタイミングに処理を実行するのが理想だったのですが、こちらだとなぜかjavascriptがうまく実行されなかったのでこの実装方法になりました。

おわりに

以上、今回の記事ではWordPressのユーザー登録時にFirebaseへデータを追加する方法を紹介させていただきました。

Firebaseのデータベース操作方法はまだまだ情報が少ないため、すこしでも参考になれば幸いです。

当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。

あなたのサイトに理想の機能を実装!WordPressカスタマイズサービス

本サービスはあなたのWordPressサイトに理想の機能を実装するサービスとなります。 どのような機能・要望でも実現可能です! Wo......

→この記事を読む