소개

이전 기사 "Azure Static Web Apps를 사용해 본 4 [Azure AD 연계]" 에서 Azure Static Web Apps와 Azure Active Directory와의 연동에 대해 썼습니다.
이번에는 OIDC(OpenID Connect)로 연계가 가능한 Azure AD B2C와의 연계를 해보겠습니다.

전제

OIDC와 협력하려면 Azure Static Web Apps는 Standard 플랜(Free 플랜에서는 불가)이어야 합니다.
참고 : Azure Static Web Apps에서 사용자 지정 인증

Azure AD B2C

Static Web Apps와 함께 작동하기 위해 Azure AD B2C는 다음을 수행합니다.

앱 등록

클라이언트 비밀 만들기

사용자 흐름 만들기

metadata URL 확인

앱 등록

B2C 메뉴에서 「앱 등록」-> 「신규 등록」을 클릭하여 애플리케이션을 등록합니다.
중요한 것은 리디렉션 URL로, 다음의 규칙으로 설정해, 등록 후 「애플리케이션 ID를 메모」해 둡니다. (기타 기본값)

https://{static web apps 도메인}/.auth/login/{후술하는 config 파일의 속성명}/callback

그런 다음 로그아웃용 URL을 함께 설정합니다.

https://{static web apps 도메인}/.auth/logout

클라이언트 비밀

등록한 애플리케이션을 선택하고 [인증서 및 비밀] -> [새 클라이언트 비밀]을 클릭하여 클라이언트 비밀을 등록합니다. 등록 후, 반드시 「값」을 메모해 둡니다.

사용자 흐름 만들기

이번에는 '사인업 및 로그인 추천'에서 만들었습니다.
속성 선택에서 「표시명」은 필수이므로 주의입니다. (ON하지 않으면 403페이지가 나오게 됩니다)

참고: 연습: Azure Active Directory B2C에서 사용자 흐름 및 사용자 지정 정책 만들기

metadata URL 확인

만든 사용자 흐름을 선택하고 "사용자 흐름 실행"에 표시되는 URL(metadata URL)을 기록해 둡니다.

Static Web Apps

메뉴에서 구성을 선택하고 '애플리케이션 설정'에 앞서 로컬에 저장해 둔 '애플리케이션 ID'와 '클라이언트 비밀'을 각각 등록하고 키를 로컬에 저장해 둡니다.

B2C_Client_Secret : 메모 된 클라이언트 비밀 값

B2C_ClientID : 메모해 둔 어플리케이션 ID의 값

※ 키(이름)는 임의로 OK입니다. 키 이름은 아래의 staticwebapp.config.json으로 설정합니다.

staticwebapp.config.json

Azure AD와의 연계와 마찬가지로 staticwebapp.config.json을 설정해야 합니다.

customOpenIdConnectProviders의 다음 요소(예: b2c)가 콜백 URL의 속성 값이 되므로 주의합니다.

clientIdSettingName : SWA에 설정된 응용 프로그램 ID의 키 이름

clientSecretSettingName : SWA에 설정된 클라이언트 비밀 키 이름

wellKnownOpenIdConfiguration: 저장한 metadata URL

nameClaimType :이 설정을 위해 B2C 측에서 표시 이름을 반드시 설정해야합니다.

{
  "$schema": "https://json.schemastore.org/staticwebapp.config.json" ,
  "auth": {
    "identityProviders": {
      "customOpenIdConnectProviders": {
        "b2c": {
          "registration": {
            "clientIdSettingName": "<SWAに設定したアプリケーションIDのキー名>",
            "clientCredential": {
              "clientSecretSettingName": "<SWAに設定したクライアントシークレットのキー名>"
            },
            "openIdConnectConfiguration": {
              "wellKnownOpenIdConfiguration": "<メモしておいたmetadata URL>"
            }
          },
          "login": {
            "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
            "scopes": ["openid", "profile"]
          }
        }
      }
    }
  },
  "routes": [
    {
      "route": "/*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/b2c",
      "statusCode": 302
    }
  }
}

동작 확인

안전하게 로그인할 수 없는 경우 로그인 페이지가 표시됩니다.



로그인하면 응용 프로그램 페이지가 표시됩니다.
(당연히 API 측도 인증되지 않은 경우 login으로 리디렉션됩니다)

요약

Azure Active Directory B2C와의 연계를 시도했지만 OIDC에서 연동할 수 있는 IDP와 연동할 수 있는 것은 큰 강점이라고 느꼈습니다.