App Service に認証機能を導入する ~ Twitter(X) / google / Entra ID ~


こんにちは、アーキテクトのやまぱんです。
補足コメントや質問、<font color="red">いいね、拡散</font>、是非お願いします🥺！
間違ってたら<font color="red">優しく</font>教えてください！
今回は Azure App Service に シングルサインオンを利用した認証を導入してみたいと思います。

特に **組織内のユーザーに限定したMicrosoft Entra ID 認証は簡単に設定でき**、組織内のユーザーにのみアクセスできるように設定できるので<font color="red">**非常に便利です**</font>！！

# モチベ
+ **[前回書いた下記の記事](https://qiita.com/aktsmm/items/23a6925b8a24dc669d2f)** で作成した、Azure App Service にデプロイした掲示板アプリに SQL インジェクション攻撃が来たので認証機能を入れてみようと思った。
認証が必要になれば攻撃が減るのではないかと考えた。

https://qiita.com/aktsmm/items/23a6925b8a24dc669d2f

+ Azure Portal 見てると何やら便利そうな、クラウドっぽい？機能を発見
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/cd829052-5816-9bab-294f-cfb580a5bf8a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/edf1bb61-52b5-1b37-5db3-ceaf51046da4.png)


# 実装
今回はTwitter(X) 認証、Google 認証、Microsoft Entra ID (旧：AAD) 認証をしてみたいと思います。
## Twitter 認証
事前にTwitter Developer に登録しておく必要があります。
https://zenn.dev/harumin/articles/753e755fc245ae
(私は昔にTwitter API で遊んでた時期があって、その時に登録してました)

### Twitter 側
+ Twitter Developer ポータル にログイン
https://developer.twitter.com/en/portal/

+ アプリの作成(必要に応じて Project の作成)
**プロジェクトの作成**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/9d32c32c-f937-d3b9-51fb-5fa19093e025.png)

**アプリの作成**
今回は MyBBS という名前でつくります
**API Key**と **API Key Secret** をメモしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/c4aed481-b12e-faa3-0e0e-ca3619a29f68.png)

+ 認証のセットアップ
先ほど作ったアプリ(今回は MyBBS) → settings → User authentication settings → Setup をクリック

・Callback URI / Redirect URL には作成した 「Azure App Service のURL ＋ /.auth/login/twitter/callback」を入力
・Website URL には「Azure App Service のURL」 を入力
・　App Permission は一番権限がないものを選択しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/a3c5c4b2-5957-94a3-b943-b8527c33d7d3.png)

そして　Save を押します。

下記は今回は使用しませんので、メモせず　”Yes, I save it”
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/8c3fb93c-2088-f5a4-753b-96f9d6ae155c.png)


### Azure App Service 側
Azure Portal  → Azure App Service → 認証 
ID プロバイダーで　Twitter を選択
APIキーとAPIシークレットには先ほどメモした値を入力
アクセス制限は認証されていないアクセスは許可したくない

下記のように設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/b372dfb6-8dbf-434a-e859-f10a89a6fae8.png)

追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/fa6434b8-c059-a4a9-61d3-b67a3a219c56.png)

すると再デプロイが走ります

### 確認
Azure App Service のURLにアクセスすると下記の画面となります
*Private Windows で実施しています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/d9c2f167-c6f4-18b1-4ab7-d67d85a4e5df.png)

Twitter (X)の IDとパスワードを入れて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/370076c4-f464-5560-9817-a8b215c8cf4c.png)

無事に MyBBSが表示されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/0a0fb707-3d72-978c-96c3-53acab325766.png)


ちなみにメールも飛んできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/68a84dec-044a-9eae-f47d-c88f583986ae.png)

## Google 認証
### Google 側
画面ショットは少し割愛しますが、下記を見ればなんとかなるはず。
https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid?hl=ja

+ Google API Console にログインする
https://console.cloud.google.com/


+ プロジェクトを作成し、認証情報を作成します
+ OAuth 同意画面を構成する
+ OAuth クライアント ID の作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/1b2491c8-24bc-e61a-3743-f2714a3a85b6.png)

・アプリケーションの種類は ウェブアプリケーション
・承認済みのリダイレクト URI には作成した 「Azure App Service のURL ＋ /.auth/login/google/callback」を入力
・承認済みの JavaScript 生成元 には「Azure App Service のURL」 を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/d854368d-879b-2e9c-2ec0-e43c556f8a17.png)

・「作成」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/ae19ee75-d173-2f17-70e8-2f8462a26f3d.png)
**クライアント ID** と **クライアント シークレット** をメモしておく。

### Azure App Service 側
Azure Portal  → Azure App Service → 認証 
ID プロバイダーで　google を選択
**クライアント ID**と**クライアント シークレット**には先ほどメモした値を入力
アクセス制限は認証されていないアクセスは許可したくない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/400392bb-8384-355a-51ea-b0db2c5e3997.png)



### 確認
先ほどの Twitter 認証の設定がある場合は削除して、Azure App Service → 「構成」より **”TWITTER_PROVIDER_AUTHENTICATION_SECRET”** を削除してからアクセス。
無事にGoogleの認証画面が確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/a24e00c8-433a-1901-adbb-218179c5608d.png)


