WordPressのユーザー登録時にFirebase（Cloud Firestore）へデータを追加する方法
こんばんは、ゾノ( @ozonosho )です。
さて、今日のブログではWordPressのユーザー登録時にFirebaseへデータを追加する方法を紹介したいと思います。
具体的には、Wordpress側で新規ユーザーを登録した時にFirebaseのデータベースにも同じユーザー情報（名前やメールアドレス、趣味など）を挿入して同期させるための方法です。
ピンポイントのニーズは少ないかもしれませんが、ブラウザからFirebaseにデータを挿入したり、ブラウザ版とアプリ版で別のデータベースを利用している場合にお互いのデータを連携したりするときの参考になれば幸いです。
尚、Firebase側のデータべースは「Realtime Database」ではなく「Cloud Firestore」を利用した実装方法となります。
実装方法
実装は下記の４ステップでおこないます。
- Firebaseを利用するための初期化スぺニットを記載する
- Firebaseのユーザーアカウント（Authentication）を作成する
- 作成したユーザー情報を取得して任意のコレクションにデータを追加する
- １～３の処理をWordpressのユーザー登録時に実行する
それぞれ説明していきます。
①Firebaseを利用するための初期化スぺニットを記載する
まずはWebでFirebaseを利用するために必要な初期化スぺニットを記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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の初期化スぺニットを読み込んだあとは、メールアドレスとパスワードを渡せば簡単にアカウントを作成できる関数を利用できます。
|
1 2 3 4 5 6 |
<script> var email = "＜メールアドレス＞"; var password = "＜パスワード＞"; //Firebaseのユーザーアカウントを作成 firebase.auth().createUserWithEmailAndPassword(email, password); </script> |
これでFirebase側にユーザーのアカウントを作成することができました。
③作成したユーザー情報を取得して任意のコレクションにデータを追加する
Firebase側にユーザーのアカウントを作成するとユーザー固有のID（uid）が発行されるので、まずは作成したユーザーのuidを取得します。
コレクションにユーザー情報を追加する際にはuidをドキュメントIDに割り当てて追加します。そうすることでユーザー情報が複数のコレクションにまたがっても同一ユーザーの情報だと判別することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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にユーザー情報を追加することが目的であればここまでの内容で完了です。
④１～３の処理をWordpressのユーザー登録時に実行する
今回はWordpressで新規ユーザーを登録した時に１～３の処理を実行したいので、最後にWordpressの「admin_print_footer_scripts」フックを利用して実装します。
WordPressの管理画面にjavascriptを適用するには、これらのフックを利用する必要があるんですよね。
実装は、下記コードをfunctions.phpに追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
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のカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
