Azure Active Directory B2C에서 OAuth 2.0 암시적 흐름을 사용하여 단일 페이지 응용 프로그램 로그인

많은 최신 애플리케이션에는 주로 JavaScript로 작성된 SPA(단일 페이지 앱) 프런트 엔드가 있습니다. 종종 앱은 React, Angular 또는 Vue.js와 같은 프레임워크를 사용하여 작성됩니다. 주로 브라우저에서 실행되는 SPA 및 기타 JavaScript 앱에는 인증에 대한 몇 가지 추가 문제가 있습니다.

• 이러한 앱의 보안 특성은 기존 서버 기반 웹 애플리케이션과 다릅니다.

• 많은 권한 부여 서버 및 ID 공급자는 CORS(원본 간 리소스 공유) 요청을 지원하지 않습니다.

• 앱에서 전체 페이지 브라우저 리디렉션은 사용자 환경을 침해할 수 있습니다.

MSAL.js 1.x와 같은 일부 프레임워크는 암시적 권한 부여 흐름만 지원합니다. 이러한 경우 Azure AD B2C(Azure Active Directory B2C)는 OAuth 2.0 권한 부여 암시적 권한 부여 흐름을 지원합니다. 흐름은 OAuth 2.0 사양의 섹션 4.2에 설명되어 있습니다. 암시적 흐름에서 앱은 서버 간 교환 없이 Azure AD B2C 권한 부여 엔드포인트에서 직접 토큰을 받습니다. 모든 인증 로직 및 세션 처리는 페이지 리디렉션 또는 팝업 상자를 사용하여 JavaScript 클라이언트에서 완전히 수행됩니다.

Azure AD B2C는 표준 OAuth 2.0 암시적 흐름을 단순한 인증 및 권한 부여 이상으로 확장합니다. Azure AD B2C에는 정책 매개 변수가 도입되었습니다. 정책 매개 변수를 사용하면 OAuth 2.0을 사용하여 등록, 로그인 및 프로필 관리 사용자 흐름과 같은 정책을 앱에 추가할 수 있습니다. 이 문서의 HTTP 요청 예제에서는 설명을 위해 {tenant}.onmicrosoft.com 를 사용합니다. {tenant} 있는 경우 로 바꿉니다. 또한 사용자 흐름을 만들어야 합니다.

다음 그림을 사용하여 암시적 로그인 흐름을 보여 줍니다. 각 단계는 이 문서의 뒷부분에 자세히 설명되어 있습니다.

인증 요청 보내기

웹 애플리케이션이 사용자를 인증하고 사용자 흐름을 실행해야 하는 경우 사용자를 Azure AD B2C의 /authorize 엔드포인트로 보냅니다. 사용자는 사용자 흐름에 따라 작업을 수행합니다.

이 요청에서 클라이언트는 매개 변수와 실행할 사용자 흐름에서 scope 사용자로부터 획득해야 하는 권한을 나타냅니다. 요청의 작동 방식을 파악하려면 요청을 브라우저에 붙여넣고 실행해 보세요. 교체:

• {tenant} 을 Azure AD B2C 테넌트의 이름으로 바꿉니다.

• 00001111-aaaa-2222-bbbb-3333cccc4444 을 테넌트에 등록한 애플리케이션의 앱 ID로 바꿉니다.

• {policy} 을 테넌트에서 만든 정책의 이름(예: b2c_1_sign_in)으로 바꿉니다.

GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize?
client_id=00001111-aaaa-2222-bbbb-3333cccc4444
&response_type=id_token+token
&redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F
&response_mode=fragment
&scope=openid%20offline_access
&state=arbitrary_data_you_can_receive_in_the_response
&nonce=12345

HTTP GET 요청의 매개 변수는 아래 표에 설명되어 있습니다.

이것은 흐름의 대화형 부분입니다. 사용자에게 정책의 워크플로를 완료하라는 메시지가 표시됩니다. 사용자는 사용자 이름과 암호를 입력하거나, 소셜 ID로 로그인하거나, 로컬 계정에 등록하거나, 기타 여러 단계를 수행해야 할 수 있습니다. 사용자 작업은 사용자 흐름이 정의되는 방식에 따라 달라집니다.

사용자가 사용자 흐름을 완료한 후 Azure AD B2C는 를 통해 redirect_uri앱에 대한 응답을 반환합니다. 매개 변수에 지정된 메서드를 response_mode 사용합니다. 응답은 실행된 사용자 흐름과 관계없이 각 사용자 작업 시나리오에 대해 정확히 동일합니다.

성공적인 응답

다음과 같이 사용되며 response_mode=fragmentresponse_type=id_token+token 가독성을 위해 줄 바꿈이 있는 성공적인 응답입니다.

