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

아티클
02/13/2024

Windows Server 2012 R2 이상의 AD FS(Active Directory Federation Services)는 사용자 로그인 환경의 사용자 지정을 지원합니다. 대부분의 시나리오에서는 기본 제공 Windows PowerShell cmdlet을 사용하여 AD FS 로그인 페이지를 구성할 수 있습니다. 가능한 경우 사용자 지정을 위해 기본 제공 Windows PowerShell 명령을 사용하는 것이 좋습니다. 자세한 내용은 AD-FS 사용자 로그인 사용자 지정을 참조 하세요.

경우에 따라 AD FS와 함께 제공되는 PowerShell 명령을 사용하여 사용하도록 설정할 수 없는 로그인 환경을 제공해야 할 수 있습니다. AD FS와 함께 제공되는 onload.js 파일에 사용자 지정 코드를 추가하여 로그인 환경을 구성할 수 있습니다. 파일 코드는 모든 AD FS 페이지에서 실행됩니다.

고려 사항

AD FS 로그인 페이지 사용자 지정을 시작하기 전에 다음 중요한 고려 사항을 검토합니다.

Important

리디렉션 흐름에 영향을 주거나 AD FS에서 사용하는 프로토콜 매개 변수를 수정하는 사용자 지정 변경은 지원되지 않습니다.

onload.js 파일은 양식 기반 로그인 페이지, 홈 영역 검색 페이지 등을 비롯한 모든 AD FS 페이지에서 실행됩니다. 사용자 지정 코드가 의도한 대로만 실행되고 예기치 않게 실행되지 않도록 항상 확인합니다.
AD FS에는 기본값이라는 기본 제공 웹 테마가 함께 제공됩니다. 기본 웹 테마를 만드는 onload.js 콘텐츠는 수정할 수 없습니다. onload.js 파일을 업데이트하려면 AD FS 로그인 페이지에 대한 사용자 지정 웹 테마를 만들고 사용합니다. 자세한 내용은 AD-FS 사용자 로그인 사용자 지정을 참조 하세요.
기본 웹 테마의 원래 onload.js 파일에는 다양한 폼 팩터에 대한 페이지 렌더링을 처리하는 코드도 포함되어 있습니다. 권장되는 사용자 지정 방법은 사용자 지정 논리 코드를 기존 onload.js 파일에 추가하는 것입니다. 원래 onload.js 파일 콘텐츠를 수정하지 마세요.
HTML 요소를 참조하는 경우 요소에 대해 동작하기 전에 항상 요소의 존재에 대해 검사. 이 단계에서는 견고성을 제공하고 이 요소가 포함되지 않은 페이지에서 사용자 지정 논리가 실행되지 않도록 합니다. 기존 HTML 요소를 식별하려면 AD FS 로그인 페이지에서 HTML 원본을 확인합니다.
사용자 지정을 프로덕션 AD FS 서버로 이동하기 전에 대체 환경에서 사용자 지정의 유효성을 검사하고 테스트를 실행하는 것이 좋습니다. 이 단계에서는 유효성 검사 전에 최종 사용자를 사용자 지정에 노출할 가능성을 줄입니다.

사용자 지정 단계

다음 섹션에서는 AD FS 로그인 페이지에 대한 onload.js 파일 콘텐츠를 사용자 지정하는 단계를 제공합니다.

사용자 지정 웹 테마 만들기

onload.js 파일에 사용자 지정 논리를 추가하려면 첫 번째 단계는 사용자 지정 웹 테마를 만드는 것입니다. 빠른 방법은 기본 웹 테마를 내보낸 다음 원래 코드를 사용자 지정의 기준으로 사용하는 것입니다.

다음 cmdlet을 실행하여 기본 웹 테마를 복제하여 사용자 지정 웹 테마를 만듭니다.

New-AdfsWebTheme –Name custom –SourceName default

onload.js 파일 생성

다음 단계는 업데이트할 수 있는 onload.js 파일이 있도록 사용자 지정 웹 테마를 내보내는 것입니다.

다음 cmdlet을 실행하여 사용자 지정 웹 테마를 내보내고 onload.js 파일을 생성합니다.

