WordPress REST APIでユーザー登録(AjaxでChrome拡張からPOST)
外部アプリケーションからJavaScript(Ajax)でWordPress REST APIへPOSTしてWordPressユーザー登録をするときの方法作業メモ。
テスト用につくったGoogle Chrome拡張機能のフォームから登録する、という前提で書いていきます。
需要があるか分かりませんが、本記事にしたがって同じように操作してみたいかた向けに、今回作ったテスト用Chrome拡張機能のダウンロードリンクを手順内に置いておきます。
そうでないかたは、Chrome拡張機能を、ご自分で連携する予定の外部アプリケーションに読み替えてイメージだけでもつかんでみてください。
ー もくじ ー
WordPress REST APIでユーザー登録する方法・手順
以下５ステップ。
- WordPress管理者ユーザーのアプリケーションパスワード発行
- アプリケーションパスワードをbase64エンコード
- Chrome拡張機能をChromeにインポート
- Chrome拡張機能のコードを編集
- ユーザー登録してみる
ひとつずつ順番に書いていきます。
1. WordPress管理者ユーザーのアプリケーションパスワード発行
WordPressにログインし、ユーザー > 管理者ユーザー名 とクリック。
▼表示されたユーザープロフィールページの下部にある「新しいアプリケーションパスワード名」に適当なアプリケーションの名前を入力し、「新しいアプリケーションパスワードを追加」をクリックします。
アプリケーションパスワード名はメモ代わりのようなものなので、適当でOKです。
▼すると、パスワードが表示されます。あとで利用するので、このパスワードをコピーしてどこか別の場所へ一時的に保存しておいてください。
2. アプリケーションパスワードをbase64エンコード
Macを使っているかたは、コマンドラインからbase64エンコードできます。
以下{WorPressユーザー名}と、さきほどコピーして控えておいた{アプリケーションパスワード}を書き変えて実行します。
echo -n "{WordPressユーザー名}:{アプリケーションパスワード}" | base64
以下、WordPressのユーザー名がtestuserで叩いた例です。
~ % echo -n "testuser:CFPz FQBM 728s bivT fz0c 5wCK" | base64
dGVzdHVzZXI6Q0ZQeiBGUUJNIDcyOHMgYml2VCBmejBjIDV3Q0s=
実行した結果表示された文字列があとで使う認証情報になるので、コピーして控えておきます。
Windowsを使っている場合は、以下のようなWebツールを使うと早いです。
Webツールを使う場合も同様に、
testuser:CFPz FQBM 728s bivT fz0c 5wCK
のように {WordPressユーザー名}:{アプリケーションパスワード} の形式で入力して変換するだけです。
3. Chrome拡張機能をChromeにインポート
同じ操作をしてみるかたは、こちら↓からZIPファイルをダウンロード・解凍します。
「誰とも知らない他人が作ったchrome拡張機能なんて、怖くてインポートできない」というかたは、インポート前にJavaScriptのソースコードを見てください(^^;
chrome拡張機能ページへ行ったら、右上すみにある「デベロッパーモード」をオンにしたあと「パッケージ化されていない拡張機能を読み込む」をクリック。
ダウンロードしたフォルダを選択します。以下画像ではフォルダ名が「chrome-basics」となっていますが、読み替えてください。
すると、HELLO WORLD拡張機能がchromeにインポートされます。以下画像ではアプリ名が「HELLO WORLD」となっていますが、読み替えてください。
ブラウザ右上の拡張機能マークをクリックし、ピン留めしておきます。
4. Chrome拡張機能のコードを編集
ダウンロードしたChrome拡張のファイルpopup.jsを開き、urlとapp_passwordを書き換えます。
urlは、ご自分のWordPressサイトのURL。
app_passwordは、「手順2. アプリケーションパスワードをbase64エンコード」で控えておいたエンコード後の文字列です。
再読み込みを忘れずに
Chrome拡張機能は、ソースコードを変更したら再読み込みをしないかぎり反映されないので注意。
以下「リロードアイコン」をクリックすれば再読み込み完了です。
5. ユーザー登録してみる
もしWordPressにログイン状態の場合は、ログアウトしてからAPIを叩きます。
ぼくの場合、ログイン状態だと(なぜか)REST API経由で登録することができませんでした。
拡張機能アイコンをクリックし、必要情報を入力。
「登録」ボタンをクリックして「登録完了」と出ればWordPress REST API経由でのユーザー登録が成功です。
WordPress管理画面にログインし、ユーザーが登録されていることを確認しましょう。
今回の登録ではユーザー名・氏名・メアドのみPOSTしましたが、他のargumentは以下公式ドキュメントを参照してみてください。
