Avancerad anpassning av AD FS-inloggningssidor

Active Directory Federation Services (AD FS) i Windows Server 2012 R2 och senare stöder anpassning av användarinloggningsmiljön. I de flesta scenarier kan du använda de inbyggda Windows PowerShell-cmdletarna för att konfigurera AD FS-inloggningssidorna. Den rekommenderade metoden är att använda de inbyggda Windows PowerShell-kommandona för anpassning när det är möjligt. Mer information finns iAD-FS anpassning av användarinloggning.

Ibland kan du behöva tillhandahålla en inloggningsupplevelse som inte kan aktiveras med hjälp av PowerShell-kommandona som medföljer AD FS. Du kan konfigurera inloggningsupplevelsen genom att lägga till anpassad kod i denonload.js fil som medföljer AD FS. Filkoden körs på alla AD FS-sidor.

Considerations

Innan du börjar anpassa AD FS-inloggningssidor bör du läsa följande viktiga överväganden.

• Filen onload.js körs på alla AD FS-sidor, inklusive formulärbaserade inloggningssidor, sidor för att upptäcka hemområde och så vidare. Se alltid till att din anpassade kod endast körs som avsett och inte oväntat.

• AD FS levereras med ett inbyggt webbtema som kallas standard. Du kan inte ändra onload.js innehåll som skapar standardwebbtemat. Om du vill uppdatera onload.js-filen skapar och använder du ett anpassat webbtema för AD FS-inloggningssidor. Mer information finns iAD-FS anpassning av användarinloggning.

• Den ursprungliga onload.js-filen för standardwebbtemat innehåller också kod för att hantera sidåtergivning för olika formfaktorer. Den rekommenderade anpassningsmetoden är att lägga till din anpassade logikkod i den befintliga onload.js-filen. Ändra inte det ursprungliga onload.js filinnehållet.

• När du refererar till HTML-element kontrollerar du alltid om elementet finns innan du agerar på elementet. Det här steget ger robusthet och säkerställer att anpassad logik inte körs på sidor som inte innehåller det här elementet. Om du vill identifiera befintliga HTML-element kan du visa HTML-källan på AD FS-inloggningssidorna.

• Vi rekommenderar att du verifierar dina anpassningar i en alternativ miljö och kör tester innan du flyttar dina anpassningar till AD FS-produktionsservrar. Det här steget minskar risken för att slutanvändare exponeras för anpassningar före valideringen.

Anpassningssteg

Följande avsnitt innehåller stegen för att anpassa onload.js filinnehåll för AD FS-inloggningssidor.

Skapa anpassat webbtema

Om du vill lägga till din anpassade logik i filen onload.js är det första steget att skapa ett anpassat webbtema. En snabbmetod är att exportera webbtemat Standard och sedan använda den ursprungliga koden som grund för dina anpassningar.

Kör följande cmdlet för att skapa ett anpassat webbtema genom att duplicera standardwebbtemat:

New-AdfsWebTheme –Name custom –SourceName default

Generera onload.js-filen

Nästa steg är att exportera ditt anpassade webbtema så att du har en onload.js fil som du kan uppdatera.

Kör följande cmdlet för att exportera ditt anpassade webbtema och generera en onload.js fil:

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

Filen onload.js placeras i skriptmappen i katalogen som anges i cmdleten. I exemplet är c:\themeden angivna mappen .

Lägga till anpassningar

Nu är du redo att ändra onload.js innehåll och lägga till anpassad logikkod för dina scenarier. Som nämnts måste du lägga till din anpassade kod i slutet av onload.js-filen.

I följande exempelavsnitt finns kodfragment som visar vanliga anpassningar.

Ändra målfil onload.js

När du har lagt till dina anpassningar måste du uppdatera AD FS-webbtemat för att använda din onload.js-fil i stället för den ursprungliga onload.js filen.

Kör följande cmdlet för att ange din onload.js-fil som mål för webbtemadefinitioner:

• För AD FS på Windows Server 2016 och senare:

  Set-AdfsWebTheme -TargetName custom -OnLoadScriptPath "c:\theme\script\onload.js"
  

• För AD FS på Windows Server 2012 R2:

  Set-AdfsWebTheme -TargetName custom -AdditionalFileResource @{Uri='/adfs/portal/script/onload.js';path="c:\theme\script\onload.js"}
  

Tillämpa anpassningar på AD FS

Det sista steget är att tillämpa dina anpassningar på AD FS-inloggningssidorna.

Kör följande cmdlet för att uppdatera AD FS med dina anpassningar:

Set-AdfsWebConfig -ActiveThemeName custom

Examples

I följande exempel finns anpassad kod som du kan lägga till i onload.js-filen för att konfigurera AD FS-inloggningssidor.

Ändra rubriksträngen för inloggningssidan

Den formulärbaserade AD FS-inloggningssidan visar en rubrik ovanför användarens indatafält. Standardvärdet för rubrik är "Logga in med ditt organisationskonto".

Ersätt standardsträngvärdet med en anpassad sträng genom att lägga till följande kod i filen onload.js. I koden anger du värdet för parametern loginMessage.innerHTML till den anpassade sträng som ska användas för rubriken.

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

Acceptera inloggning med SAM-kontonamn

Den formulärbaserade AD FS-inloggningssidan stöder som standard två inloggningsmetoder:

• userPrincipalName": A user principal name (UPN), such as user@contoso.com`.
• samAccountName: Ett domänkvalificerat SAM-kontonamn (Security Account Manager), till exempel contoso\user eller contoso.com\user.

Tänk dig ett scenario där alla användare finns i samma domän och användarna bara känner till sitt SAM-kontonamn. Du kan uppdatera inloggningssidan så att användarna endast kan logga in med hjälp av sitt SAM-kontonamn.

Aktivera endast inloggning från SAM-konton genom att lägga till följande kod i filen onload.js. I koden anger du värdet för parametern userNameValue till önskad domän.

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

}

Relaterade länkar

• Anpassning av AD FS-användares inloggning