webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる

      2021/02/23

WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる

今回は、管理するサイトが増えてきて、『id/pass管理めんどくせ~』ってなったとき役に立ちそうな機能『シングルサインオン機能』についてご紹介します。WordPressサイトにつける方法をしらべていたところ、どうやら、クラウドサービスの『Microsoft Azure Active Directory』を使えば大丈夫そうというのがわかりました。認証形式は、WPプラグインなしでサクッといけそうな『パスワードベース』にします。さっそく実装してみましょう。

Microsoft Azure Active Directoryとは?費用は?

クラウドベースの認証やアクセス管理を提供するサービス

Microsoft社が提供する『クラウドベースの認証やアクセス管理を提供するサービス』のことです。Office 365、Azure portalといったMicrosoftのアプリケーションはもちろん、ほかのサービス・自社開発アプリなどと組み合わせて使うこともできます(今回はWordPressにつけます)。 他に詳しく解説している専門のサイトがあるので、ここでは説明は簡単に済ませます。

Azure Active Directoryでシングルサインオン機能つけるのに費用はかかる?

Azureのほかのサービスでは『ボリュームやトラフィックに応じて課金』みたいなのがあるんですけど、公式サイトで調べたところ、『Active Directory・シングルサインオン機能』については、無料プランでも大丈夫でした。 (他項目は無料プランだとオブジェクト数制限などがあるが、シングルサインオンは無制限といった表記)

ちなみに、つけるサイトは?

管理人が以前WordPressで作ったサイト『ss-freemusic』を使ってみます。右クリックでソース見てもらえば画像パスが『/wp-content/uploads』みたいになっているので、WPだとわかるでしょう。実は『WordPressが生成するめちゃめちゃ複雑なパスワード』を使っているので、ログイン情報を覚えられないわけです。

WordPressにシングルサインオン(パスワードベース)~Azure Active Directory上での操作

まずはAzure上で設定を行っていきます。アカウント登録方法などは省きますが、マイクロソフトアカウントを持っている方は、(管理人はwebメールOutlookや、onedriveなどに使っているマイクロソフトアカウントを使ってAzureに入りました)それを使ってもよいかと思います。

シングルサインオン用のアプリケーションを登録する

まずはAzureポータルにアクセスしましょう。データベースとか仮想マシンとか、いろいろな機能があるけど、シングルサインオンしたいときは『Active Directory』へ。既定のディレクトリ | 概要に入ったら、横のメニューから『エンタープライズアプリケーション』を探してください。

『エンタープライズアプリケーション』に入ったところです。office365などがすでに割り当てられている感じ。ここでシングルサインオン用のアプリを作りましょう。『新しいアプリケーション』をクリック。

ここは初見殺しポイント。ギャラリーから追加するのではなく、『ギャラリー以外』を。 ギャラリーの検索窓に『WordPress』って入力してしまうと、『WordPress.com』が出てきてしまうからです。WordPress.comでサイトを作っている人は良いですけどね。

独自アプリケーション追加に入りました。あとは、名前をつけて追加ボタンをおすだけ。名前は適当に『ssf-wp-sso』という名前にしました。

登録したアプリケーションに、シングルサインオンを割り当てる

次はこのアプリにシングルサインオンを割り当てていきます。先ほどのエンタープライズアプリケーションページに、さっき作った『ssf-wp-sso』が登録されているので、ここをクリック。

次に『シングルサインオン設定』のパネルをクリックして設定に入ります。

作ったばかりの状態だと『シングルサインオン無効』となっているので、サインオン形式を選択。(プラグインを使ってSAML認証形式もできますが)今回はパスワード&エクステンションを登録して行う『パスワードベース』を使ってみます。

ログイン用フィールド検出&エクステンション

パスワードベースのサインオンでは、ログイン用フィールド検出が必要になります。いつもWPにログインするときに使っているurl(一般的には、ドメイン/wp-login.phpになっていることが多い)を入れて検出します。 検出できなかった場合でも、『手動検出』というのがあるから大丈夫。