GET https://aadb2cplayground.azurewebsites.net/#
access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&token_type=Bearer
&expires_in=3599
&scope="00001111-aaaa-2222-bbbb-3333cccc4444 offline_access",
&id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&state=arbitrary_data_you_sent_earlier

오류 응답

앱에서 적절하게 처리할 수 있도록 오류 응답을 리디렉션 URI로 보낼 수도 있습니다.

GET https://aadb2cplayground.azurewebsites.net/#
error=access_denied
&error_description=the+user+canceled+the+authentication
&state=arbitrary_data_you_can_receive_in_the_response

ID 토큰 유효성 검사

ID 토큰을 받는 것만으로는 사용자를 인증할 수 없습니다. ID 토큰의 서명의 유효성을 검사하고 앱의 요구 사항에 따라 토큰의 클레임을 확인합니다. Azure AD B2C는 JWT(JSON 웹 토큰) 및 공개 키 암호화를 사용하여 토큰에 서명하고 유효한지 확인합니다.

사용하려는 언어에 따라 JWT의 유효성을 검사하는 데 많은 오픈 소스 라이브러리를 사용할 수 있습니다. 사용자 고유의 유효성 검사 논리를 구현하는 대신 사용 가능한 오픈 소스 라이브러리를 탐색하는 것이 좋습니다. 이 문서의 정보를 사용하여 해당 라이브러리를 올바르게 사용하는 방법을 배울 수 있습니다.

Azure AD B2C에는 OpenID Connect 메타데이터 엔드포인트가 있습니다. 앱은 엔드포인트를 사용하여 런타임에 Azure AD B2C에 대한 정보를 가져올 수 있습니다. 이 정보에는 엔드포인트, 토큰 콘텐츠 및 토큰 서명 키가 포함됩니다. Azure AD B2C 테넌트의 각 사용자 흐름에 대한 JSON 메타데이터 문서가 있습니다. 예를 들어 테넌트에서 b2c_1_sign_in 명명된 fabrikamb2c.onmicrosoft.com 사용자 흐름에 대한 메타데이터 문서는 다음 위치에 있습니다.

https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_sign_in/v2.0/.well-known/openid-configuration

이 구성 문서의 속성 중 하나는 입니다 jwks_uri. 동일한 사용자 흐름에 대한 값은 다음과 같습니다.

https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_sign_in/discovery/v2.0/keys

ID 토큰에 서명하는 데 사용된 사용자 흐름(및 메타데이터를 가져올 위치)을 확인하려면 다음 옵션 중 하나를 사용할 수 있습니다.

• 사용자 흐름 이름은 의 acr클레임에 id_token 포함됩니다. ID 토큰에서 클레임을 구문 분석하는 방법에 대한 자세한 내용은 Azure AD B2C 토큰 참조를 참조하세요.

• 요청을 발행할 때 매개 변수의 값 state 에서 사용자 흐름을 인코딩합니다. 그런 다음, 매개 변수를 디코딩 state 하여 사용된 사용자 흐름을 확인합니다.

OpenID Connect 메타데이터 엔드포인트에서 메타데이터 문서를 가져온 후 이 엔드포인트에 있는 RSA-256 공개 키를 사용하여 ID 토큰의 서명을 확인할 수 있습니다. 지정된 시간에 이 엔드포인트에 여러 키가 나열될 수 있으며, 각 키는 로 식별됩니다 kid. 의 id_token 헤더에는 클레임도 포함되어 있습니다 kid . 이러한 키 중 ID 토큰에 서명하는 데 사용된 키를 나타냅니다. 토큰 유효성 검사에 대한 학습을 포함한 자세한 내용은 Azure AD B2C 토큰 참조를 참조하세요.

ID 토큰의 서명에 대한 유효성을 검사한 후 여러 클레임을 확인해야 합니다. 다음은 그 예입니다.

• nonce 토큰 재생 공격을 방지하기 위해 클레임의 유효성을 검사합니다. 해당 값은 로그인 요청에서 지정한 값이어야 합니다.

• 클레임의 aud 유효성을 검사하여 ID 토큰이 앱에 대해 발급되었는지 확인합니다. 해당 값은 앱의 애플리케이션 ID여야 합니다.

• 및 iat 클레임의 exp 유효성을 검사하여 ID 토큰이 만료되지 않았는지 확인합니다.

수행해야 하는 몇 가지 추가 유효성 검사는 OpenID Connect Core 사양에 자세히 설명되어 있습니다. 시나리오에 따라 추가 클레임의 유효성을 검사할 수도 있습니다. 몇 가지 일반적인 유효성 검사에는 다음이 포함됩니다.

• 사용자 또는 조직이 앱에 등록했는지 확인합니다.

• 사용자에게 적절한 권한 부여 및 권한이 있는지 확인합니다.

• Microsoft Entra 다단계 인증을 사용하는 것과 같이 특정 강도의 인증이 발생했는지 확인합니다.

