Azure AD B2C를 사용하여 샘플 단일 페이지 애플리케이션에서 인증 구성

이 문서에서는 샘플 JavaScript 단일 페이지 애플리케이션(SPA)을 사용하여 Azure Active Directory B2C(Azure AD B2C) 인증을 SPA에 추가하는 방법을 설명합니다.

개요

OIDC(OpenID Connect)는 OAuth 2.0을 기반으로 하는 인증 프로토콜입니다. 이를 사용하여 사용자를 애플리케이션에 안전하게 로그인할 수 있습니다. 이 SPA 샘플은 MSAL.js 및 OIDC PKCE 흐름을 사용합니다. MSAL.js는 SPA에 인증 및 권한 부여 지원을 추가하는 것을 간소화하는 Microsoft 제공 라이브러리입니다.

로그인 흐름

로그인 흐름에 포함되는 단계는 다음과 같습니다.

1. 사용자는 웹앱으로 이동하여 로그인을 선택합니다.
2. 앱은 인증 요청을 시작하고 사용자를 Azure AD B2C로 리디렉션합니다.
3. 사용자가 등록하거나 로그인 하고 암호를 다시 설정합니다. 또는 소셜 계정으로 로그인할 수 있습니다.
4. 사용자가 로그인하면 Azure AD B2C는 앱에 인증 코드를 반환합니다.
5. 단일 페이지 애플리케이션은 ID 토큰의 유효성을 검사하고 클레임을 읽고 사용자가 보호된 리소스 및 API를 호출할 수 있도록 합니다.

앱 등록 개요

앱이 Azure AD B2C로 로그인하고 웹 API를 호출할 수 있도록 하려면 Azure AD B2C 디렉터리에 두 개의 애플리케이션을 등록합니다.

• 웹 애플리케이션 등록을 사용하면 앱이 Azure AD B2C로 로그인할 수 있습니다. 등록하는 동안 리디렉션 URI를 지정합니다. 리디렉션 URI는 Azure AD B2C에 대한 인증이 완료된 후 사용자가 Azure AD B2C에 의해 리디렉션되는 엔드포인트입니다. 앱 등록 프로세스는 앱을 고유하게 식별하는 클라이언트 ID라고도 하는 애플리케이션 ID를 생성합니다.

• 웹 API 등록을 사용하면 앱에서 보안 웹 API를 호출할 수 있습니다. 등록에는 웹 API 범위가 포함됩니다. 범위는 웹 API와 같은 보호된 리소스에 대한 권한을 관리하는 방법을 제공합니다. 웹 API 범위에 웹 애플리케이션 권한을 부여합니다. 액세스 토큰을 요청할 때 앱에서 요청의 범위 매개 변수에서 원하는 권한을 지정합니다.

앱 아키텍처 및 등록은 다음 다이어그램에 설명되어 있습니다.

웹 API 호출

인증이 완료되면 사용자는 보호된 웹 API를 호출하는 앱과 상호 작용합니다. 웹 API는 전달자 토큰 인증을 사용합니다. 전달자 토큰은 앱이 Azure AD B2C에서 가져온 액세스 토큰입니다. 앱은 HTTPS 요청의 인증 헤더에 토큰을 전달합니다.

Authorization: Bearer <access token>

액세스 토큰의 범위가 웹 API의 범위와 일치하지 않는 경우 인증 라이브러리는 올바른 범위의 새 액세스 토큰을 얻게 됩니다.

로그아웃 흐름

로그아웃 흐름에는 다음 단계가 포함됩니다.

1. 앱에서 사용자가 로그아웃합니다.
2. 앱은 세션 개체를 지우고 인증 라이브러리는 해당 토큰 캐시를 지웁니다.
3. 앱은 사용자를 Azure AD B2C 로그아웃 엔드포인트로 이동하여 Azure AD B2C 세션을 종료합니다.
4. 사용자는 앱으로 다시 리디렉션됩니다.

필수 조건

실행 중인 컴퓨터:

• Visual Studio Code 또는 다른 코드 편집기입니다.
• Node.js 런타임

1단계: 사용자 흐름 구성

사용자가 앱에 로그인하려고 하면 앱은 사용자 흐름을 통해 권한 부여 엔드포인트에 대한 인증 요청을 시작합니다. 사용자 흐름은 사용자 환경을 정의하고 제어합니다. 사용자가 사용자 흐름을 완료한 후 Azure AD B2C는 토큰을 생성한 다음 사용자를 애플리케이션으로 다시 리디렉션합니다.

아직 없는 경우 사용자 흐름 또는 사용자 지정 정책을 만듭니다. 다음과 같이 3개의 개별 사용자 흐름을 만드는 단계를 반복합니다.

