在UCCE SSO的AD FS登入頁面上配置自動填充使用者ID

簡介

本文說明如何改善統一聯絡中心企業版(UCCE)單一登入(SSO)登入中的終端使用者體驗。  如果不強制使用者在身份提供程式(IdP)登入頁面上再次輸入其登入ID，可以改進此情況。

必要條件

需求

思科建議您瞭解以下主題：

• UCCE SSO登入流和AD FS
• 超文字傳輸通訊協定(HTTP)
• 超文字標籤語言(HTML) 
• 安全宣告標籤語言2.0(SAMLv2)
• 開放式授權2.0(OAuthv2)
• 熟悉Windows PowerShell(PS)
• 熟悉JavaScript(JS)

採用元件

本文中的資訊係根據以下軟體和硬體版本：

• UCCE 11.5(1)及更高版本
• Finesse 11.5(1)及更高版本
• Cisco Unified Intelligence Center(CUIC)11.5(1)及更高版本。
• Microsoft Active Directory(AD)- Windows Server上安裝的AD
• AD FS 2.0/3.0
• Windows Server 2012 R2

本文中的資訊是根據特定實驗室環境內的裝置所建立。文中使用到的所有裝置皆從已清除（預設）的組態來啟動。如果您的網路運作中，請確保您瞭解任何指令可能造成的影響。

背景資訊

在UCCE SSO登入中，使用者必須輸入其登入ID兩次：第一次在UCCE應用程式登入頁面（例如Finesse、CUIC）上，第二次在IdP登入頁面（如果使用Forms Authentication方法）。 在本文檔的示例中，Active Directory聯合身份驗證服務(AD FS)用作IdP。

在UCCE中啟用SSO時，在輸入登入ID並在CUIC/Finesse上按下Submit/Login按鈕後，輸入的登入ID將儲存在cookie cc_username中，並保留以供重定向到身份伺服器(IdS)，然後重定向到IdP。可以使用IdP登入頁面上的此cookie自動填充登入ID。

供參考，以下是HTTP/SAML流程圖示例，其中終端使用者是Finesse代理，UCCE應用程式是Finesse伺服器。

以下範例顯示終端使用者Web瀏覽器向AD FS(IdP)傳送的步驟4c HTTP要求標頭。

Request URL: https://dc01.omozol.lab/adfs/ls/?SAMLRequest=tZTBjtowEIbv%2BxSR...
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Cookie: cc_username=agent1%40omozol.lab
Host: dc01.omozol.lab
Pragma: no-cache
Referer: https://fns01p.omozol.lab/desktop/container/landing.jsp?locale=en_US
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

設定

使用AD FS 3.0作為IdP，通過修改onload.js檔案實現配置，AD FS會將該檔案插入返回到使用者的HTML頁面，以響應對https://<AD FS FQDN>/adfs/ls/的請求。

步驟1.若要修改onload.js檔案，請通過PowerShell cmdlet將檔案匯出到檔案系統：

PS C:\> Export-AdfsWebTheme -Name default -DirectoryPath c:\temp\adfs\

onload.js檔案位於以下目錄中：

C:\temp\adfs\script

步驟2.根據登入格式，新增適當的JS代碼片段，使其位於檔案中已經存在的代碼結構/邏輯之外的任何位置。為簡單起見，請將其新增到檔案底部。

預設情況下，AD FS在Windows Server 2012 R2中向SSO使用者顯示的登入頁需要使用者名稱userPrincipleName(UPN)表單。這是類似於電子郵件的格式，例如user@cisco.com。在單個域聯絡中心中，可以修改AD FS登入頁，以允許簡單sAMAccountNameUser ID(UID)，該使用者名稱稱中不包含域名。 

如果需要在AD FS登入頁面上輸入UPN使用者名稱，請使用此代碼段：