ID 토큰의 클레임에 대한 자세한 내용은 Azure AD B2C 토큰 참조를 참조하세요.

ID 토큰의 유효성을 검사한 후 사용자와 세션을 시작할 수 있습니다. 앱에서 ID 토큰의 클레임을 사용하여 사용자에 대한 정보를 가져옵니다. 이 정보는 표시, 기록, 권한 부여 등에 사용할 수 있습니다.

액세스 토큰 가져오기

웹 앱에서 수행해야 하는 유일한 작업이 사용자 흐름을 실행하는 것인 경우 다음 몇 가지 섹션을 건너뛸 수 있습니다. 다음 섹션의 정보는 Azure AD B2C 자체로 보호되는 웹 API에 대해 인증된 호출을 수행해야 하는 웹앱에만 적용됩니다.

이제 사용자를 SPA에 로그인했으므로 Microsoft Entra ID로 보호되는 웹 API를 호출하기 위한 액세스 토큰을 가져올 수 있습니다. 응답 유형을 사용하여 token 토큰을 이미 받은 경우에도 이 메서드를 사용하여 사용자를 다시 로그인하도록 리디렉션하지 않고도 추가 리소스에 대한 토큰을 획득할 수 있습니다.

일반적인 웹 앱 흐름에서는 엔드포인트에 /token 요청을 수행합니다. 그러나 엔드포인트는 CORS 요청을 지원하지 않으므로 새로 고침 토큰을 가져오기 위해 AJAX 호출을 수행하는 것은 옵션이 아닙니다. 대신 숨겨진 HTML iframe 요소에서 암시적 흐름을 사용하여 다른 웹 API에 대한 새 토큰을 가져올 수 있습니다. 다음은 가독성을 위해 줄 바꿈이 있는 예입니다.

https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize?
client_id=00001111-aaaa-2222-bbbb-3333cccc4444
&response_type=token
&redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F
&scope=https%3A%2F%2Fapi.contoso.com%2Ftasks.read
&response_mode=fragment
&state=arbitrary_data_you_can_receive_in_the_response
&nonce=12345
&prompt=none

매개 변수를 설정하면 prompt=none 이 요청이 즉시 성공하거나 실패하고 애플리케이션으로 반환됩니다. 성공적인 응답은 매개 변수에 지정된 response_mode 메서드를 사용하여 리디렉션 URI를 통해 앱으로 전송됩니다.

성공적인 응답

를 사용하여 response_mode=fragment 성공적인 응답은 다음 예제와 같습니다.

GET https://aadb2cplayground.azurewebsites.net/#
access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&state=arbitrary_data_you_sent_earlier
&token_type=Bearer
&expires_in=3599
&scope=https%3A%2F%2Fapi.contoso.com%2Ftasks.read

오류 응답

오류 응답은 앱이 적절하게 처리할 수 있도록 리디렉션 URI로 보낼 수도 있습니다. 의 경우 prompt=none예상되는 오류는 다음 예제와 같습니다.

GET https://aadb2cplayground.azurewebsites.net/#
error=user_authentication_required
&error_description=the+request+could+not+be+completed+silently

iFrame 요청에 이러한 오류를 수신하면, 사용자는 새 토큰을 얻기 위해 대화형으로 다시 로그인해야 합니다.

토큰 새로 고침

ID 토큰과 액세스 토큰은 모두 짧은 기간 후에 만료됩니다. 앱은 이러한 토큰을 주기적으로 새로 고칠 준비가 되어 있어야 합니다. 암시적 흐름에서는 보안상의 이유로 새로 고침 토큰을 가져올 수 없습니다. 두 유형의 토큰을 새로 고치려면 숨겨진 HTML iframe 요소에서 암시적 흐름을 사용합니다. 권한 부여 요청에는 매개 변수를 prompt=none 포함합니다. 새 id_token 값을 받으려면 및 response_type=id_token및 매개 변수를 scope=openid 사용해야 nonce 합니다.

로그아웃 요청 보내기.

사용자를 앱에서 로그아웃시키려면 사용자를 Azure AD B2C의 로그아웃 엔드포인트로 리디렉션합니다. 그런 다음 앱에서 사용자의 세션을 지울 수 있습니다. 사용자를 리디렉션하지 않으면 Azure AD B2C와의 유효한 단일 Sign-On 세션이 있기 때문에 자격 증명을 다시 입력하지 않고도 앱에 다시 인증할 수 있습니다.

end_session_endpoint에 설명된 것과 동일한 OpenID Connect 메타데이터 문서에 나열된 로 사용자를 리디렉션하기만 하면 됩니다. 다음은 그 예입니다.

GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/logout?post_logout_redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F

다음 단계

코드 샘플: JavaScript SPA에서 Azure AD B2C를 사용하여 로그인을 참조하세요.