• 결합된 로그인 및 등록 사용자 흐름(예: susi). 이 사용자 흐름은 암호를 잊으셨나요? 환경도 지원합니다.
• 프로필 편집 사용자 흐름(예: edit_profile).
• 암호 재설정 사용자 흐름(예: reset_password).

Azure AD B2C는 사용자 흐름 이름 앞에 B2C_1_를 추가합니다. 예를 들어 susi은 B2C_1_susi이 됩니다.

2단계: SPA 및 API 등록

이 단계에서는 SPA 및 웹 API 애플리케이션 등록을 만들고 웹 API의 범위를 지정합니다.

2.1단계: 웹 API 애플리케이션 등록

웹 API 앱 등록(앱 ID: 2)을 만들려면 다음 단계를 수행합니다.

1. Azure Portal에 로그인합니다.

2. Azure AD B2C 테넌트가 포함된 디렉터리를 사용하고 있는지 확인합니다. 포털 도구 모음에서 디렉터리 + 구독 아이콘을 선택합니다.

3. 포털 설정 | 디렉터리 + 구독 페이지의 디렉터리 이름 목록에서 Azure AD B2C 디렉터리를 찾은 다음, 전환을 선택합니다.

4. Azure Portal에서 Azure AD B2C를 검색하고 선택합니다.

5. 앱 등록을 선택한 다음, 새 등록을 선택합니다.

6. 이름으로 애플리케이션의 이름(예: my-api1)을 입력합니다. 리디렉션 URI 및 지원되는 계정 유형의 기본값은 그대로 둡니다.

7. 등록을 선택합니다.

8. 앱 등록이 완료되면 개요를 선택합니다.

9. 웹 애플리케이션을 구성할 때 나중에 사용할 수 있는 애플리케이션(클라이언트) ID 값을 기록합니다.

   

2.2단계: 범위 구성

1. 사용자가 만든 my-api1 애플리케이션(앱 ID: 2)을 선택하여 개요 페이지를 엽니다.

2. 관리에서 API 표시를 선택합니다.

3. 애플리케이션 ID URI 옆에 있는 설정 링크를 선택합니다. 기본값(GUID)을 고유한 이름(예: tasks-api)으로 바꾼 다음, 저장을 선택합니다.

   웹 애플리케이션이 웹 API에 대한 액세스 토큰을 요청하는 경우 이 URI를 API에 대해 정의하는 각 범위에 대한 접두사로 추가해야 합니다.

4. 이 API에서 정의한 범위에서 범위 추가를 선택합니다.

5. API에 대한 읽기 액세스를 정의하는 범위를 만들려면 다음을 수행합니다.

   1. 범위 이름에 tasks.read를 입력합니다.
   2. 관리 동의 표시 이름을 보려면 작업 API에 대한 읽기 액세스를 입력합니다.
   3. 관리 동의 설명을 보려면 작업 API에 대한 읽기 허용 액세스를 입력합니다.

6. 범위 추가를 선택합니다.

7. 범위 추가를 선택한 다음, API에 대한 쓰기 액세스를 정의하는 범위를 추가합니다.

   1. 범위 이름으로 tasks.write를 입력합니다.
   2. 관리자 동의 표시 이름으로 작업 API에 대한 쓰기 권한을 입력합니다.
   3. 관리 동의 설명을 보려면 작업 API에 대한 쓰기 허용 액세스를 입력합니다.

8. 범위 추가를 선택합니다.

2.3단계: SPA 등록

SPA 등록을 만들려면 다음 단계를 따릅니다.

1. Azure Portal에 로그인합니다.
2. 여러 테넌트에 액세스할 수 있는 경우 맨 위 메뉴에서 설정 아이콘을 선택하여 디렉터리 + 구독 메뉴에서 Azure AD B2C 테넌트로 전환합니다.
3. Azure AD B2C를 검색하고 선택합니다.
4. 앱 등록을 선택한 다음, 새 등록을 선택합니다.
5. 애플리케이션의 이름 (예 : MyApp)을 입력합니다.
6. 지원되는 계정 유형 아래에서 모든 ID 공급자 또는 조직 디렉터리의 계정(사용자 흐름에서 사용자를 인증하는 용도) 을 선택합니다.
7. 리디렉션 URI에서 SPA(단일 페이지 애플리케이션)를 선택한 다음, URL 텍스트 상자에 http://localhost:6420을 입력합니다.
8. 사용 권한에서 openid 및 오프라인 액세스 권한 검사 상자에 대한 관리자 동의 부여를 선택합니다.
9. 등록을 선택합니다.

웹 애플리케이션을 구성할 때 나중에 사용할 애플리케이션(클라이언트) ID를 기록합니다.

2.4단계: 암시적 허용 흐름 사용

