AD FS 로그인 페이지의 고급 사용자 지정

아티클
09/29/2022
읽는 데 8분 걸림

Windows Server 2012 R2의 AD FS는 로그인 환경을 사용자 지정하기 위한 기본 제공 지원을 제공합니다. 대부분의 시나리오에서는 기본 제공 Windows PowerShell cmdlet이 모두 필요합니다. 가능하면 기본 제공 Windows PowerShell 명령을 사용하여 AD FS 로그인 환경에 대한 표준 요소를 사용자 지정하는 것이 좋습니다. 자세한 내용은 AD-FS 사용자 로그인 사용자 지정 을 참조하세요.

경우에 따라 AD FS 관리자는 AD FS와 함께 기본 제공 PowerShell 명령을 통해 불가능한 추가 로그인 환경을 제공할 수 있습니다. 특정 경우 관리자가 AD FS에서 제공하며 모든 AD FS 페이지에서 실행되는 onload.js 추가 논리를 추가하여 로그인 환경을 추가로 사용자 지정할 수 있습니다(아래 제공된 지침 내에서).

시작하기 전에 알아야 할 사항

리디렉션 흐름에 영향을 주거나 AD FS가 작동하는 프로토콜 매개 변수를 수정하는 변경은 지원되지 않습니다.
기본 웹 테마와 함께 제공되는 원래 onload.js 다양한 폼 팩터에 대한 페이지 렌더링을 처리하는 코드가 포함되어 있습니다. 원래 onload.js 콘텐츠를 수정하지 않고 사용자 지정 논리를 처리하는 기존 onload.js 코드를 추가하는 것이 좋습니다.
AD FS는 기본값이라고 하는 기본 제공 웹 테마와 함께 제공합니다. 기본 웹 테마의 onload.js 수정할 수 없습니다. onload.js 업데이트하려면 AD FS 로그인 페이지에 대한 사용자 지정 웹 테마를 만들고 사용해야 합니다. 사용자 지정 웹 테마를 만드는 방법에 대한 자세한 내용은 AD-FS 사용자 로그인 사용자 지정 을 참조하세요.
동일한 onload.js 모든 AD FS 페이지(예: 양식 기반 로그온 페이지, 홈 영역 검색 페이지 등)에서 실행됩니다. 스크립트의 코드가 디자인되고 예기치 않게 실행되지 않는 경우에만 실행되도록 해야 합니다.
HTML 요소를 참조할 때 요소에 대해 동작하기 전에 항상 요소의 존재 여부를 확인해야 합니다. 이렇게 하면 견고성이 제공되고 이 요소가 포함되지 않은 페이지에서 사용자 지정 논리가 실행되지 않습니다. AD FS 로그인 페이지에서 HTML 원본을 보기만 하면 기존 요소를 볼 수 있습니다.
프로덕션 AD FS 서버에 배포하기 전에 대체 환경에서 사용자 지정의 유효성을 검사하고 테스트하는 것이 좋습니다. 이렇게 하면 유효성 검사 전에 최종 사용자가 이러한 사용자 지정에 노출될 가능성이 줄어듭니다.

AD FS 서비스에 대한 onload.js 사용자 지정할 때 다음 단계를 사용합니다.

AD FS 서비스에 대한 onload.js 사용자 지정

onload.js 사용자 지정 논리를 추가하려면 먼저 사용자 지정 웹 테마를 만들어야 합니다. 기본적으로 제공되는 테마를 기본 테마라고 합니다. 기본 테마를 내보내 이를 사용하여 빠르게 시작할 수 있습니다. 다음 cmdlet은 기본 웹 테마를 복제하는 사용자 지정 웹 테마를 만듭니다.
```
New-AdfsWebTheme –Name custom –SourceName default
```
그런 다음 사용자 지정 또는 기본 웹 테마를 내보내 onload.js 파일을 가져올 수 있습니다. 웹 테마를 내보내려면 다음 cmdlet을 사용합니다.
```
Export-AdfsWebTheme –Name default –DirectoryPath c:\theme
```
위의 내보내기 cmdlet에서 지정한 디렉터리의 스크립트 폴더 아래에 onload.js 찾아 스크립트에 사용자 지정 논리를 추가합니다(아래 예제 섹션의 사용 사례 참조).
필요에 따라 onload.js 사용자 지정하는 데 필요한 수정을 합니다.
수정된 onload.js 테마를 업데이트합니다. 다음 cmdlet을 사용하여 업데이트 onload.js 사용자 지정 웹 테마에 적용합니다.

Windows Server 2012 R2의 AD FS:
```
Set-AdfsWebTheme -TargetName custom -AdditionalFileResource @{Uri='/adfs/portal/script/onload.js';path="c:\theme\script\onload.js"}
```
Windows Server 2016 AD FS의 경우:
```
Set-AdfsWebTheme -TargetName custom -OnLoadScriptPath "c:\theme\script\onload.js"
```
사용자 지정 웹 테마를 AD FS에 적용하려면 다음 cmdlet을 사용합니다.
```
Set-AdfsWebConfig -ActiveThemeName custom
```

추가 사용자 지정 예제

다음은 다양한 미세 조정을 위해 onload.js 추가된 사용자 지정 코드의 예입니다. 사용자 지정 코드를 추가할 때는 항상 사용자 지정 코드를 onload.js 맨 아래에 추가하세요.

기본 AD FS 양식 기반 로그인 페이지에는 사용자 입력 상자 위에 "조직 계정으로 로그인"이라는 제목이 있습니다.

이 문자열을 사용자 고유의 문자열로 바꾸려면 onload.js 다음 코드를 추가할 수 있습니다.

// Sample code to change "Sign in with organizational account" string.

// Check whether the loginMessage element is present on this page.
var loginMessage = document.getElementById('loginMessage');
if (loginMessage)
{
       // loginMessage element is present, modify its properties.
       loginMessage.innerHTML = 'Your company description text';
}

기본 AD FS 양식 기반 로그인 페이지는 UPN(사용자 계정 이름) 또는 도메인 정규화된 sam-account 이름(johndoe@contoso.comcontoso\johndoe 또는 contoso.com\johndoe)의 로그인 형식을 지원합니다. 모든 사용자가 동일한 도메인에서 온 경우 sam-account 이름에 대해서만 알고 있는 경우 사용자가 sam-account 이름만 사용하여 로그인할 수 있는 시나리오를 지원할 수 있습니다. 이 시나리오를 지원하기 위해 onload.js 다음 코드를 추가할 수 있습니다. 아래 예제의 "contoso.com" 도메인을 사용하려는 도메인으로 바꾸기만 하면 됩니다.

if (typeof Login != 'undefined'){
    Login.submitLoginRequest = function () {
    var u = new InputUtil();
    var e = new LoginErrors();
    var userName = document.getElementById(Login.userNameInput);
    var password = document.getElementById(Login.passwordInput);
    if (userName.value && !userName.value.match('[@\\\\]'))
    {
        var userNameValue = 'contoso.com\\' + userName.value;
        document.forms['loginForm'].UserName.value = userNameValue;
    }

    if (!userName.value) {
       u.setError(userName, e.userNameFormatError);
       return false;
    }

    if (!password.value)
    {
        u.setError(password, e.passwordEmpty);
        return false;
    }
    document.forms['loginForm'].submit();
    return false;
};
}

추가 참조

AD FS 사용자 로그인 사용자 지정