---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Activer la signature électronique pour Portail de services

# Activer la signature électronique pour Portail de services {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 minutes de lecture

Vous pouvez configurer la signature électronique pour Portail de services exiger une nouvelle authentification de la part des utilisateurs approbateurs.

## Avant de commencer

La com.snc.integration.esig.window propriété système est prise en charge pour activer la connexion SSO dans une nouvelle fenêtre.
Rôle requis : administrateur

## Procédure

1. Activez le module d'extension Approbations avec signature électronique \[com.glide.e_signature_approvals\].
2. Accédez à la Définition du systèmeRegistre de signatures électroniques.
3. Ajoutez à la liste les tables pour lesquelles vous souhaitez exiger une signature électronique.

## Résultats

Lorsque la signature électronique est activée, les approbateurs sont tenus de fournir un mot de passe pour approuver ou rejeter toute demande. L'authentification avec Touch ID fonctionne dans l'application mobile. Sur le Web mobile, les approbateurs sont toujours tenus de saisir un mot de passe. Pour plus d'informations sur la configuration de la signature électronique, reportez-vous à la section [Approval with e-signature](https://www.servicenow.com/docs/access?context=approval-with-e-signature&version=xanadu&pubname=xanadu-build-workflows&ft:locale=en-US).

## Activer la connexion SSO dans une nouvelle fenêtre {#ariaid-title2}

Ouvrez une nouvelle fenêtre pour l'authentification SSO lors de l'utilisation de la signature électronique pour les approbations.

### Avant de commencer

La connexion en langage SAML (Security Assertion Markup Language) n'est prise en charge que sur le bureau Portail de services.