PC画面の右の方に、このようなウィンドウが出ます。『手動検出→サインインフィールド取り込み』と進んで、フィールド検出・パス入れまで済んでから『正常にアプリにサインインできました』をチェックします。

また、フィールド検出&パスワード入力時に『My Apps Secure Sign-in Extension』というブラウザエクステンションが出てきますが、このエクステンションを使ってワンクリックでログインみたいに使えます。

フィールド検出しながら管理画面に入りました。jsがメッセージ出しますが、検出情報をセーブしますか的な意味なのでokを。

これで、サインオンフィールドが検出されました。フィールド名は変えられますが、変えても変えなくてもどっちでもよいです。

ユーザー割り当て&初回アプリ起動でログイン情報を登録

作ったアプリにユーザー割り当て

あとは、シングルサインオン機能を使えるユーザーを、アプリに割り当てていきます。先ほどの『エンタープライズアプリケーション→作ったアプリ』の画面に。右のメニューから『ユーザーとグループ』を選択し、真ん中のウィンドウの『+ユーザーの追加』に入ります。

最初は選択されていないので、シングルサインオンに使いたいユーザーを選択して『選択ボタン→割り当て』へ。会社やお店で使っていて複数のユーザーがいるときは『web担・社長や管理者・店長だけシングルサインオンで入れる』みたいに設定することもできるでしょう。

アプリへの初回アクセスでWPのログイン情報を入力して記録

先ほどの『エンタープライズアプリケーション→作ったアプリ』のページで、『プロパティ』を見れば状態が確認できます。ここに『ユーザーのアクセスurl』という項目があるので、このurlにアクセスすれば、『https://account.activedirectory.windowsazure.com/』みたいなページにリダイレクトされアプリ使用という流れに。

で、初回だけWPのログイン情報を入力して記録してください(次回以降シングルサインオンが可能になります)。

無事にアプリを通してログインできました。ブラウザにはエクステンションも追加されています。

WPにシングルサインオンでログインするときは?

activedirectoryアプリのページでアプリを起動してログイン

https://account.activedirectory.windowsazure.com/のページに、アプリが登録されていました。このアプリをクリックしてログインします。

ブラウザエクステンションを使う

別にWPのログイン画面じゃなくてもよいんですけど(これは起動テストのためにログアウトした後)、ブラウザエクステンション→作ったアプリアイコンクリックでも、登録したWPのサイトに入ることができます。WPプラグイン使いませんでしたね。

注意点・あとがき・まとめ

で、最後に注意点です。 Azure Active Directoryパスベースシングルサインオンを使うときは、Azureやマイクロソフトアカウントを『サインインしたまま』にしてくとよいでしょう(Azureやマイクロソフトアカウントからログアウトしている状態だと、認証情報にアクセスできず、シングルサインオンが効かなくなるからです)。

以下まとめていくと・・・

  • Azure Active Directoryを使ったパスワードベースWordPressシングルサインオンは、WPプラグインを使わないで実装できる
  • Azure Active Directoryシングルサインオンは、無料アカウントでも制限なし(将来変わるかもしれないけど)
  • 主な作業は『アプリ登録とサインオン形式などの設定』『ユーザーの割り当て』『初回のログイン情報の登録』など
  • Azureやマイクロソフトアカウントを『サインインしたまま』にしておくこと

こんな感じでしょうか。管理サイトが増えてきたり、複数ユーザーで運用していたりすると、ログイン情報の管理が大変になってくることがあるので、(最初だけ手間がかかりますが)こういったシングルサインオンでラクにアクセスできるようにしておくのもよいでしょう。


【カテゴリ】 - wpサイト制作事例
【タグ】 - , , ,

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っ ...

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)

今回は、管理人がお仕事のWPサイト開発で使ってみたテクをご紹介し ...

bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

今回は、bulma.cssが、お仕事で扱ったお取引先のWordP ...

WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィ ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう

今回は、以前にちょっとお仕事で扱った、『ログインした会員が、コン ...

WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト

今回は、(twitterにもちょっと書いたんですけど)管理人が、 ...