2018.08.04 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を利用するために必要な初期化スぺニットを記載します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

ゾノについて

絶賛募集中の企画

このブログと一緒によく読まれているブログ