初めまして、新卒1年目の伊藤です。
今回は、新卒研修にてGoogleによるSSO(シングルサインオン)を持つAzure Static Web Appsのアプリを作成したため、その方法をまとめていきます。
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とクライアントシークレットの値を適用します。

動作確認
Webアプリにアクセスします。初回はGoogleのログインが求められます。

ログイン時には、同意画面が表示されます。

Webアプリの画面が表示されました。

組織外のアカウントでログインしようとすると、組織内でのみ利用可能となっていることを確認できます。

まとめ
Azure Static Web Appsを使用することでGoogleによるSSOを持つWebアプリを簡単に作成することができました。
少しでも参考になれば幸いです。
参考
https://learn.microsoft.com/ja-jp/azure/static-web-apps/configuration
https://learn.microsoft.com/ja-jp/azure/app-service/configure-authentication-provider-google
https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid?hl=ja