Widget Login (Connexion)

Le widget Login (Connexion) ajoute une expérience de connexion à votre application. Le widget est un bouton qui permet aux utilisateurs de se connecter et se déconnecter des comptes ArcGIS. Lorsque l’utilisateur clique sur ce bouton, différentes actions sont possibles selon que l’utilisateur est connecté ou non et en fonction des comportements que vous configurez dans les paramètres du widget.

• Lorsque les utilisateurs cliquent sur le widget afin de se connecter, le widget peut ouvrir une fenêtre contextuelle de connexion ou rediriger les utilisateurs vers une page de connexion ArcGIS.
• Lorsque les utilisateurs cliquent sur le widget alors qu’ils sont déjà connectés, le widget peut les déconnecter directement ou ouvrir un menu déroulant offrant différentes options.

Vous pouvez configurer les redirections qui envoient les utilisateurs vers une page, une vue, une fenêtre particulière de l’application ou encore vers une URL externe après la connexion ou la déconnexion. Vous pouvez également personnaliser l’apparence du widget et du menu déroulant.

Exemples

Utilisez ce widget pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous souhaitez exiger des utilisateurs qu’ils se connectent avant d’accéder à une application.
• Vous souhaitez créer une page d’accueil comportant un bouton de connexion et rediriger les utilisateurs vers une autre page une fois qu’ils sont connectés à un compte.
• Vous souhaitez autoriser les utilisateurs à changer de compte.

Remarques sur l’utilisation

Lorsque vous ajoutez un widget Login (Connexion) à une page, la fenêtre Quick style (Style rapide) apparaît. Vous pouvez effectuer un choix parmi des conceptions prédéfinies coordonnées au thème de votre application. (Pour accéder de nouveau à cette fenêtre ultérieurement, cliquez sur le bouton Quick style [Style rapide]  dans la barre d’outils du widget.) Vous pouvez également personnaliser davantage l’apparence du widget dans les paramètres Appearance (Apparence).

La barre d’outils du widget Login (Connexion) inclut le bouton Toggle sign-in preview (Activer/désactiver l’aperçu de la page de connexion) . Vous pouvez utiliser ce bouton pour passer de l’aperçu du widget à l’état connecté à l’aperçu du widget à l’état déconnecté.

Conseil :

Puisque vous devez être connecté pour modifier l’application, le widget ne vous permet pas de vous connecter, de vous déconnecter ou de changer de compte dans le générateur. Pour tester entièrement l’expérience de connexion et de déconnexion, affichez l’aperçu de l’application dans un nouvel onglet.

Paramètres

Le widget Login (Connexion) inclut les paramètres suivants :

• Sign-in page display (Affichage de la page de connexion) : sélectionnez un comportement déclenché lorsque l’utilisateur clique sur le bouton du widget alors qu’il n’est pas connecté :
  • Popup window (Fenêtre modale) : une fenêtre apparaît et invite l’utilisateur à se connecter.
  • Redirect to sign in page (Rediriger vers la page de connexion) : le widget redirige l’utilisateur vers une page de connexion ArcGIS. Une fois que l’utilisateur se connecte avec un compte valide, il est renvoyé vers l’application.

  Remarque :

  Lorsque vous intégrez une application Experience Builder dans une autre application ou dans un site Web, la fenêtre modale est toujours le comportement de connexion lorsque l’utilisateur clique sur le widget dans l’application intégrée, quelle que soit l’option sélectionnée ici.

