LoginSignup
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

記事投稿キャンペーン 「2024年!初アウトプットをしよう」
@aktsmm(やまぱん！)inMicrosoft

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

Last updated at Posted at 2024-01-30

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

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

モチベ

  • 前回書いた下記の記事 で作成した、Azure App Service にデプロイした掲示板アプリに SQL インジェクション攻撃が来たので認証機能を入れてみようと思った。
    認証が必要になれば攻撃が減るのではないかと考えた。

  • Azure Portal 見てると何やら便利そうな、クラウドっぽい？機能を発見
    image.png

image.png

実装

今回はTwitter(X) 認証、Google 認証、Microsoft Entra ID (旧：AAD) 認証をしてみたいと思います。

Twitter 認証

事前にTwitter Developer に登録しておく必要があります。
https://zenn.dev/harumin/articles/753e755fc245ae
(私は昔にTwitter API で遊んでた時期があって、その時に登録してました)

Twitter 側

アプリの作成
今回は MyBBS という名前でつくります
API Keyと API Key Secret をメモしておきます。
image.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

そして　Save を押します。

下記は今回は使用しませんので、メモせず　”Yes, I save it”
image.png

Azure App Service 側

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

下記のように設定
image.png

追加します。
image.png

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

確認

Azure App Service のURLにアクセスすると下記の画面となります
*Private Windows で実施しています
image.png

Twitter (X)の IDとパスワードを入れて
image.png

無事に MyBBSが表示されました
image.png

ちなみにメールも飛んできました。
image.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

・アプリケーションの種類は ウェブアプリケーション
・承認済みのリダイレクト URI には作成した 「Azure App Service のURL ＋ /.auth/login/google/callback」を入力
・承認済みの JavaScript 生成元 には「Azure App Service のURL」 を入力
image.png

・「作成」を押す
image.png
クライアント ID と クライアント シークレット をメモしておく。

Azure App Service 側

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

image.png

確認

先ほどの Twitter 認証の設定がある場合は削除して、Azure App Service → 「構成」より ”TWITTER_PROVIDER_AUTHENTICATION_SECRET” を削除してからアクセス。
無事にGoogleの認証画面が確認できました。
image.png

Microsoft Entra ID 認証

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

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

Microsoft Entra ID → アプリの登録 画面を確認すると現在の操作によりアプリ ”MyBBSApp” が追加されていることが確認できます。
image.png

確認

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

  • 該当テナント外のユーザーでログイン
    期待通り、テナント外のユーザー(個人用 Microsoftアカウント(@outlook.jp))なのでアプリにアクセスすることができませんでした。(B2B招待もしていない)
    image.png

  • 該当テナント内のユーザーでログイン
    期待通り、テナント内のユーザーなので無事にログインすることができました
    image.png
    期待通り、テナント内のユーザー無事にログインすることができました
    image.png

Microsoft Entra ID 認証 (任意のMicrosoft Entra IDアカウントと個人用 Microsoftアカウント)

つぎに今回の私のように、基本的には一般公開したいけど、アカウント認証だけしたいっていう場合の設定です。
Azure Portal → Azure App Service → 認証
ID プロバイダーで Microsoft を選択
Microsoft Entra ID アカウントや個人用 Microsoftアカウント を持ってる人であればだれでも使えるようにしたいので下記のように設定。
image.png

確認

先ほどは利用できなかった個人用 Microsoftアカウント(@outlook.jp)でも無事に掲示板アプリにアクセスすることができました。
image.png

image.png

あとがき

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

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

参考

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?