다음을 통해 공유

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

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

예제

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

참고 항목

항상 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';
}

SAM 계정 이름 로그인 허용

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

  • userPrincipalName": A user principal name (UPN), such as user@contoso.com`.
  • samAccountName: 도메인 정규화된 SAM(Security Account Manager) 계정 이름(예: contoso\user 또는 contoso.com\user).

모든 사용자가 동일한 도메인에 있으며 사용자가 자신의 SAM 계정 이름만 알고 있는 시나리오를 고려합니다. 사용자가 자신의 SAM 계정 이름만 사용하여 로그인할 수 있도록 로그인 페이지를 업데이트할 수 있습니다.

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

// 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;
    };

}