Zenn
🐙

Azure App ServiceとStatic AppにGoogle SSOを設定する

に公開
Azure
OAuth
Azure Static Web Apps
tech

意外とつまづいたので書いておく

やること・かいていること

  • OAuthなど流れについてざっくり（やること概要）
  • Google OAuthのキー発行
  • Azure App ServiceへのGoogle認証の設定
  • Azure Static AppへのGoogle認証の設定

やること概要

Azure App Service 及び Azure Static Appにアクセスする際に、Googleで特定のテナントでのみアクセスできるようにする。

基本的なしくみ OAuth

これを適当にしてたら意味わかんなくなった。からちゃんと書いておく。
今回のOAuthは、Googleのような既存のサービスにログインすることで、設定するAzureアプリにもログインできるようにします。

流れ

  • AzureアプリにアクセスするとGoogleの認証ページにリダイレクトされる。
  • 認証が成功するとGoogleからユーザへアクセストークンが渡される。
  • その後のリクエストにアクセストークンを含み、Azureアプリがその有効性を判定することで認証を実現する。

Google OAuthの設定

  • Google Cloud Consoleにアクセスする。
  • OAuth 2.0 クライアント IDのクライアントを作成し、クライアントIDとクライアントシークレットを控える。
  • 承認済みのJavaScript生成元と承認済みのリダイレクトURIを設定する。
    リダイレクトURIの形: https://example.com/.auth/login/google/callback

Azure App Service への Google 認証の設定

以下のように設定します。私の場合はAPIの認証の用途だったのでエラー時には401を、一般的なウェブサイトの保護の場合は302とします。

クライアントIDやシークレットは控えたものを設定します。

Azure Static App への Google 認証の設定

カスタムで認証を設定します。

Role assignments API Pathはウェブアプリのルーティングと被らないパスを適当に設定します。こちらも同様に、クライアントIDとシークレットを設定します。

このパスにルーティングを設定します。（むずかしい...）

エラーで通らなかった

パスへのルーティングをしようとしたところ通りませんでした。GUIでの設定ではなく、コードエディターで編集する必要があります。
Github Actions などのCI/CDを設定しているかと思うので、プロジェクトのルートディレクトリに設定用ファイルを作成します。これによって更新時に自動でルート定義が更新されます。

staticwebapp.config.json
{
    "$schema":"https://json.schemastore.org/staticwebapp.config.json",
    "auth":{
        "rolesSource":"/api/roles",
        "identityProviders":{
            "google":{
                "registration":{
                    "clientIdSettingName":"GOOGLE_CLIENT_ID",
"clientSecretSettingName":"GOOGLE_CLIENT_SECRET_APP_SETTING_NAME"
                }
            }
        }
    },
    "routes":[
        {
            "route":"/*",
            "allowedRoles":["authenticated"]
        }
    ],
    "responseOverrides":{
        "401":{
            "redirect":"/.auth/login/google?post_login_redirect_uri=.referrer",
            "statusCode":302
        }
    },
    "navigationFallback": {
        "rewrite": "/"
    }
}

/api/roles/にはRole assignments Path を設定します。よしなに改変してください。
これで通りました。

おわりに

今回はGoogle SSOとAzureの連携を紹介しました。ほかのプロバイダーとも連携できるようなので試してみたいですね。
Azureなので、本来はEntraを使用するのがベストなのですが...

Discussion