GoogleによるSSOを持つAzure Static Web Appsのアプリを作成する

初めまして、新卒1年目の伊藤です。
今回は、新卒研修にてGoogleによるSSO（シングルサインオン）を持つAzure Static Web Appsのアプリを作成したため、その方法をまとめていきます。

最終更新：2026年4月14日
Google Cloudコンソールでの設定方法を最新化しました。Google Auth Platformを使用して設定する方法となります。

1 Azure Static Web Appsを構築
2 Google Cloudコンソールで認証のクライアントを作成
3 Googleの認証プロバイダを設定
4 動作確認
5 まとめ
6 参考

Azure Static Web Appsを構築

まずは、Webアプリ用のファイルを作成します。今回は、index.htmlとstaticwebapp.config.jsonファイルを作成します。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>StaticWebApp_Google</title>
</head>

<body>
  <h1>StaticWebApp_GoogleでGoogleログインしました</h1>
</body>

</html>

staticwebapp.config.json

{
    "$schema": "https://json.schemastore.org/staticwebapp.config.json",
    "auth": {
      "identityProviders": {
        "google": {
          "registration": {
            "clientIdSettingName": "GOOGLE_CLIENT_ID",
            "clientSecretSettingName": "GOOGLE_PROVIDER_AUTHENTICATION_SECRET"
          }
        }
      }
    },
    "routes": [
    {
      "route": "/*",
      "allowedRoles": ["authenticated"]
    }
    ],
    "responseOverrides": {
      "401": {
        "statusCode": 302,
        "redirect": "/.auth/login/google"
      }
    }
}

staticwebapp.config.jsonはAzure Static Web Appsの設定ファイルであり、認証プロバイダやWebアプリの権限、リダイレクトなどの設定を行うことができます。詳細は、Microsoftのドキュメントを参考にしてみてください。

https://learn.microsoft.com/ja-jp/azure/static-web-apps/configuration

今回の設定では、auth項目でGoogleのクライアント情報を設定し、routes項目でアプリケーション全体へのアクセスを制限しています。また、responseOverrides項目で401エラー（未認証）の場合はGoogleのログインにリダイレクトさせる設定となっています。

作成したファイルは、GitHubのリポジトリに置いておきます。（staticwebapp_googleとする）

次に、Azure Static Web Appsのリソースを構築します。

設定項目は次の通りです。

名前	staticwebapp-google
プランの種類	Standard
ソース	GitHub
GitHubリポジトリ	staticwebapp_google

リソースの情報です。WebアプリのURLはGoogleの認証プロバイダの設定で使用します。以降ではhttps://example.azurestaticapps.netとします。

Google Cloudコンソールで認証のクライアントを作成

Google Cloudコンソールでプロジェクトを新規作成します。

作成後の画面です。「APIとサービス」を選択します。

APIとサービスの画面で、「OAuth同意画面」を選択します。

Google Auth Platformの画面に遷移します。Google Auth Platformを構成するために、「開始」を選択します。

アプリの情報を入力して「次へ」をクリックします。ユーザーサポートメールは構成者（自分）のメールアドレスとします。

対象を設定します。「内部」に設定すると、組織内のユーザーのみ認証できるWebアプリを作成することができます。設定後に「次へ」を選択します。

連絡先情報に構成者（自分）のメールアドレスを入力します。その後「次へ」をクリックします。

ポリシーへの同意にチェックを入れて、「続行」を選択します。その後、「作成」を選択します。

次にスコープを設定します。Google Auth Platformの画面にて、「データアクセス」、「スコープを追加または削除」の順に選択します。

今回は、userinfo.profileを設定します。設定後に最下部の「更新」を選択します。

データアクセスの画面に戻ります。最下部の「Save」を選択します。

次に、クライアントを作成します。Google Auth Platformの画面にて、「クライアント」、「+クライアントを作成」の順に選択します。

OAuthクライアントIDの作成画面が表示されます。アプリケーションの種類は「ウェブアプリケーション」を設定し、名前はGoogle Cloudコンソール内で識別するための任意の名前を設定します。

承認済みのJavaScript生成先のURIは、WebアプリのURLを設定します。承認済みのリダイレクトURIは、WebアプリのURLに.auth/login/google/callbackを追記した内容を設定します。設定後に、「作成」を選択します。

今回の設定項目は次の通りです。

アプリケーションの種類	ウェブアプリケーション
名前	staticwebapp-google
承認済みのJavascript生成元	https://example.azurestaticapps.net
承認済みのリダイレクト URI	https://example.azurestaticapps.net/.auth/login/google/callback

作成完了時にGoogleのOAuthクライアント情報が表示されます。クライアントIDとクライアントシークレットは、この後のAzureの設定で使用しますので、コピーして保管してください。画面表示の通り、クライアントシークレットは後で確認することができなくなります。クライアントシークレットを紛失した場合は、クライアントを作成し直してください。

Googleの認証プロバイダを設定

Azure Static Web Appsのリソースの環境変数で、Googleクライアント情報を設定します。staticwebapp.config.jsonファイルのGOOGLE_CLIENT_ID、GOOGLE_PROVIDER_AUTHENTICATION_SECRETにそれぞれクライアントIDとクライアントシークレットの値を適用します。