고유의 환경에서 SPA 앱이 MSAL.js 1.3 이하 및 암시적 허용 흐름을 사용하거나 사용자 흐름 또는 사용자 지정 정책을 테스트하기 위해 https://jwt.ms/ 앱을 구성하는 경우 앱 등록에서 암시적 허용 흐름을 사용하도록 설정해야 합니다.

1. 왼쪽 메뉴의 관리 아래에서 인증을 선택합니다.

2. 암시적 허용 및 하이브리드 흐름에서 액세스 토큰(암시적 흐름에 사용) 및 D 토큰(암시적 및 하이브리드 흐름에 사용) 확인란을 모두 선택합니다.

3. 저장을 선택합니다.

앱에서 MSAL.js 2.0 이상을 사용하는 경우 MSAL.js 2.0+에서 PKCE를 통한 인증 코드 흐름을 지원하므로 암시적 흐름 부여를 사용하도록 설정하지 마세요. 이 문서의 SPA 앱은 PKCE 흐름을 사용하므로 암시적 허용 흐름을 사용하도록 설정할 필요가 없습니다.

2.5단계: 권한 부여

앱(앱 ID: 1) 권한을 부여하려면 다음 단계를 수행합니다.

1. 앱 등록 선택한 다음, 만든 앱(앱 ID: 1)을 선택합니다.

2. 관리 아래에서 API 권한을 선택합니다.

3. 구성된 사용 권한 아래에서 권한 추가를 선택합니다.

4. 내 API 탭을 선택합니다.

5. 웹 애플리케이션에 액세스 권한을 부여해야 하는 API(앱 ID: 2)를 선택합니다. 예를 들어 my-api1을 입력합니다.

6. 사용 권한에서 작업을 확장한 다음 이전에 정의한 범위(예: tasks.read 및 tasks.write)를 선택합니다.

7. 권한 추가를 선택합니다.

8. <테넌트 이름에 대한 관리자 동의 부여>를 선택합니다.

9. 예를 선택합니다.

10. 새로 고침을 선택한 다음, 두 범위 모두 상태에 ...에 대해 허용됨이 표시되는지 확인합니다.

11. 구성된 사용 권한 목록에서 범위를 선택한 다음 범위 전체 이름을 복사합니다.

    

3단계: SPA 샘플 코드 가져오기

이 샘플은 단일 페이지 애플리케이션에서 사용자 가입 및 로그인에 Azure AD B2C를 사용하는 방법을 보여줍니다. 그런 다음, 앱은 액세스 토큰을 획득하고 보호된 웹 API를 호출합니다.

SPA 샘플 코드를 얻으려면 다음 중 하나를 수행할 수 있습니다.

• zip 파일을 다운로드합니다.

• 다음 명령을 실행하여 GitHub에서 샘플을 복제합니다.

  git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
  

3.1단계: SPA 샘플 업데이트

이제 SPA 샘플을 얻었으므로 Azure AD B2C 및 웹 API 값으로 코드를 업데이트합니다. 샘플 폴더의 App 폴더 아래에서 다음 표에 나열된 JavaScript 파일을 연 다음 해당 값으로 업데이트합니다.

파일	키	값
authConfig.js	clientId	2.3단계의 SPA ID입니다.
policies.js	이름	사용자 흐름 또는 1단계에서 만든 사용자 지정 정책입니다.
policies.js	인증 기관	Azure AD B2C 사용자 흐름 또는 사용자 지정 정책 인증 기관(예: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>) your-sign-in-sign-up-policy를 사용자 흐름 또는 1단계에서 만든 사용자 지정 정책으로 바꿉니다.
policies.js	authorityDomain	Azure AD B2C 인증 기관 도메인(예: <your-tenant-name>.b2clogin.com)
apiConfig.js	b2cScopes	2.2단계에서 만든 웹 API 범위입니다(예: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]).
apiConfig.js	webApi	웹 API의 URL입니다 http://localhost:5000/hello.

결과 코드는 다음 샘플과 유사합니다.

authConfig.js:

const msalConfig = {
    auth: {
      clientId: "<your-MyApp-application-ID>", // This is the ONLY mandatory field; everything else is optional.
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
      knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
      redirectUri: "http://localhost:6420", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
    },
    cache: {
      cacheLocation: "sessionStorage",  
      storeAuthStateInCookie: false, 
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          if (containsPii) {
            return;
          }
          switch (level) {
            case msal.LogLevel.Error:
              console.error(message);
              return;
            case msal.LogLevel.Info:
              console.info(message);
              return;
            case msal.LogLevel.Verbose:
              console.debug(message);
              return;
            case msal.LogLevel.Warning:
              console.warn(message);
              return;
          }
        }
      }
    }
  };
};

