Quand on intègre le CMS Ametys, il est parfois nécessaire de mettre en place une authentification sur le site, par exemple dans le cas de pages à accès limité (pour plus d'informations, veuillez consulter la page Limitation d'accès d'une page du manuel utilisateur).
Le paramétrage de cette authentification est décrit dans la page authentification des visiteurs du manuel d'intégration. Cependant, on peut avoir besoin de créer son propre formulaire de connexion (pour qu'il corresponde à la charte graphique du site par exemple). Il faut alors redéfinir le gabarit graphique et/ou le formulaire de connexion
- Surcharger le gabarit utilisé pour rendre le formulaire de connexion
- Surcharger le formulaire de connexion
Surcharger le gabarit utilisé pour rendre le formulaire de connexion
Par défaut, le gabarit utilisé pour "enrober" (ou contenir) le formulaire est login (skins/[NOM_SKIN]/templates/login/styllesheets/template.xsl); s'il n'existe pas c'est le template page qui sera utilisé (skins/[NOM_SKIN]/templates/page/styllesheets/template.xsl)
Par défaut, ce gabarit doit nécessairement contenir une zone dont l'identifiant est default ; c'est dans cette zone que va s'afficher le formulaire.
<div class="art-postcontent">
<zone name="default" level="2"/>
</div>
Pour plus d'explications sur ces notions, vous pouvez consulter la page Intégration graphique.
Surcharger le formulaire de connexion
Le formulaire peut être surchargé dans votre charte graphique si le code HTML proposé par défaut ne convient pas. Pour cela, créez une feuille de style XSL à l'emplacement skins/[NOM_SKIN]/services/web/pages/frontoffice-login/login.xsl.
Vous pouvez récupérer un exemple de fichier login.xsl.
Nous vous conseillons d'utiliser ce fichier comme base de travail et de mettre en place vos modifications. En sortie cette xsl doit respecter le formalisme d'enrobage (cf xsl d'Enrobage).
En entrée cette xsl reçoit en xml :
<login-infos public-signup="true"> <username></username> <action>login</action> <requestedurl>/fr/espace-membre.html</requestedurl> <signup-page id="page://e0de3360-c422-4420-9aad-2f8d44ff3cf4"></signup-page> <password-change-page id="page://a06a982f-0cfa-4aea-996f-41dce875cf67"></password-change-page> <user-main-prefs-page id="page://b2294497-c17d-4be0-a06f-5f2d4d3eae63"></user-main-prefs-page> </login-infos>
- L'attribut public-signup vaut true si le site autorise une inscription publique, c'est à dire que les visiteurs du site sont autorisés à créer un compte.
- La balise <action> contient: login si le formulaire de connexion doit être affiché, failed si l'authentification a échoué.
- La balise <requestedURL> doit contient l'url (relative) de la page qui a été demandé et qui nécessite une authentification préalable
- La balise <username> contient la valeur du login pour l'afficher à nouveau dans le formulaire en cas d'échec de l'authentification (mauvais mot de passe par exemple)
- La balise <signup-page> contient l'identifiant de page contenant le formulaire de création d'un nouveau compte
- La balise <password-change-page contient l'identifiant de page contenant le formulaire de modification de mot de passe
- La balise <user-main-prefs-page> contient l'url de la page pour les préférences utilisateurs
Rendez-vous sur la page Création de comptes visiteurs du manuel utilisateur pour plus d'informations.
Modifiez par exemple dans ce fichier login.xsl le template xsl "form" pour dessiner votre propre formulaire de connexion:
<xsl:template name="form">
<form method="post">
<input type="hidden" name="requestedURL" value="{requestedURL}"/>
<!-- Login -->
<div class="field">
<label for="username">Adresse email</label>
<input id="username" name="username" type="text"/>
</div>
<!-- Mot de passe -->
<div class="field">
<label for="password">Mot de passe</label>
<input id="password" name="password" type="password"/>
</div>
<!-- Mémoriser la connexion -->
<input type="checkbox" id="rememberMe" name="rememberMe" checked="checked"/>
<label for="rememberMe">Rester connecter</label>
<div class="button">
<input type="submit" title="Connexion"/>
</div>
</form>
</xsl:template>
Pour aller plus loin
Si vous souhaitez redéfinir les champs du formulaire, il faut créer un nouveau plugin pour le site en suivant les instructions de la page Création d'un plugin et ajouter l'extension suivante en modifiant les balises username-field, password-field et rememberMe-field selon vos propres champs.
<extension point="org.ametys.runtime.authentication.CredentialsProvider"
id="org.ametys.site.plugins.site.authentication.MyFormBased"
class="org.ametys.plugins.site.authentication.SiteFormBasedCredentialsProvider"
logger="org.ametys.runtime.authentication.formbased">
<username-field>MyUsername</username-field>
<password-field>MyPassword</password-field>
<rememberMe-field>rememberMe</rememberMe-field>
<cookie>
<cookieEnabled>true</cookieEnabled>
<cookieLifeTime>604800</cookieLifeTime>
<cookieName>AmetysSiteAuthentication</cookieName>
</cookie>
<loginUrl internal="true"/>
<loginFailedUrl provideLoginParameter="true" internal="true"/>
</extension>
Notez que les url de login (loginUrl et loginFailedUrl) ne doivent pas être spécifiées, contrairement à l'extension FormBased définie dans le CMS (cf page Création d'un formulaire de connexion).
<org.ametys.runtime.authentication.CredentialsProvider>org.ametys.site.plugins.site.authentication.MyFormBased</org.ametys.runtime.authentication.CredentialsProvider>
Retour en haut