オンプレ系インフラエンジニアがAzureを勉強する

いつか誰かの何かの役に立つと嬉しいな

Azure Web Apps×Azure Active Direstoryでブログを作る

はじめに

繰り返される組織編成によりすっかり廃れてしまった社内ブログを復活させようと思い、Azureでブログを作ってみることにしました。
社内への情報共有の手段が確立されていないと、
いくら外部の勉強会などで情報を得てきても、あまり活かせないのです…
 

要件

・指定した人しかアクセスできないようにする。
・誰でも参加がしやすいように一般的なブログの形式を選ぶ。
・いいねができる。

 

構成

Azure Web Apps(Freeプラン)(WordPress)
Azure Database for MySQL(Basicプラン)
Azure Active Directory

 

参考サイト様

Azure AD 認証を構成する | Microsoft Docs

GitHub - psignoret/aad-sso-wordpress: Single Sign-on with Azure Active Directory (for WordPress)

 

手順

以下、Azure Active Directoryで同じディレクトリの人だけがアクセスできるブログサイトの作成手順になります。

 

WordPressの新規作成

Azureで新規リソース作成をします。

WordPress」で検索、作成します。

f:id:mitsunooon:20200119134838j:plain

 

パラメータを設定します。

とりあえず一番安いものにします。

利用状況によってスケールアップしていきます。

f:id:mitsunooon:20200119135123j:plain

f:id:mitsunooon:20200119135254j:plain


ちなみに、この時点でのMySQLの見積もりはこのくらい。

f:id:mitsunooon:20200119135350j:plain

 

リソースが作成されると、App ServiceからサイトURLに飛べます。

f:id:mitsunooon:20200119144248j:plain

f:id:mitsunooon:20200119144305j:plain

 

WordPressの初期設定をします。

f:id:mitsunooon:20200119144410j:plain

f:id:mitsunooon:20200119144530j:plain

 

ひとまず、WordPressが使える状態になりました。

f:id:mitsunooon:20200119144551j:plain

 

 

Azure Active Directoryの設定

 Azure Active Directory>[アプリの登録]を開きます。

f:id:mitsunooon:20200119144856j:plain


[新規登録]をクリックし、新規アプリを追加します。

f:id:mitsunooon:20200119145402j:plain

f:id:mitsunooon:20200119145423j:plain


作成したら、[概要]にて各種IDが確認できるので、コピペして控えておきます。

この後の設定でよく使います。

f:id:mitsunooon:20200119145602j:plain


各種設定をしていきます。

まず、[ブランド]で対象のサイトURLを登録します。

f:id:mitsunooon:20200119145710j:plain


[認証]でリダイレクトURIとその他設定をします。

2種類のリダイレクトURIを登録します。

https://サイトURL/.auth/login/aad/callback
https://サイトURL/wp-login.php

f:id:mitsunooon:20200119145939j:plain

 

[暗黙の付与]で[IDトークン]にチェックを入れます。

f:id:mitsunooon:20200119145957j:plain

 

[既定のクライアントの種類]で[任意の組織ディレクトリ内のアカウント]にチェックを入れます。

[保存]します。

f:id:mitsunooon:20200119150015j:plain


[証明書とシークレット]で新しいクライアントシークレットを発行します。
発行した直後しかキーを確認できないので、忘れずにコピーしましょう。
このキーはWordPress側の設定で使います。

f:id:mitsunooon:20200119150228j:plain

f:id:mitsunooon:20200119150253j:plain

f:id:mitsunooon:20200119150309j:plain

 

[APIのアクセス許可]で[アクセス許可の追加]をします。

[Microsoft Graph]>[委任されたアクセス許可]>[Directory.Read.All]を選択します。

f:id:mitsunooon:20200119150626j:plain

f:id:mitsunooon:20200119150641j:plain

f:id:mitsunooon:20200119150654j:plain


追加したら、[既定のディレクトリに管理者の同意を与えます]をクリックします。

f:id:mitsunooon:20200119150817j:plain

 

[所有者]でサイトへのアクセスを許可するユーザーを追加します。

この所有者がアクセスできるユーザーの設定になるかと思ったのですが、そうではなさそうです。同じディレクトリのユーザーであればアクセスできるようになります。

f:id:mitsunooon:20200119150922j:plain

 

AAD認証の設定

App Service側にAAD認証設定をします。

これを設定することで、サイトURLにアクセスすると認証画面がでてくるようになります。

App Serviceの[認証承認]を開きます。

[App Service認証]を[オン]にします。

[要求が認証されない場合に実行するアクション]を[Azure Active Direstoryでのログイン]にします。

f:id:mitsunooon:20200119151106j:plain


認証プロパイダーの[Azure Active Direstory]をクリックします。

[詳細]にAADの概要で表示された各種IDを入力します。

クライアントID:アプリケーション(クライアント)ID

発行者のURL:http://login.microsoftonline.com/ディレクトリ(テナント)ID

許可されるトークン対象ユーザー:api://アプリケーション(クライアント)ID

f:id:mitsunooon:20200119151357j:plain

 

設定ができたら、サイトURLにアクセスしてみます。

アクセス直後にMSのアカウント認証画面が出てきます。

 

WordPress側のAAD設定

WordPress側にもAADの設定を入れることで、記事の投稿のときに必要になるWordPress側のサインインにSingle Sign-Onが適用されて、ログイン情報入力の手間が省けます。

 

下記サイトよりプラグインをダウンロードします。

GitHub - psignoret/aad-sso-wordpress: Single Sign-on with Azure Active Directory (for WordPress)

 

管理者アカウントで作成したサイトにアクセスします。

[ダッシュボード]>[プラグイン]>[新規追加] >[プラグインのアップロード]にて上記でダウンロードしたzipファイルをアップロードします。

f:id:mitsunooon:20200120115245j:plain

 

アップロードおよびインストールが完了したら、

プラグインを有効化します。

f:id:mitsunooon:20200120115312j:plain

 

[設定]>[Azure AD]にてAADの設定を入れていきます。

入力する必要があるのは下記です。

クライアントID

クライアントシークレット

オブジェクトID

 

チェックボックスの項目は必要に応じて有効にします。

f:id:mitsunooon:20200120115351j:plain

f:id:mitsunooon:20200120115400j:plain


以上の設定が完了すると、サイトのサインインにシングルサインオンが適用されます。

 

おわりに

以上の手順で「指定した人しかアクセスできないようにする。」という要件を満たすための設定ができました。

他の要件を満たす、あったらいいなの機能をもう少し追加しているのですが、AzureではなくWordPressのお話なのでおまけ程度に別記事で書きます。
運用開始ができたら、コストについてもちゃんとまとめたいです。

 

 ※2020/02/01追記

Office365アカウントでの認証ができれば、一回のサインイン入力でさえも省けるようなのでもう少し試行錯誤してみる余地がでました。