const loginRequest = {
  scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
  scopes: [...apiConfig.b2cScopes],  // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
  forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

policies.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/hello"
};

4단계: 웹 API 샘플 코드 가져오기

이제 웹 API가 등록되고 해당 범위를 정의했으므로 Azure AD B2C 테넌트에서 작동하도록 웹 API 코드를 구성합니다.

웹 API 샘플 코드를 얻으려면 다음 중 하나를 수행합니다.

• *.zip 파일을 다운로드합니다.

• 다음 명령을 실행하여 GitHub에서 샘플 Web API 프로젝트를 복제합니다.

  git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git
  

• GitHub에서 Azure-Samples/active-directory-b2c-javascript-nodejs-webapi 프로젝트로 직접 갈 수도 있습니다.

4.1단계: 웹 API 업데이트

1. 코드 편집기 에서 config.json 파일을 엽니다.

2. 이전에 만든 애플리케이션 등록을 사용하여 변수 값을 수정합니다. 그리고 필수 구성 요소의 일부로 만든 사용자 흐름으로 업데이트 policyName 합니다(예 : b2c_1_susi).

   "credentials": {
       "tenantName": "<your-tenant-name>",
       "clientID": "<your-webapi-application-ID>"
   },
   "policies": {
       "policyName": "b2c_1_susi"
   },
   "resource": {
       "scope": ["tasks.read"] 
   },
   

4.2단계: CORS를 사용하도록 설정

단일 페이지 애플리케이션이 Node.js 웹 API를 호출할 수 있도록 하려면 웹 API에서 CORS(원본 간 리소스 공유)를 사용하도록 설정해야 합니다. 프로덕션 애플리케이션에서는 요청을 만드는 도메인에 주의해야 합니다. 이 예제에서는 모든 도메인의 요청을 허용합니다.

CORS를 사용하도록 설정하려면 다음 미들웨어를 사용합니다. 다운로드한 Node.js 웹 API 코드 샘플에서 이미 index.js 파일에 추가되었습니다.

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

5단계: SPA 및 웹 API 실행

이제 API에 대한 단일 페이지 애플리케이션의 범위가 지정된 액세스를 테스트할 준비가 되었습니다. 로컬 컴퓨터에서 Node.js 웹 API 및 샘플 JavaScript 단일 페이지 애플리케이션을 모두 실행합니다. 그런 다음, 단일 페이지 애플리케이션에 로그인하고 API 호출 단추를 선택하여 보호된 API에 대한 요청을 시작합니다.

Node.js 웹 API 실행

1. 콘솔 창을 열고 Node.js 웹 API 샘플이 포함된 디렉터리로 변경합니다. 예시:

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. 다음 명령을 실행합니다.

   npm install && npm update
   node index.js
   

   콘솔 창에는 애플리케이션이 호스트되는 포트 번호가 표시됩니다.

   Listening on port 5000...
   

단일 페이지 앱 실행

1. 다른 콘솔 창을 열고 JavaScript SPA 샘플이 포함된 디렉터리로 변경합니다. 예시:

   cd ms-identity-b2c-javascript-spa
   

2. 다음 명령을 실행합니다.

   npm install && npm update
   npm start
   

   콘솔 창에는 애플리케이션이 호스트되는 포트 번호가 표시됩니다.

   Listening on port 6420...
   

3. 애플리케이션을 보려면 브라우저에서 http://localhost:6420으로 이동합니다.

   

4. 등록 또는 로그인 프로세스를 완료합니다. 성공적으로 로그인되면, "User <your username> logged in" 메시지가 표시됩니다.

5. 호출 API 단추를 선택합니다. SPA는 로그인한 사용자의 표시 이름을 반환하는 보호된 웹 API에 요청의 액세스 토큰을 보냅니다.

   

응용 프로그램 배포

프로덕션 애플리케이션에서 앱 등록 리디렉션 URI는 일반적으로 앱이 실행되는 공개적으로 액세스할 수 있는 엔드포인트입니다(예: https://contoso.com/signin-oidc.).

언제든지 등록된 애플리케이션에서 리디렉션 URI를 추가하고 수정할 수 있습니다. 리디렉션 URI에는 다음 제한 사항이 적용됩니다.

• 회신 URL은 스키마 https로 시작해야 합니다.
• 회신 URL은 대/소문자를 구분합니다. 해당 사례는 실행 중인 애플리케이션의 URL 경로에 대한 대/소문자와 일치해야 합니다.

다음 단계

이 문서에서 설명하는 개념에 대한 자세한 내용은 다음을 참조하세요.

• 코드 샘플에 대해 자세히 알아봅니다.
• 사용자 고유의 SPA에서 인증을 사용하도록 설정합니다.
• SPA에서 인증 옵션 구성
• 고유 웹 API에서 인증을 사용하도록 설정