Configurer les écrans ACUL

Le mode de rendu avancé est configuré sur une base d’écran par écran via Management API d’appels et est aussi supporté dans l’outil Deploy CLI et le fournisseur Auth0 Terraform.

Options de configuration

Les écrans qui utilisent le mode de rendu avancé disposent des options de configuration suivantes :

  • Mode de rendu d’écran avancé ou standard

  • Inclure ou exclure les balises d’en-tête par défaut dans le modèle de page

  • Données de transaction et de configuration facultatives qui doivent être incluses dans le contexte de la connexion universelle

  • Éléments HTML dans la balise <head> qui font référence à vos packs de ressources configurés.

Supprimer les balises d’en-tête par défaut

Les balises HTML suivantes sont ajoutées par défaut au modèle de page en mode de rendu avancé et peuvent être désactivées en définissant la valeur de default_head_tags_disabled sur true.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<link rel="shortcut icon" href="https://cdn.sass.app/favicon.ico">
<title>My App | Login</title>

Was this helpful?

/

Incluez toujours des remplacements pour la balise <title> et la balise robots <meta> lors de la suppression des balises d’en-tête par défaut en les incluant dans head_tags.

Inclure des données facultatives dans le contexte de la connexion universelle

Les données facultatives peuvent être incluses dans le contexte de connexion universelle en les ajoutant au tableau context_configuration. Toutes les données facultatives ne sont pas disponibles sur chaque écran; si les données demandées ne sont pas disponibles, l’API renvoie une erreur. Consultez les pages d’écran individuelles pour obtenir des informations spécifiques à chaque écran sur les données disponibles pour chaque écran.

Le référencement de entity.metadata ou de authorization_parameters sans clé spécifique génère une erreur. Pour des raisons de sécurité, les paramètres d’autorisation complets ou les objets de métadonnées ne sont pas exposés.

Vous trouverez ci-dessous les données contextuelles facultatives disponibles :

"context-configuration": [
    "branding.settings",
    "branding.themes.default",
    "client.logo_uri",
    "client.description",
    "client.metadata",
    "organization.display_name",
    "organization.branding",
    "organization.metadata",
    "screen.texts",
    "tenant.name",
    "tenant.friendly_name",
    "tenant.enabled_locales",
    "untrusted_data.submitted_form_data",
    "untrusted_data.authorization_params.login_hint",
    "untrusted_data.authorization_params.screen_hint",
    "untrusted_data.authorization_params.ui_locales",
    "untrusted_data.authorization_params.ext-"
  ],

Was this helpful?

/

Référencez vos ressources groupées

Le mode de rendu avancé vous permet d’ajouter des méta-informations, de remplacer les titres de page et les icônes par défaut et de référencer vos ressources groupées en définissant des balises HTML incluses dans le <head> du modèle de page. Vous pouvez définir jusqu’à 25 balises par écran, toutes définies sous la forme d’un tableau d’objets JSON.

"head_tags": [
  {
    "tag": "",
    "content": "",
    "attributes": {}
  }
]

Was this helpful?

/

Balise

Tout élément HTML valide pour une utilisation dans la balise <head>. Consultez la documentation MDN pour plus de détails.

Contenu (optionnel)

Le contenu entre les balises d’ouverture et de fermeture. Le contenu est limité à 250 caractères.

Lorsque vous utilisez une balise <title> personnalisée :

My Company Login | {{client.name}}

Was this helpful?

/

Lorsque vous utilisez une police personnalisée :

'@font-face {  font-family: "custom-font";  src: url("https://cdn.sass.app/{{client.metadata.custom_font}}");}body {  font-family: custom-font;}'

Was this helpful?

/

L’attribut content permet d’accéder aux variables ci-dessous; elles sont résolues sur le serveur avant que le modèle de page ne soit renvoyé au navigateur.

/

  • branding.settings

  • branding.themes.default

  • client.id

  • client.name

  • client.metadata.[key_name]

  • organization.id

  • organization.name

  • organization.branding

  • organization.metadata.[key_name]

  • screen.name

  • prompt.name

  • lieu

  • user.id

  • user.metadata.[key_name]

  • user.app_metadata.[key_name]

Attributs

Jusqu’à 10 attributs HTML valides peuvent être inclus dans la balise actuelle.

Segments dynamiques pour les attributs de type URL

Les attributs d’URL tels que src et href incluent des segments dynamiques qui vous permettent de segmenter des packs en ensembles logiques en fonction d’attributs tels que le client, l’organisation ou les paramètres régionaux.

Les segments dynamiques ont accès aux données de contexte suivantes :

/

  • screen.name

  • prompt.name

  • client.id

  • client.name

  • client.metadata.[key_name]

  • organization.id

  • organization.name

  • organization.metadata.[key_name]

  • transaction.locale

Exemple pour Management API

Vous trouverez ci-dessous un exemple d’appel direct à Management API pour configurer l’écran de l’identifiant de la connexion.

/

# PATCH to /api/v2/prompts/login-id/screen/login-id/rendering
{
  "rendering_mode": "advanced",
  "context_configuration": [
    "branding.themes.default",
    "client.logo_uri",
    "client.description",
    "client.metadata.google_tracking_id",
    "screen.texts",
    "tenant.enabled_locales",
    "untrusted_data.submitted_form_data",
    "untrusted_data.authorization_params.ext-my_param"
  ],
  "head_tags": [
    {
      "tag": "script",
      "attributes": {
        "src": "https://cdn.sass.app/auth-screens/{{client.name}}.js",
        "defer": true,
        "integrity": [
          "sha256-someHash/Abc+123",
          "sha256-someHash/cDe+456"
        ]
      }
    },
    {
      "tag": "link",
      "attributes": {
        "rel": "stylesheet",
        "href": "https://cdn.sass.app/auth-screens/{{client.name}}.css"
      }
    }
  ]
}

Was this helpful?

/

Exemple pour le fournisseur Auth0 Terraform

Vous trouverez ci-dessous un exemple d’appel Auth0 Terraform pour configurer l’écran d’identification de la connexion.

/

resource "auth0_prompt_screen_renderer" "apsr" {
  prompt_type     = "login-id"
  screen_name = "login-id"
    rendering_mode = "advanced"
    context_configuration = [
        "branding.settings",
        "branding.themes.default",
        "client.logo_uri",
        "client.description",
        "organization.display_name",
        "organization.branding",
        "screen.texts",
        "tenant.name",
        "tenant.friendly_name",
        "tenant.enabled_locales",
        "untrusted_data.submitted_form_data",
        "untrusted_data.authorization_params.ui_locales",
        "untrusted_data.authorization_params.login_hint",
        "untrusted_data.authorization_params.screen_hint",
        "user.organizations"
    ]
    head_tags = jsonencode([
       {
           attributes: {
               "async": true,
               "defer": true,
               "integrity": [
                   "sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
               ],
               "src": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
           },
           tag: "script"
       }
   ])
}

Was this helpful?

/