• Post sign-in settings (Paramètres à appliquer après la connexion) : configurez les paramètres suivants liés au comportement du widget une fois que l’utilisateur est connecté :
  • Redirect after signing in (Rediriger après la connexion) : si vous le souhaitez, ajoutez un lien pour envoyer les utilisateurs vers une page, une vue ou une fenêtre spécifique de l’application, ou accéder à une adresse Web immédiatement après la connexion. Si vous créez un lien vers une adresse Web, saisissez une URL (qui commence par https://). Vous pouvez indiquer si la page de redirection s’ouvre dans la même fenêtre que l’application, dans la fenêtre supérieure ou dans une nouvelle fenêtre.
  • Redirect after signing out (Rediriger après la déconnexion) : si vous le souhaitez, ajoutez un lien pour envoyer les utilisateurs vers une page, une vue ou une fenêtre spécifique de l’application, ou accéder à une adresse Web immédiatement après la déconnexion. Si vous créez un lien vers une adresse Web, saisissez une URL (qui commence par https://). Vous pouvez indiquer si la page de redirection s’ouvre dans la même fenêtre que l’application, dans la fenêtre supérieure ou dans une nouvelle fenêtre.
  • On sign-in button click (Clic sur le bouton en étant connecté) : choisissez un comportement lorsque l’utilisateur clique sur le widget tout en étant connecté :
    • Sign out directly (Se déconnecter directement) : le widget déconnecte l’utilisateur de son compte.
    • Enable user menu (Activer le menu utilisateur) : un menu déroulant apparaît lorsque l’utilisateur clique sur le bouton. Le menu inclut toujours les options Switch accounts (Changer de compte) et Sign out (Se déconnecter). Vous pouvez choisir d’inclure les options et éléments supplémentaires suivants :
      • Show user name (Afficher le nom d’utilisateur) : incluez le nom de profil du compte dans le menu.
      • Show user avatar (Afficher l’avatar de l’utilisateur) : incluez l’image de l’avatar du compte dans le menu.
      • Show "My profile" (Afficher "Mon profil") : incluez un lien vers la page de profil du compte.
      • Show "My settings" (Afficher "Mes paramètres") : incluez un lien vers la page des paramètres du compte.
      • Show restricted resources (if any) (Afficher les ressources à accès restreint [s’il y a lieu]) : incluez une liste de ressources dans l’application auxquelles le compte actuel ne peut pas accéder.
      • Add a link (Ajouter un lien) : ajoutez un lien vers le menu déroulant. Pour chaque lien, vous pouvez saisir une étiquette et une URL https://.
• Appearance (Apparence) : modifiez l’apparence du widget Login (Connexion).
  • Icon (Icône) : ajoutez une icône au bouton de connexion. Cette icône apparaît lorsque l’utilisateur est déconnecté. L’avatar de l’utilisateur apparaît lorsque l’utilisateur est connecté à son compte. Vous pouvez sélectionner des icônes dans les bibliothèques par défaut ou charger votre propre icône à partir d’un fichier.
  • Vous pouvez remplacer la police et les couleurs héritées du thème de l’application pour appliquer un style aux deux états du widget. Default (Par défaut) est l’état du widget sans interaction avec l’utilisateur et Hover (Survol) est l’état initié par l’utilisateur lorsqu’il pointe ou clique sur le widget. Vous pouvez ajuster les paramètres suivants :
    • Text (Texte) : modifiez la couleur et la taille de la police (en pixels) et stylisez le texte du widget à l’aide d’une mise en forme de type gras, italique, barré et souligné.
    • Icon (Icône) : modifiez la couleur et la taille (en pixels) de l’icône du widget.
    • Background (Arrière-plan) : choisissez une couleur de remplissage ou une image comme arrière-plan du widget. Si vous choisissez une image, vous pouvez la positionner dans le widget à l’aide de l’option Fit (Ajuster), Fill (Remplir), Center (Centrer), Tile (Tuile) ou Stretch (Étirer). Si vous sélectionnez Fit (Ajuster), le widget affiche la couleur de remplissage de l’arrière-plan autour de l’image.
    • Border (Bordure) : choisissez une couleur, un style (tel que tireté ou pointillé) et une largeur de bordure en pixels. Vous pouvez définir un style pour tous les côtés de la bordure à la fois ou séparément pour chacun d’eux.
    • Border radius (Rayon de bordure) : modifiez la taille du rayon (en pixels ou en pourcentage) pour donner une forme aux coins du widget.
    • Shadow (Ombre) : ajoutez un effet d’ombre autour du widget à l’aide des paramètres suivants :
      • Offset X (Décalage X) : définissez la distance horizontale de l’ombre. Une valeur négative place l’ombre à gauche du bouton et une valeur positive la place à droite.
      • Offset Y (Décalage Y) : définissez la distance verticale de l’ombre. Une valeur négative place l’ombre au-dessus du bouton et une valeur positive la place en dessous.
      • Blur radius (Rayon de flou) : appliquez un effet de flou à l’ombre.
      • Spread radius (Rayon de répartition) : ajustez la taille de l’ombre.
      • Color (Couleur) : sélectionnez une couleur d’ombre.
    • Dropdown menu (Menu déroulant) : modifiez l’apparence du menu déroulant qui s’affiche si vous activez le paramètre Enable user menu (Activer le menu utilisateur) :
      • Text (Texte) : modifiez la couleur et la taille de la police (en pixels) et stylisez le texte du menu à l’aide d’une mise en forme de type gras, italique, barré et souligné.
      • Background (Arrière-plan) : choisissez une couleur de remplissage ou une image pour définir l’arrière-plan du menu. Si vous choisissez une image, vous pouvez la positionner dans le menu à l’aide de l’option Fit (Ajuster), Fill (Remplir), Center (Centrer), Tile (Tuile) ou Stretch (Étirer). Si vous sélectionnez Fit (Ajuster), le menu affiche la couleur de remplissage de l’arrière-plan autour de l’image.
      • Border (Bordure) : choisissez une couleur, un style (tel que tireté ou pointillé) et une largeur de bordure en pixels. Vous pouvez définir un style pour tous les côtés de la bordure à la fois ou séparément pour chacun d’eux.
      • Shadow (Ombre) : ajoutez un effet d’ombre autour du menu à l’aide des paramètres suivants :
        • Offset X (Décalage X) : définissez la distance horizontale de l’ombre. Une valeur négative place l’ombre à gauche du bouton et une valeur positive la place à droite.
        • Offset Y (Décalage Y) : définissez la distance verticale de l’ombre. Une valeur négative place l’ombre au-dessus du bouton et une valeur positive la place en dessous.
        • Blur radius (Rayon de flou) : appliquez un effet de flou à l’ombre.
        • Spread radius (Rayon de répartition) : ajustez la taille de l’ombre.
        • Color (Couleur) : sélectionnez une couleur d’ombre.