Configuration de l'interface utilisateur Web (IU)

Objective

After completing this lesson, you will be able to personnalisez l'expérience utilisateur CIAM à l'aide du Web UI Builder.

Personnalisation de l'expérience utilisateur CIAM à l'aide du Web UI Builder

SAP Customer Data Cloud fournit des écrans prêts à l'emploi par défaut pour implémenter votre expérience utilisateur CIAM.

Il existe cinq captures d'écran des éléments suivants : écran d'inscription/connexion, préférences/mise à jour du profil, paramètres de sécurité/de confidentialité, abonnements et réinitialisation du mot de passe. Il s'agit de captures d'écran système pour illustrer la manière dont vous pouvez utiliser UI Builder pour personnaliser votre site.

Web UI Builder vous permet de concevoir des expériences utilisateur CIAM telles que :

  1. Inscription et connexion
  2. Préférences et mise à jour du profil
  3. Paramètres de sécurité et de confidentialité
  4. Abonnements (enregistrement simplifié)
  5. Réinitialisation du mot de passe

Vous pouvez facilement personnaliser les ensembles d'écrans par défaut à l'aide d'une méthode glisser-déplacer. Vous pouvez également personnaliser l'apparence de vos écrans pour qu'ils correspondent parfaitement à la marque de votre entreprise à l'aide de CSS et de JavaScript.

Web UI Builder Designer

Il s'agit du générateur d'IU du cloud de données client SAP.

Générateur d'IU dans SAP Customer Data Cloud.

UI Builder vous permet de personnaliser les ensembles d'écrans de manière simple et rapide. Les principales fonctionnalités de Web UI Builder sont les suivantes :

  • Fonctionnalités de modification par glisser-déposer
  • Optimisation des écrans mobiles et conception réactive
  • Option d'aperçu pour s'adapter à plusieurs tailles d'écran et langues
  • Option de localisation pour la gestion des traductions
  • Mappage direct des éléments de l'interface utilisateur dans les attributs de schéma
  • Personnalisation à l'aide de l'éditeur CSS 
  • Paramètres JavaScript pour la gestion des événements d'ensemble d'écrans

Remarque : des personnalisations HTML avancées facultatives sont également disponibles, mais elles ne font pas partie de UI Builder.

Masques d'écran

Il s'agit de la première étape de personnalisation de l'interface utilisateur. Ce menu déroulant répertorie les écrans de modèles personnalisables disponibles. Vous pouvez également créer un nouvel écran en sélectionnant l'option +Nouvel écran.

Capture d'écran du menu déroulant Écran dans le générateur d'IU SAP Customer Data Cloud. Une zone de mise en surbrillance orange met en surbrillance le menu déroulant de l'écran et le bouton Ajouter un nouvel écran.

Contrôles standard

Ce menu de contrôles standard contient une variété d'éléments iu standard préconfigurés que vous pouvez utiliser pour personnaliser le modèle d'écran sélectionné. Les contrôles simples sont généralement connectés à un élément HTML ou à une fonctionnalité directe dans SAP Customer Data Cloud. Vous pouvez ajouter une zone de texte, un lien, un menu déroulant, une case à cocher ou un bouton pour mettre en évidence certaines des options populaires. Une fois que vous avez sélectionné le contrôle standard, vous pouvez effectuer un glisser-déplacer vers la zone d'écran.

Capture d'écran des options de contrôle standard et de l'écran de la page UI Builder dans SAP Customer Data Cloud. Les cases en surbrillance orange indiquent les widgets et l'écran Standard.

Sous les contrôles Standard, vous trouverez des éléments de personnalisation supplémentaires dans les sections Captcha, Widgets, Passkey et TFA.

Capture d'écran des options Captcha, Widgets, Passkey et TFA situées dans le menu latéral gauche de UI Builder dans SAP Customer Data Cloud.

Captcha: CAPTCHA (Test de turing public complètement automatisé pour dire Ordinateurs et Humains à part), est l'une des méthodes les plus populaires de distinction entre un utilisateur humain et un attaquant automatisé. SAP Customer Data Cloud permet d'ajouter un défi CAPTCHA aux écrans de connexion et d'inscription. Le service CAPTCHA protège votre site contre les tentatives de piratage automatique.

Widgets : dans chaque écran, les widgets jouent un rôle pivot. Ces widgets sont entièrement personnalisables, ce qui vous permet de les adapter à vos besoins spécifiques. Par exemple, les widgets peuvent permettre aux clients d'ajouter un numéro de téléphone, de se connecter aux réseaux sociaux ou d'ajouter une photo.

Clé d'accès : FIDO représente une solution d'authentification de pointe qui élimine le besoin de mots de passe et atténue les risques d'hameçonnage. Il est compatible à la fois avec les appareils mobiles et les navigateurs Web de bureau traditionnels. Outre les informations d'identification à appareil unique, FIDO introduit une nouvelle technologie appelée identifiants multi-appareils ou clés d'accès. Cette innovation rationalise les méthodes d'authentification de FIDO sur différents appareils, plateformes et systèmes d'exploitation. Les clés d'accès offrent la possibilité de récupération, protègent contre la perte d'appareil et garantissent l'accessibilité partout et à tout moment où les utilisateurs en ont besoin, sans dépendre des mots de passe traditionnels.

TFA : l'authentification à deux facteurs (TFA) améliore la sécurité de vos processus d'authentification utilisateur en introduisant une couche de vérification supplémentaire. Suite à la saisie des identifiants de connexion et de mot de passe, SAP Customer Data Cloud génère un code unique et l'envoie à l'utilisateur par e-mail ou téléphone (via message vocal/SMS). L'utilisateur saisit ensuite ce code pour finaliser la procédure d'authentification.

Panneau Propriétés

Le panneau des propriétés vous permet de personnaliser davantage les contrôles ou widgets précédemment sélectionnés dans le menu des contrôles et widgets standard. Vous pouvez modifier le nom du champ, la largeur ou la hauteur, ou rendre le champ obligatoire pour nommer quelques options.

Capture d'écran des options du panneau Propriétés à droite de UI Builder. La zone de mise en surbrillance orange indique les différentes options des propriétés, telles que les zones ID d'écran, Comportement, Nom interne, Légende, Écran de réussite, Largeur et Hauteur disponibles dans l'outil de conception.

Ajout d'une zone existante à un écran