WordPressのユーザー登録時にFirebase（Cloud Firestore）へデータを追加する方法
こんばんは、ゾノ( @ozonosho )です。
さて、今日のブログではWordPressのユーザー登録時にFirebaseへデータを追加する方法を紹介したいと思います。
具体的には、Wordpress側で新規ユーザーを登録した時にFirebaseのデータベースにも同じユーザー情報（名前やメールアドレス、趣味など）を挿入して同期させるための方法です。
ピンポイントのニーズは少ないかもしれませんが、ブラウザからFirebaseにデータを挿入したり、ブラウザ版とアプリ版で別のデータベースを利用している場合にお互いのデータを連携したりするときの参考になれば幸いです。
尚、Firebase側のデータべースは「Realtime Database」ではなく「Cloud Firestore」を利用した実装方法となります。
実装方法
実装は下記の４ステップでおこないます。
- Firebaseを利用するための初期化スぺニットを記載する
- Firebaseのユーザーアカウント（Authentication）を作成する
- 作成したユーザー情報を取得して任意のコレクションにデータを追加する
- １～３の処理を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にユーザー情報を追加することが目的であればここまでの内容で完了です。
④１～３の処理をWordpressのユーザー登録時に実行する
今回はWordpressで新規ユーザーを登録した時に１～３の処理を実行したいので、最後に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のカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