// Get cc_username as login ID from HTTP Cookie header
if (document.cookie) {
    // If the position of cc_username in the cookie is the first position, 0...
    if (document.cookie.indexOf('cc_username') == 0) {
        // Split the cookie into an array with the delimitor being '=' 
        var cookies = document.cookie.split('=');
        // If the first element of the array is cc_username then... 
        if (cookies[0] == 'cc_username') {
            // ...the second element will be the actual username and we should save that. 
            var cc_login_name = cookies[1];
        }
        // Customize Login page: add domain if needed as AD FS by default require login ID in UPN form
        // If the parsed login is not null, do the following logic
        if (cc_login_name != null) {
            // If %40 (encoded '=') does not exist in the login name... 
            if (cc_login_name.indexOf('%40') == -1) {
                // ...then add '@domain.com' to ensure a UPN format is input
                var userNameValue = cc_login_name + '@' + 'domain.com';
                // Populate the UPN into the userNameInput of the page, and put the focus 
                // on the password.
                document.getElementById("userNameInput").value = userNameValue;
                document.getElementById("passwordInput").focus();
            } else {
                // Otherwise, if %40 does exist in the username, replace it with the @ sign
                // and populate the UPN into the userNameInput of the page, and put the 
                // focus on the password.
                var userNameValue = cc_login_name.replace('%40', '@');
                document.getElementById("userNameInput").value = userNameValue;
                document.getElementById("passwordInput").focus();
            }
        }
    }
}

在此行中，如果將UPN用作登入UID，則必須修改domain.com以匹配UCCE代理的域。

var userNameValue = cc_login_name + '@' + 'domain.com';

注意：預設情況下，AD FS使用UPN登入。有關如何將AD FS登入頁配置為允許sAMAccountName登入的資訊，請參閱UCCE功能指南、單一登入一章、（可選）在Windows Server 2012 R2中自定義AD FS登入頁部分。

如果在AD FS登入頁上輸入了sAMAccountName（沒有域的UID）使用者名稱，請使用此代碼段：

// Get cc_username as login ID from HTTP Cookie header
if (document.cookie) {
    // If the position of cc_username in the cookie is the first position, 0...
    if (document.cookie.indexOf('cc_username') == 0) {
        // Split the cookie into an array with the delimitor being '=' 
        var cookies = document.cookie.split('=');
        // If the first element of the array is cc_username then... 
        if (cookies[0] == 'cc_username') {
            // ...the second element will be the actual username and we should save that. 
            var cc_login_name = cookies[1];
        }
        // Customize Login page: remove domain if needed to use login ID in sAMAccount form
        // If the parsed login is not null, do the following logic
        if (cc_login_name != null) {
            // If %40 (encoded '=') DOES exist in the login name... 
            if (cc_login_name.indexOf('%40') != -1) {
                // ...then split the login into an array about the @ sign and only keep the username.
                var domainLogin = cc_login_name.replace('%40', '@')
                var noDomainLogin = domainLogin.split('@');
                var userNameValue = noDomainLogin[0];
                // Populate the sAMAccountName into the userNameInput of the page, and put the focus 
                // on the password.
                document.getElementById("userNameInput").value = userNameValue;
                document.getElementById("passwordInput").focus();
            } else {
                // Otherwise, if %40 does not exist in the username, there is no "@domain",
                // so populate the sAMAccountName into the userNameInput of the page,  
                // and put the focus on the password.
                document.getElementById("userNameInput").value = cc_login_name;
                document.getElementById("passwordInput").focus();
            }
        }
    }
}

註：代碼中的//符號表示註釋。如果需要，可以刪除這些行。其目的是幫助理解Javascript代碼。

步驟3. 儲存onload.js，然後使用以下命令將其重新載入新的AD FS Web主題：

使用預設主題的模板建立自定義AD FS主題：

PS C:\> New-AdfsWebTheme -Name custom -SourceName default

將自定義AD FS主題設定為活動：

PS C:\> Set-AdfsWebConfig -ActiveThemeName custom

將修改的onload.js檔案載入到自定義主題：

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

附註：無需重新啟動AD FS。活動主題將自動修改。

驗證

使用本節內容，確認您的組態是否正常運作。

使用啟用SSO的帳戶（以sAMAccountName或UPN作為登入ID）登入到Finesse或CUIC（取決於AD FS配置），並觀察到，在AD FS登入頁面上，使用者ID會自動填充focus on password prompt欄位。只需輸入密碼即可繼續登入。

疑難排解

本節提供的資訊可用於對組態進行疑難排解。

如果有問題，Web瀏覽器的Developer Tools用於檢查是否將onload.js中的修改插入到返回的HTML頁面，以及是否在Web瀏覽器控制檯中觀察到任何錯誤。 

相關資訊

• Firefox開發人員工具
• Chrome開發工具
• Internet Explorer(F12)開發人員工具
• SAM-Account-Name
• userPrincipleName
• UID
• 思科整合客服中心企業功能指南
• 技術支援與文件 - Cisco Systems