Pour plus d'informations, consultez l'article de la [base de connaissances sur la connexion SSO par signature électronique](https://support.servicenow.com/kb?id=kb_article_view&sys_kb_id=2dca1fe8db49a010190b1ea668961999).

Rôle requis : administrateur

### Procédure

1. Saisissez le script spEsignatureCustom.
   1. Saisissez <kbd class="ph userinput">sys_ui_script.list</kbd> dans le navigateur de filtre.
   2. Sélectionnez Nouveau, puis créez un nouveau script d'interface utilisateur.
   3. Dans le formulaire Script d'interface utilisateur, saisissez <kbd class="ph userinput">spEsignatureCustom</kbd> dans le champ Nom de l'API.
   4. Dans le champ Type d'interface utilisateur, sélectionnez Mobile/Portail de services.
   5. Collez le [script spEsignatureCustom](https://servicenow-prod.fluidtopics.net/95mhSuXqhdyihMJChNgShA#spEsignatureCustom-script "Collez le script spEsignatureCustom dans le champ de script sys_ui_script.list.") dans le champ Script .
   6. Sélectionnez Soumettre.
   {#enable-sso-login__substeps_kzw_jyb_bqb}
2. Saisissez le script spAuthCustom.
   1. Dans la même table <kbd class="ph userinput">sys_ui_script.list</kbd> , créez un autre script d'interface utilisateur en sélectionnant Nouveau.
   2. Dans le formulaire Script d'interface utilisateur, saisissez <kbd class="ph userinput">spAuthCustom</kbd> dans le champ Nom de l'API.
   3. Dans le champ Type d'interface utilisateur, sélectionnez Mobile/Portail de services.
   4. Collez le [script spAuthCustom](https://servicenow-prod.fluidtopics.net/95mhSuXqhdyihMJChNgShA#spAuthCustom-script "Collez le script spAuthCustom dans le champ de script sys_ui_script.list.") dans le champ Script .
   5. Sélectionnez Soumettre.
   {#enable-sso-login__substeps_fb3_syb_bqb}
3. Associez les scripts d'interface utilisateur à l'enregistrement d'include JS.
   1. Accédez à la Portail de servicesPortails.
   2. Identifiez le portail de services auquel vous souhaitez appliquer la prise en charge de la signature électronique et sélectionnez le thème.
   3. Dans les listes connexes, sélectionnez JS Includes.
   4. Sélectionnez Nouveau.
   5. Renseignez les champs du formulaire.  
      {#enable-sso-login__table_rhs_czb_bqb__entry__2}

      | Champ | Description |
      |-|-|
      | Nom d'affichage | Nom de votre include JS. Saisissez <kbd class="ph userinput">spEsignatureCustom</kbd> et associez l'enregistrement au script d'interface utilisateur spEsignatureCustom que vous avez créé, ou saisissez <kbd class="ph userinput">spAuthCustom</kbd> et associez l'enregistrement à spAuthCustom que vous avez créé. |
      | Source | Source pour votre enregistrement JS Include. Sélectionnez un script d'interface utilisateur. |
      | Script d'interface utilisateur | Source de script d'interface utilisateur pour votre enregistrement JS Include. Sélectionnez spEsignatureCustom ou spAuthCustom en fonction de l'enregistrement que vous créez. |
      | Application | Application pour votre enregistrement JS Include. L'application par défaut est Global. |
      | Date de mise à jour | Champ affichant la date de la dernière mise à jour de l'enregistrement. |
      | Package | Champ qui établit le package JS Include. |
      [Tableau 1. Formulaire JS Include]

      {#enable-sso-login__table_rhs_czb_bqb}
   6. Sélectionnez Soumettre.
   {#enable-sso-login__substeps_xrw_zyb_bqb}

### Résultats

Une nouvelle fenêtre s'ouvre lorsque vous utilisez la signature électronique pour les approbations.

## script spEsignatureCustom {#ariaid-title3}

Collez le script spEsignatureCustom dans le champ de script sys_ui_script.list.

    angular.module('sn.$sp').provider('spEsignature', function() {
    	'use strict';

    	this.$get = function spEsignature($q, $http, $window, urlTools, xmlUtil) {
    		var w = window;
    		var esignOW;
    		var windowWidth;
    		var windowHeight;
    		var redirectURL;

    		function isWindowChosen() {
    			var postParams = {
    				sysparm_scope: 'global',
    				sysparm_processor: 'ESignatureAuthUtils',
    				sysparm_name: 'isWindowChosen'
    			};
    			return $http({
    				method: 'POST',
    				url: '/xmlhttp.do',
    				data: urlTools.encodeURIParameters(postParams),
    				headers: {
    					'Content-Type': 'application/x-www-form-urlencoded'
    				},
    				transformResponse: function(response) {
    					return xmlUtil.getDataFromXml(response);
    				}
    			}).then(
    				function(response) {
    					var data = response.data ? response.data[0] : {};
    					return data.answer ===  'true'
    				},
    				function(response) {
    					// Handling failure case.
    					switch (response.status) {
    						default:
    						case 404:
    							return false;
    					}
    				});
    		}

    		function initiateEsignature() {
    			var postParams = {
    				sysparm_scope: 'global',
    				sysparm_processor: 'ESignatureAuthUtils',
    				sysparm_name: 'fetchAuthDetails'
    			}
    			return $http({
    				method: 'POST',
    				url: '/xmlhttp.do',
    				data: urlTools.encodeURIParameters(postParams),
    				headers: {
    					'Content-Type': 'application/x-www-form-urlencoded'
    				},
    				transformResponse: function(response) {
    					return xmlUtil.getDataFromXml(response, 'result');
    				}
    			}).then(
    				function(response) {
    					var data = response.data ? response.data[0] : {};
    					process(data);
    				});
    		}

    		function process(data) {
    			var shouldLogoutFirst = data.logoutFirst === 'true';
    			w['windowHeight'] = data.popup_window_height;
    			w['windowWidth'] = data.popup_window_width;
    			w['redirectURL'] = data.loginURL;
    			if (shouldLogoutFirst)
    				openEsignatureWindow(data.logoutURL);
    			else
    				authenticate();
    		}

    		function openEsignatureWindow(url) {
    			w['esignOW'] = window.open(url, 'esignatureAuthentication',
    				'height='+w['windowHeight']+',width='+w['windowWidth']+',top=100,left=100,toolbar=0,location=0,menubar=0');
    		}

    		w['authenticate'] = function(){
    			if(w['redirectURL']){
    				if(w['esignOW']) //when we signed out previously, a window is already opened. reuse it.
    					w['esignOW'].location.href = w['redirectURL'];
    				else
    					openEsignatureWindow(w['redirectURL']);
    			}
    		};

    		w['evaluateRedirect'] = function(msg) {
    			w['esignOW'].close();
    			if (msg == "saml2 login complete") {
    				$window.onReauthenticationComplete(msg);
    			}
    		};

    		return {
    			isWindowChosen: isWindowChosen,
    			initiateEsignature: initiateEsignature
    		};

    	};
    });

## script spAuthCustom {#ariaid-title4}

Collez le script spAuthCustom dans le champ de script sys_ui_script.list.

    angular.module('sn.$sp').factory('spAuthModal', function($q, spModal, i18n, $http, spAuthentication, glideUserSession, cabrillo, $cookies, $window, spUtil, $uibModal, spEsignature) {
    	"use strict";

    	function _showAuthenticationModal(requestParams, username, userSysId) {
    		var currentUser;
    		var deferred = $q.defer();
    		glideUserSession.loadCurrentUser({reload: true}).then(function(user) {
    			if (!user) {
    				deferred.reject({
    					error: {
    						status: 'ANONYMOUS',
    						message: i18n.getMessage('Not logged in')
    					}
    				});
    				return;
    			}
    			currentUser = user;
    			var serializedUser = {
    				sysId: currentUser.userID,
    				userName: currentUser.userName,
    				firstName: currentUser.firstName,
    				lastName: currentUser.lastName
    			};

    			// hand off to native clients
    			if (cabrillo.isNative()) {
    				cabrillo.auth.reauthenticate(currentUser).then(function() {
    					deferred.resolve(serializedUser);
    				}, function(error) {
    					if (error && error.status) {
    						deferred.reject({
    							error: error
    						});
    					}
    					//TODO: Handle rejection a little more gracefully
    					deferred.reject();
    				});
    				return;
    			}

    			var loginMethod = currentUser.$private.loginMethod;
    			if (!loginMethod) {
    				// As we were unable to determine the login method via the HTTP session, trying to get glide_sso_id cookie which is set in case of multisso login
    				var providerSysId = $cookies.get('glide_sso_id');
    				loginMethod = providerSysId ? 'multisso' : 'db';
    			}

    			if (loginMethod === 'saml' || loginMethod === 'oidc' || loginMethod === 'multisso') {
    				spEsignature.isWindowChosen().then(function(result) {
    					var modal;
    					if (!spUtil.isMobile() && loginMethod !== 'oidc' && result === true) {
    						// If enabled, Opening a new window for desktop saml login
    						spEsignature.initiateEsignature();
    					} else {
    						glideUserSession.getSsoReauthenticationUrl().then(function(url) {
    							requestParams.externalLoginURL = url;
    							openExternalAuthModal(requestParams).then(function(m) {
    								modal = m;
    							});
    						});
    					}
    					$window.onReauthenticationComplete = function(result) {
    						deferred.resolve(serializedUser);
    						if (modal)
    							modal.close();
    					};
    				});
    			} else {
    				spModal.open({
    					title:i18n.getMessage("Approver authentication"),
    					message:i18n.getMessage("Additional authentication is required, enter your usename and password to continue."),
    					footerStyle: {border: 'none', 'padding-top': 0},
    					widget: 'simpleloginui',
    					widgetInput: {},
    					shared: requestParams,
    					onSubmit: function() {
    						return onLoginModalSubmit(requestParams, username);
    					}
    				}).then(function(confirm) {
    					if (confirm.label == i18n.getMessage("OK")) {
    						deferred.resolve(serializedUser);
    					} else {
    						deferred.reject();
    					}
    				});
    			}
    		});

    		return deferred.promise;
    	}

    	function onLoginModalSubmit(requestParams, username) {
    		//(1) call login service to verify auth
    		//(2) verify same user
    		return $q(function(resolve, reject) {
    			var errorMessage = null;

    			if(!requestParams.username || requestParams.username.trim() === "" ||
    					!requestParams.password || requestParams.password.trim() === "") {
    				errorMessage = i18n.getMessage("User name or password invalid");
    			} else if(requestParams.username !== username) {
    				errorMessage = i18n.getMessage("Attempted to authenticate as a different user");
    			}

    			if(!errorMessage || errorMessage === "") {
    				spAuthentication.validateCreds(requestParams.username, requestParams.password).then(function(res) {
    					resolve({status: res.success, errorMessage: res.message});
    				});
    			} else {
    				resolve({status: !errorMessage || errorMessage === "", errorMessage: errorMessage});
    			}
    		});

    	}

    	function openExternalAuthModal(requestParams) {
    		var deferred = $q.defer();

    		var options = {
    			title: i18n.getMessage("Approver authentication"),
    			message: '',
    			messageOnly: false,
    			errorMessage: '',
    			input: false,
    			label: '',
    			size: 'lg',
    			value: '',
    			required: false,
    			footerStyle: {border: 'none', 'padding-top': 0},
    			values: false,
    			onSubmit: null,
    			widget: 'simpleloginui',
    			widgetInput: {},
    			shared: requestParams,
    			buttons: [{label: i18n.getMessage('Cancel'), cancel:true}]
    		};

    		var widgetURL = spUtil.getWidgetURL(options.widget);
    		$http.post(widgetURL, options.widgetInput).success(function(response) {
    			options.widget = response.result;
    			options.widget.options.shared = options.shared;
    			var modal = $uibModal.open({
    				templateUrl:'sp-modal.html',
    				controller: spModalCtrl,
    				size: options.size,
    				resolve: {
    					options: function() {
    						return options;
    					}
    				}
    			});

    			deferred.resolve(modal);
    		});
    		
    		return deferred.promise;
    	}

    	function spModalCtrl($scope, options) {
    		$scope.options = options;
    		$scope.form = {};

    		$scope.buttonClicked = function(button){
    			if (button.cancel) {
    				$scope.$dismiss();
    				return;
    			}
    		}
    	}

    	return {
    		prompt: _showAuthenticationModal
    	}
    }).decorator("spAuthModal", function($delegate) { return( $delegate );});