Export-AdfsWebTheme –Name default –DirectoryPath c:\theme

onload.js 파일은 cmdlet에 지정된 디렉터리의 스크립트 폴더에 배치됩니다. 이 예제에서 지정한 폴더는 .입니다 c:\theme.

사용자 지정 추가

이제 onload.js 콘텐츠를 수정하고 시나리오에 대한 사용자 지정 논리 코드를 추가할 준비가 되었습니다. 멘션 onload.js 파일의 끝에 사용자 지정 코드를 추가해야 합니다.

일반적인 사용자 지정을 보여 주는 코드 조각은 다음 예제 섹션을 참조하세요.

대상 onload.js 파일 변경

사용자 지정을 추가한 후에는 원래 onload.js 파일이 아닌 onload.js 파일을 사용하도록 AD FS 웹 테마를 업데이트해야 합니다.

다음 cmdlet을 실행하여 onload.js 파일을 웹 테마 정의의 대상으로 설정합니다.

Windows Server 2016 이상에서 AD FS의 경우:

Set-AdfsWebTheme -TargetName custom -OnLoadScriptPath "c:\theme\script\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"}

AD FS에 사용자 지정 적용

마지막 단계는 사용자 지정을 AD FS 로그인 페이지에 적용하는 것입니다.

다음 cmdlet을 실행하여 사용자 지정으로 AD FS를 업데이트합니다.

Set-AdfsWebConfig -ActiveThemeName custom

예제

다음 예제에서는 onload.js 파일에 추가하여 AD FS 로그인 페이지를 구성할 수 있는 사용자 지정 코드를 제공합니다.

참고 항목

항상 onload.js 파일의 끝에 사용자 지정 코드를 추가합니다.

AD FS 양식 기반 로그인 페이지에는 사용자 입력 필드 위에 제목이 표시됩니다. 기본 제목 값은 "조직 계정으로 로그인"입니다.

onload.js 파일에 다음 코드를 추가하여 기본 문자열 값을 사용자 지정 문자열로 바꿉니다. 코드에서 매개 변수 값을 제목에 loginMessage.innerHTML 사용할 사용자 지정 문자열로 설정합니다.

// Sample code to change page title string

// Check if loginMessage element is present
var loginMessage = document.getElementById('loginMessage');
if (loginMessage)
{
       // If loginMessage element is present, change title to custom value
       loginMessage.innerHTML = 'Custom title string value';
}

AD FS 양식 기반 로그인 페이지는 기본적으로 두 가지 로그인 방법을 지원합니다.

userPrincipalName": A user principal name (UPN), such as user@contoso.com`.
samAccountName: SAM(do기본 정규화된 보안 계정 관리자) 계정 이름(예: contoso\user 또는 contoso.com\user.

모든 사용자가 동일한 작업을 수행하고기본 사용자가 SAM 계정 이름만 알고 있는 시나리오를 고려해 보세요. 사용자가 SAM 계정 이름만 사용하여 로그인할 수 있도록 로그인 페이지를 업데이트할 수 있습니다.

onload.js 파일에 다음 코드를 추가하여 SAM 계정에서 로그인을 사용하도록 설정합니다. 코드에서 매개 변수 값을 userNameValue 원하는 do기본 설정합니다.

// Sample code to enable user login from SAM account name only

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);

    // Update login method with desired domain value
    if (userName.value && !userName.value.match('[@\\\\]'))
    {
        var userNameValue = 'contoso.com\\' + userName.value;
        document.forms['loginForm'].UserName.value = userNameValue;
    }
    
    // Check for user name errors
    if (!userName.value) {
       u.setError(userName, e.userNameFormatError);
       return false;
    }

    // Check for password errors
    if (!password.value)
    {
        u.setError(password, e.passwordEmpty);
        return false;
    }

    // Update the form page 
    document.forms['loginForm'].submit();
    return false;
    };

}

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

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

고려 사항

사용자 지정 단계

사용자 지정 웹 테마 만들기

onload.js 파일 생성

사용자 지정 추가

대상 onload.js 파일 변경

AD FS에 사용자 지정 적용

예제

로그인 페이지 제목 문자열 변경

SAM 계정 이름 로그인 허용

관련 링크

추가 리소스