WordPressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

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

      2020/05/20

こんにちは、管理人@SS_mshpです。

今回は、管理するサイトが増えてきて、『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・シングルサインオン機能』については、無料プランでも大丈夫でした。
(他項目は無料プランだとオブジェクト数制限などがあるが、シングルサインオンは無制限といった表記)

■Azure Active Directory の価格
https://azure.microsoft.com/ja-jp/pricing/details/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やマイクロソフトアカウントを『サインインしたまま』にしておくこと

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 - , ,

  関連記事

【METAタグで新サイトに転送】meta http-equiv=”refresh”で転送・WPサイトでの活用・301リダイレクトとの使い分けとは?

今回は、管理人がネットサーフィンしていて見つけた、サイトの転送&活用テク …

【PHP】GD・ImageFilterで、画像の色合いを変えてみる

今回は、管理人がPHPプログラムについて学習していて、やってみた事柄を紹 …

【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok

今回は、WordPressバージョン5以上に更新したら勝手についてきた、 …

侍エンジニア塾ブログにあったPHPコードをシンプルに書いてみる(foreachで配列キーや値取得・continueで空要素スキップ)

今回は、(自分もまだプログラム学習中の身ですが)よくある『プログラム学習 …

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、 …

PHP・shuffleやarrayを使った、画像ランダム表示方法~メインビジュアルやバナー・テキストにも利用可能

今回は、以前お取引先のスクールの担当者さまと、『サイトのメインビジュアル …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …