다음을 통해 공유

온라인 공급자에 대한 웹 인증 브로커 고려 사항(HTML)

  • 아티클

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

인증 공급자가 Windows 스토어 앱에서 사용할 인증 서비스를 설정할 때 고려해야 할 특정 세부 정보가 있습니다. 또한 기본 태그를 사용하여 Windows 스토어 앱의 사용자에게 표시되는 웹 페이지를 사용자 지정할 수 있습니다.

온라인 인증 공급자에 대한 고려 사항

웹 인증 브로커는 Windows의 Internet Explorer 제공 시 사용된 것과 동일한 기술을 기반으로 합니다. 그러나 이 구성 요소의 특별한 용도로 인해 Internet Explorer의 일부 기능은 사용되지 않거나 특정 구성으로 잠겨 있습니다. 또한 웹 인증 브로커는 처리하는 페이지의 문제 해결을 도와주는 전용 이벤트 로깅 채널을 제공합니다.

Internet Explorer 표준 문서 모드

웹 인증 브로커는 모든 페이지를 특정 Windows 릴리스에 대한 IE 표준 모드로 표시합니다. 예를 들어 Windows 8에서 웹 인증 브로커는 페이지를 "IE10 표준 모드"로 표시합니다. Internet Explorer의 개발자 도구를 사용하여 각 문서 모드에서 페이지가 작동하는 방식을 확인할 수 있습니다. Internet Explorer 호환성에 대한 자세한 내용은 Internet Explorer에 대한 MSDN 항목을 참조하세요.

사용되지 않는 기능 및 잠긴 기능

Internet Explorer의 여러 기능은 완전히 사용되지 않거나, 운영 체제의 인터넷 옵션에서 변경할 수 없는 특정 값으로 잠겨 있습니다.

기능 상태
응용 프로그램 캐시 API("AppCache") 사용 안 함
링크 기록 사용 안 함
임시 파일 Enabled
쿠키 세션 쿠키는 사용됩니다. 영구적 쿠키는 허용되지만, 웹 인증 브로커가 SSO 모드에 있지 않은 경우 자동 정리됩니다. 자세한 내용은 Single Sign On 섹션을 참조하세요.
인덱스 DB 사용 안 함
DOM 저장소 사용 안 함
ActiveX 사용 안 함
파일 다운로드 사용 안 함

 

HTTPS 요구 사항

응용 프로그램이 온라인 공급자와 통신할 때 사용하는 첫 번째 URL은 HTTPS여야 합니다.

다양한 뷰 상태의 크기

Windows 8 앱은 다양한 크기의 앱, 세로나 가로 방향 또는 공유 참 등의 참 메뉴에 표시될 수 있습니다. 웹 인증 브로커가 표시되는 뷰에 따라 필요한 웹 페이지 작동 크기가 달라질 수 있습니다. 자세한 내용은 창 크기 및 화면에 맞게 크기 조정에 대한 지침 항목과 콘텐츠 공유에 대한 지침 항목을 참조하세요.

웹 페이지는 CSS 미디어 쿼리를 사용하여 필요한 작동 크기를 확인하고 적절하게 레이아웃됩니다. 그러나 여기에 문서화된 정확한 픽셀에 따라 페이지를 디자인해서는 안 되며 페이지가 다양한 크기에 맞게 확대/축소될 수 있어야 합니다. 이 문서에 지정된 크기는 이후 OS 버전에서 변경될 수 있습니다.

페이지의 할당된 크기에 정보가 모두 들어가지 않는 경우(예: 응용 프로그램이 요청하는 긴 사용 권한 목록), 웹 인증 브로커는 필요에 따라 사용자가 페이지를 스크롤할 수 있도록 스크롤 막대를 제공합니다. 터치 기반 장치용 손가락을 모아 확대/축소와 데스크톱 및 랩톱 PC용 Ctrl + 마우스 휠을 통해 확대/축소 기능도 제공됩니다.

다양한 크기 조정 인수를 테스트하려면 Microsoft Visual Studio Professional 2012에서 로드되고 다양한 뷰 크기를 시뮬레이트할 수 있는 웹 인증 브로커 SDK 샘플 앱을 사용합니다.

샘플 뷰

다음 예제에서는 웹 페이지 크기가 다음과 같은 경우의 웹 인증 브로커 UI를 보여 줍니다.

  • 너비: 260픽셀
  • 높이: 화면 높이(화면 해상도에 따라 다름)

웹 인증 브로커 UI는 화면 캡처의 오른쪽에만 표시됩니다.

씬 뷰의 웹 인증 브로커 UI 예제

참 메뉴 뷰

참 메뉴 뷰에서 웹 페이지 크기는 다음과 같습니다.

  • 너비: 566픽셀
  • 높이: 화면 높이(화면 해상도에 따라 다름)

다음 예제에서는 참 메뉴 뷰의 웹 인증 브로커 UI를 보여 줍니다.

참 메뉴 뷰의 웹 인증 브로커 UI 예제

파일 선택기 뷰

