[18.0.0.1 and later]

Configuration d'un formulaire de sélection de médias sociaux personnalisé pour Liberty

vous pouvez configurer votre propre sélection de médias sociaux plutôt que de configurer le formulaire de sélection par défaut fourni par Liberty. Vous pouvez choisir cette option si plusieurs fournisseurs de médias sociaux sont configurés pour protéger une demande.

Pourquoi et quand exécuter cette tâche

Le formulaire de sélection de médias sociaux permet aux utilisateurs de choisir entre des fournisseurs de connexion sociaux disponibles pour s'authentifier pour une demande de ressource protégée. Avec Liberty, vous pouvez spécifier l'emplacement de votre propre page de sélection si vous ne souhaitez pas utiliser la page par défaut fournie par Liberty.

Toute page de sélection personnalisée nécessite de recevoir des paramètres de demande HTTP et d'utiliser ces valeurs pour construire une page Web valide. Vous trouverez des informations sur les paramètres spécifiques qui sont envoyés à la page de sélection personnalisée, les valeurs de paramètres et la façon dont ces valeurs doivent être utilisées par la page de sélection personnalisée.

Procédure

  1. Configurez l'élément socialLoginWebapp. L'élément socialLoginWebapp est fourni par la fonction socialLogin-1.0 et est un élément de niveau supérieur dans la configuration de serveur. Pour plus d'informations sur l'élément socialLoginWebapp, voir socialLoginWebapp - Application Web de connexion sociale.
  2. Configurez l'attribut socialMediaSelectionPageUrl de l'élément socialLoginWebapp. Définissez la valeur de l'attribut sur l'URL de votre page de sélection personnalisée.

    Prenez en compte les instructions suivantes pour l'attribut d'URL :

    • La valeur peut être une URL absolue ou relative.
    • Si vous choisissez une URL absolue, le schéma doit être http ou https.
    • L'URL doit contenir uniquement des caractères de chemin d'accès d'URI valides et ne doit pas comporter de chaîne ou de fragment de requête, car elle est définie par la norme RFC 3986.
  3. Créez votre page de sélection personnalisée. Vous pouvez implémenter la page de sélection personnalisé comme vous le souhaitez, mais elle requiert les données de paramètre de demande qui lui sont envoyées afin de garantir que les options appropriées sont affichées.

    Acceptez et utilisez les paramètres de demande suivants :

    request_url
    L'URL de demande de ressource protégée d'origine, incluant les paramètres de demande le cas échéant. La page de sélection personnalisée doit soumettre le fournisseur de médias sociaux que l'utilisateur sélectionne en retour. Si, par exemple, la page de sélection personnalisée utilise un formulaire HTML pour afficher les options de médias sociaux, l'attribut action du formulaire doit être défini sur cette URL. En outre, des paramètres de demande doivent être inclus comme entrées masquées au sein du formulaire.
    request_method
    Méthode de demande HTTP de la demande de ressource protégée d'origine. La page de sélection personnalisée doit utiliser la même méthode de demande HTTP pour soumettre le fournisseur de médias sociaux sélectionné par l'utilisateur en retour de l'URL de demande d'origine.
    submit_param_name
    Nom à utiliser pour le paramètre ou l'en-tête spécifiant l'ID du fournisseur de médias sociaux sélectionné par l'utilisateur. Quand la page de sélection personnalisée soumet le fournisseur de médias sociaux que l'utilisateur sélectionne en retour de l'URL de demande d'origine, l'ID configuration du fournisseur de médias sociaux doit être spécifié par un paramètre ou un en-tête indiquant ce nom.
    Prenons l'exemple des variables suivantes :
    • L'URL est https://www.example.com/protected/resource.
    • L'ID du fournisseur de médias sociaux que l'utilisateur sélectionne est 123456.
    • La valeur de submit_param_name est social_login_hint.

    La page de sélection personnalisée doit soumettre la sélection sous la forme d'un paramètre, par exemple https://www.example.com/protected/resource?social_login_hint=123456, ou d'un en-tête de demande. Le nom de l'en-tête doit être social_login_hint, et sa valeur doit être 123456 lorsque vous soumettez la demande en retour de l'URL de demande d'origine.

    Tout paramètre inclus dans la demande d'origine doit également être inclus par la page de sélection personnalisée lorsque vous soumettez la sélection de l'utilisateur en retour de l'URL de demande d'origine.

    configuration
    Objet JSON contenant des informations sur chaque fournisseur de médias sociaux configuré pour l'authentification de la demande d'origine.
    social-media
    Clé de niveau supérieur qui se mappe à un tableau JSON des configuration de médias sociaux. Chaque configuration est un objet JSON avec les entrées suivantes :
    • id : ID configuration de ce fournisseur de médias sociaux. Il s'agit de la valeur qui doit être soumise si l'utilisateur choisit ce fournisseur de médias sociaux.
    • nom_affichage : Valeur qui doit être affichée pour l'utilisateur pour représenter ce fournisseur de médias sociaux. Cette valeur est généralement le nom public du fournisseur de médias sociaux, comme Google ou Facebook, bien que la valeur puisse être modifiée pour tout fournisseur de médias sociaux dans la configuration de serveur.
    • site Web (facultatif) : Site web associé à ce fournisseur de médias sociaux. Il est possible qu'un site Web ne soit pas configuré pour chaque fournisseur de médias sociaux, cette valeur étant alors omise.
    Examinez le fragment de configuration suivant :
    <socialLoginWebapp socialMediaSelectionPageUrl="/myApp/customSelection" />
    
    <twitterLogin consumerKey="..." consumerSecret="..." />
    <googleLogin clientId="..." clientSecret="..." />
    <oauth2Login id="customOAuthProvider" clientId="..." clientSecret="..." />

    Envisagez une demande de ressource protégée dirigée vers https://myhost.com/acme?product_id=123&product_name=anvil et qui utilise la méthode de demande GET HTTP. Quand cette demande est reçue, le serveur détermine que plusieurs fournisseurs protègent la demande et qu'une page de sélection personnalisée est configurée. La demande est redirigée vers la page de sélection personnalisée de façon similaire à l'exemple suivant :

    HTTP/1.1 302 Found
    Location: https://myhost.com/myApp/customSelection?
        request_url=https%3A%2F%2Fmyhost.com%2Facme%3Fproduct_id%3D123%26product_name%3Danvil
        &request_method=GET
        &submit_param_name=social_login_hint
        &configuration=%7B%22social-media%22%3A%5B%7B%22id%22%3A%2213579%22%2C%22display-name%22%3A%22Twitter%22%2C%22website%22%3A%22https%3A%2F%2Fwww.twitter.com%22%7D%2C%7B%22id%22%3A%2224680%22%2C%22display-name%22%3A%22Google%22%2C%22website%22%3A%22https%3A%2F%2Fwww.google.com%22%7D%2C%7B%22id%22%3A%22-123456%22%2C%22display-name%22%3A%22An%20OAuth%20Provider%22%7D%5D%7D

    Remarque : L'attribut de configuration décodé est affiché dans l'exemple suivant :

    {"social-media":
        [
            {"id":"13579","display-name":"Twitter","website":"https:\/\/www.twitter.com"},
            {"id":"24680","display-name":"Google","website":"https:\/\/www.google.com"},
            {"id":"-123456","display-name":"An OAuth Provider"}
        ]
    }

    Si la page de sélection personnalisée utilise un formulaire HTML pour afficher les options de médias sociaux, il est possible que le formulaire soit implémenté comme dans l'exemple suivant :

    <form action="https://myhost.com/acme" method="GET">
    <button type="submit" name="social_login_hint" value="13579">Twitter</button>
    <button type="submit" name="social_login_hint" value="24680">Google</button>
    <button type="submit" name="social_login_hint" value="-123456">An OAuth Provider</button>
    <input type="hidden" name="product_id" value="123" />
    <input type="hidden" name="product_name" value="anvil" />
    </form>
    Remarque : Dans l'exemple précédent, les paramètres de demande inclus dans la demande d'origine sont spécifiés comme entrées masquées dans le formulaire afin de garantir qu'il seront inclus quand le formulaire est soumis. Lorsque vous implémentez la page de sélection personnalisée, assurez-vous que les paramètres de demande de la demande d'origine sont correctement pris en compte et inclus dans la demande soumise en retour à l'URL de demande d'origine quand l'utilisateur choisit un fournisseur de médias sociaux.

Icône indiquant le type de rubrique Rubrique Tâche

Nom du fichier : twlp_cust_social_form.html