## Microsoft Entra ID 認証
Microsoft Entra ID 認証でももちろんユーザーを認証の連携を行うことができます。
また Azure Portal から設定をほぼ完了できるので**とてもとても楽ちんです。**
またいくつかパターンがあり、今回は認証スコープを**単一組織内のユーザー(シングルME-IDテナント)バージョン** と **すべての組織のME-IDユーザーと個人用 Microsoftアカウントすべてをスコープにたバージョン** の２種類実施してみます。

:::note info
Azure Portal 上では認証するサポートの種類について以下のように説明されています。
+ この組織ディレクトリのみに含まれるアカウント (Microsoft のみ - シングル テナント)
> ディレクトリに含まれるすべてのユーザーおよびゲストのアカウントは、このアプリケーションや API を使用できます。組織内の対象者の場合にこのオプションを使用します。
+ 任意の組織ディレクトリ内のアカウント (任意の Microsoft Entra ディレクトリ - マルチテナント)
> Microsoft からの職場または学校アカウントを持つすべてのユーザーは、アプリケーションや API を使用できます。これには、Office 365 を使用する学校や会社が含まれます。
対象者がビジネスまたは教育関係のお客様であり、マルチテナント機能を有効にする場合にこのオプションを使用します。
+ 任意の組織ディレクトリ内のアカウント (任意の Microsoft Entra ディレクトリ - マルチテナント) と個人用の Microsoft アカウント (Skype、Xbox など)
> 職場または学校アカウント、個人用の Microsoft アカウントを持つすべてのユーザーは、お客様のアプリケーションや API を使用できます。これには、Office 365 を使用する学校や会社のほか、Xbox や Skype などのサービスへのサインインに使用される個人用アカウントが含まれます。
最も幅広い Microsoft ID のセットを対象として、マルチテナント機能を有効にする場合にこのオプションを使用します。
+ 個人用 Microsoft アカウントのみ
> Xbox や Skype などのサービスのサインインに使用する個人用アカウント。
:::

### Microsoft Entra ID 認証 (組織内のユーザーに限定)
Azure Portal  → Azure App Service → 認証 
ID プロバイダーで Microsoft を選択
単一組織内のユーザーに限定したいので下記のように設定し、[追加]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/b6c60f7a-33e8-0626-04fb-66231aec56e4.png)

:::note
Microsoft Entra ID → アプリの登録 画面を確認すると現在の操作によりアプリ ”MyBBSApp” が追加されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/2d562480-f975-9a69-b005-73d026f0a1f1.png)
:::

#### 確認
先ほどの Twitter 認証の設定がある場合は削除して、Azure App Service → 「構成」より **”TWITTER_PROVIDER_AUTHENTICATION_SECRET”** や **GOOGLE_PROVIDER_AUTHENTICATION_SECRET**を削除してからアクセス。

+ 該当テナント外のユーザーでログイン
期待通り、テナント外のユーザー(個人用 Microsoftアカウント(@outlook.jp))なのでアプリにアクセスすることができませんでした。(B2B招待もしていない)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/f5cdf867-b96a-4bb3-a49e-a57b7fc3a12e.png)

+ 該当テナント内のユーザーでログイン
期待通り、テナント内のユーザーなので無事にログインすることができました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/4b1ff8ac-18a6-85ed-6efb-900d909ec673.png)
期待通り、テナント内のユーザー無事にログインすることができました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/aa257a6c-62df-253b-6969-70736c1c3873.png)


### Microsoft Entra ID 認証 (任意のMicrosoft Entra IDアカウントと個人用 Microsoftアカウント)
つぎに今回の私のように、基本的には一般公開したいけど、アカウント認証だけしたいっていう場合の設定です。
Azure Portal  → Azure App Service → 認証 
ID プロバイダーで Microsoft を選択
Microsoft Entra ID アカウントや個人用 Microsoftアカウント を持ってる人であればだれでも使えるようにしたいので下記のように設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/1045fdce-29f7-00b0-2449-b48e738b45f5.png)

#### 確認

先ほどは利用できなかった個人用 Microsoftアカウント(@outlook.jp)でも無事に掲示板アプリにアクセスすることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/ffcd8482-c6ad-aad9-fa5a-e5cdcc45d954.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/b9e074ad-ef09-40fd-f526-5d252cd0a4f4.png)

# あとがき
このように自分でコードレベルの実装を行わずに、Azure App Service の【認証】機能を使えば簡単に外部のIDプロバイダーを利用した認証を行うことができます。
また Microsoft Entra ID を利用した場合、**組織内のユーザーに限定したMicrosoft Entra ID 認証は簡単に設定でき**、組織内のユーザーにのみアクセスできるように設定できるのでそのような用途の場合<font color="red">**非常に便利です**</font>！！

今回書くきっかけになった掲示板アプリへの SQL インジェクションもなくなるといいなと思います。しばらく様子見！！

# 参考

https://qiita.com/yuna-s/items/ddc0ce9dafb7007a24c5

https://hogetech.info/security/sso/federation

https://www.youtube.com/watch?v=AEIqiNPe8i8&t

https://qiita.com/ykna/items/2367fe3cd13460baac9f

https://qiita.com/TakahikoKawasaki/items/701e093b527d826fd62c

https://learn.microsoft.com/ja-jp/azure/app-service/scenario-secure-app-authentication-app-service

https://learn.microsoft.com/ja-jp/azure/app-service/overview-authentication-authorization#identity-providers

https://qiita.com/Jochun/items/1c9f604b8a935799b1ce