파일 선택기 뷰에서 웹 페이지 크기는 다음과 같습니다.

  • 너비: 566픽셀
  • 높이: 화면 높이(화면 해상도에 따라 다름)

다음 예제에서는 파일 선택기 뷰의 웹 인증 브로커 UI를 보여 줍니다.

파일 선택기 뷰의 웹 인증 브로커 UI 예제

기본적으로 새 창 없음

기본적으로 새 창을 여는 URL은 없으며, 웹 인증 브로커 창에 표시됩니다. window.open JavaScript 메서드, 하이퍼링크의 "target" 특성 또는 사용자가 Ctrl+클릭 메커니즘을 사용하여 새 창을 강제로 여는 경우가 여기에 포함됩니다. 이 규칙의 예외는 하이퍼링크의 대상 사용자 지정에 설명된 대로 웹 페이지를 통해 링크가 브라우저에서 탐색해도 안전한 것으로 선언된 경우입니다.

웹 인증 페이지 사용자 지정

웹 페이지는 웹 페이지에서 정의된 메타데이터 태그를 사용하여 제목, 아이콘 및 머리글 색으로 UI(사용자 인터페이스)를 사용자 지정합니다. 웹 개발자는 HTML <meta> 태그를 사용하여 웹 인증 브로커 UI에 공급자의 개성과 브랜드를 표시할 수 있습니다. 또한 개발자는 등록, 암호 복구 등 보다 복잡한 사용자 작업을 지정할 수 있습니다. 이 개념은 Windows Internet Explorer 9 및 Windows 7의 고정된 사이트 기능과 유사합니다.

웹 페이지 영역의 사용자 인터페이스 사용자 지정 외에도 웹 페이지는 Windows 8 컨트롤의 스타일을 이용해야 하고, 터치를 통해 사용 가능해야 하며, 해당하는 경우 브라우저에서 링크를 열 수 있도록 해야 합니다.

다음은 웹 인증 브로커 사용자 지정 모델을 이용한 웹 페이지 예제입니다. 웹 인증 브로커 사용자 인터페이스 요소

아이콘 사용자 지정

웹 페이지는 mswebdialog-logo 메타 태그를 사용하여 아이콘을 제공할 수 있습니다.

<meta name="mswebdialog-title" content="Contoso Social"/>

콘텐츠는 상대 또는 절대 페이지일 수 있는 URL입니다. URL 체계는 HTTP 또는 HTTPS일 수 있습니다. 파일 형식은 PNG 또는 JPG여야 합니다. 이미지 크기는 30x30 픽셀이어야 합니다. 이미지 크기가 다른 경우 운영 체제에서 30x30 공간에 맞게 크기를 줄이거나 늘립니다. 높은 해상도 화면에서 최대 140% 및 180%까지 확대할 때 이미지가 제대로 렌더링되도록 디자인해야 합니다. 다양한 배율 인수를 테스트하려면 Visual Studio 11에서 로드되고 디자인 모드의 장치 창을 사용하여 다양한 해상도와 배율 인수를 시뮬레이션할 수 있는 웹 인증 브로커 SDK 샘플 앱을 사용합니다.

제목 텍스트 사용자 지정

웹 페이지는 mswebdialog-title 메타 태그를 사용하여 제목을 제공할 수 있습니다.

<meta name="mswebdialog-title" content="Contoso Social"/>

제목은 짧고 공급자 브랜드(예: Contoso)를 반영해야 합니다.

머리글 색 사용자 지정

웹 페이지는 브랜드 ID를 나타내고 mswebdialog-header-color 메타 태그를 사용하여 대화 상자의 머리글에 사용할 색을 제공할 수 있습니다.

<meta name="mswebdialog-header-color" content="#1267DF"/>

색은 여기서 지정한 임의 값일 수 있습니다. 그러나 웹 인증 브로커는 알파 채널 값을 모두 무시합니다. 일반적으로 페이지에서 사용된 색과 구체적으로 이 색을 지정하여 공급자의 Windows 8 앱(해당 앱이 있는 경우)에서 사용된 것과 동일한 색을 따르는 것이 좋습니다.

참고  META 태그를 구문 분석하고 나면 아이콘과 색이 클라이언트에 서버별로 캐시됩니다. 변경 내용을 적용하려면 UI를 시작하기 전에 클라이언트 캐시를 지워야 합니다. 이렇게 하려면 다음 레지스트리 설정을 수정합니다.

 

// Registry location under HKLM used for setting various AuthHost parameters.
#define AUTH_HOST_LOCAL_MACHINE_REGPATH \
    L"SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Image File Execution Options\\authhost.exe"
// MaxAge to use for downloading logo images
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_REG_VALUE_NAME \
    L"LogoImageMaxAgeSeconds"
// 24 hours
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_DEFAULT        \
    (24 * 60 * 60)

다운로드한 아이콘은 24시간 동안 다시 가져오지 않습니다. 로고 이미지로 테스트하려면 위의 reg 키를 더 작은 값으로 설정합니다.

웹 페이지 사용자 지정

