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

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

1 Azure Static Web Appsを構築する
2 Googleの認証プロバイダを設定する
3 動作確認
4 まとめ
5 参考

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の認証プロバイダを設定する

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

作成後の画面です。

APIとサービスで、OAuth同意画面を作成します。User Typeを内部に設定すると組織内のユーザーのみ使用できるWebアプリを作成することができます。

Googleの認証同意画面を設定します。

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

アプリ名	staticwebapp google
ユーザーサポートメール、デベロッパーの連絡先情報	設定者のメールアドレス
アプリケーションのホームページ	https://example.azurestaticapps.net
承認済みドメイン	example.azurestaticapps.net

次にスコープを設定します。今回は、userinfo.profileを設定します。

概要では、設定の確認を行うことができます。

同意画面の設定後は、OAuthクライアントIDを選択して認証プロバイダを設定します。

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

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

設定後はGoogleのクライアント情報が表示されます。

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