웹 페이지의 UI 사용자 지정 외에도, 개발자는 전체 Windows 8 환경에 매끄럽게 통합되는 웹 페이지를 만들어야 합니다. 이렇게 하려면 권장 스타일을 사용하고, 터치 사용 장치에서 웹 페이지가 제대로 작동하는지 확인하고, 웹 브라우저에서 특정 웹 페이지를 열어야 합니다.

  • 스타일 지정

    여기서 권장된 스타일 지정을 사용하여 웹 인증 브로커 웹 페이지와 Windows 8의 다른 UI 구성 요소에서 일관된 사용자 환경을 만드는 것이 좋습니다. 웹 페이지는 흰색 배경을 사용해야 하며 테두리가 없어야 합니다. 로그인, 취소 등의 단추는 오른쪽 맨 아래에 있어야 하고 머리글과 동일한 색을 사용해야 합니다. 마지막으로, 웹 인증 브로커는 뒤로 단추를 제공하므로 웹 페이지에서 취소 단추를 완전히 제거하는 것이 좋습니다.

  • 터치 사용

    터치 기반 사용자 조작을 고려하여 웹 페이지를 디자인해야 합니다. Windows 8의 터치용 디자인에 대한 자세한 내용은 터치 조작 디자인 항목을 참조하세요.

  • 하이퍼링크의 대상 사용자 지정

    웹 인증 브로커는 로그온, OAuth 권한 부여 페이지 등 단일 사용자 작업이 필요한 웹 페이지를 제공하는 데 유용합니다. 그러나 계정 만들기, 분실 또는 잊어버린 암호 복구, 개인 정보 취급 방침 표시 등 보다 복잡한 사용자 흐름의 경우 사용자가 흐름을 이해하고 완료하는 데 시간이 걸리므로 전체 탐색 및 검색을 지원하기 위해 사용자의 기본 브라우저에서 해당 페이지를 시작하는 것이 좋습니다. 웹 인증 브로커는 기본적으로 웹 페이지에서 새 브라우저 창을 여는 것을 허용하지 않습니다(자세한 내용은 기본적으로 새 창 없음 섹션 참조). 그러나 웹 페이지에서 메타 태그 mswebdialog-newwindowurl을 사용하여 브라우저에서 열리는 URL을 선언할 수 있습니다.

    mswebdialog-newwindowurl을 통해 웹 페이지는 target 특성이나 window.open() 메서드를 사용하여 웹 인증 브로커가 새 창에서 URL을 열 것인지 확인하는 메시지가 표시될 때마다 일치(왼쪽 문자열 일치)에 사용할 URL의 전체 또는 일부를 지정할 수 있습니다. 일치 항목이 있으면 URL이 사용자의 기본 브라우저에서 열립니다. 일치 항목이 없으면 웹 인증 브로커가 해당 URL로 이동합니다(기본 동작). 예제:<meta name="mswebdialog-newwindowurl" content="https://www.contoso.com/privacy"/>

    이 메타 태그의 경우 웹 인증 브로커가 브라우저에서 https://www.contoso.com/privacy/policy.html을 열지만 직접 https://www.contoso.com/termsofuse.html로 이동합니다. 새 창에서 열지 않는 링크(예: target 특성이나 window.open() 메서드를 사용하지 않는 링크)는 이 메타 태그의 영향을 받지 않습니다. 콘텐츠는 상대 또는 절대 페이지일 수 있는 URL입니다. URL 체계는 HTTP 또는 HTTPS일 수 있습니다. 개인 정보 취급 방침, 등록 양식 등 핵심 사용자 흐름에 포함되지 않는 모든 링크를 처리할 mswebdialog-newwindowurl 메타 태그를 정의해야 합니다. 타사 인증 공급자(예: OpenID 공급자)를 사용한 로그인을 지원하는 경우 이러한 조작을 웹 인증 브로커 내에 유지해야 합니다. 페이지의 모든 링크를 브라우저에서 안전하게 열 수 있게 하려면 별표 구문을 사용합니다(예: <meta name="mswebdialog-newwindowurl" content="*"/>). "*"는 단독으로만 사용할 수 있으며 다른 URL과 함께 사용할 수 없습니다. 예를 들어 "https://www.contoso.com/*"는 올바른 구문이 아닙니다.

모든 메타 태그에 적용되는 규칙

웹 인증 브로커가 메타 태그를 처리하는 경우 다음 규칙이 적용됩니다.

  • 다른 콘텐츠가 포함된 동일한 이름의 다른 메타 태그가 발견되지 않으면 메타 태그의 영향이 동일한 두 번째 수준 도메인(예: contoso.com) 아래의 모든 페이지에 지속됩니다.
  • 동일한 페이지에서 이름이 같은 메타 태그가 여러 개 발견되면 웹 인증 브로커는 메타 태그 중 하나만 선택하고 나머지는 무시합니다. 선택되는 특정 메타 태그는 정의되지 않습니다. 참고  동일한 페이지에서 여러 인스턴스를 허용하는 mswebdialog-newwindowurl 메타 태그에는 이 규칙이 적용되지 않습니다.  

관련 항목

웹 인증 브로커

웹 인증 브로커 샘플

Windows.Security.Authentication.Web