Create a login form on the site

When integrating CMS Ametys , it is sometimes necessary to set up authentication on the site, for example in the case of pages with restricted access (for more information, please consult the page Restricting access to a page in the user manual).

The parameters for this authentication are described on the visitor authentication page of the integration manual. However, you may need to create your own connection form (to match your site's graphic charter, for example). In this case, you need to redefine the graphic template and/or the login form

  1. Overload the template used to render the login form
  2. Overload the login form

Overload the template used to render the login form

By default, the template used to "wrap" (or contain) the form is login(skins/[NOM_SKIN]/templates/login/styllesheets/template.xsl); if it doesn't exist, the page template will be used(skins/[NOM_SKIN]/templates/page/styllesheets/template.xsl).

By default, this template must contain a zone whose identifier is default; it is in this zone that the form will be displayed.

<div class="art-postcontent">
    <zone name="default" level="2"/>
</div>

For further explanations of these concepts, please consult the Graphic integration page.

Overload the login form

The form can be overloaded in your graphic charter if the default HTML code is not appropriate. To do this, create a XSL style sheet at skins/[NOM_SKIN]/services/web/pages/frontoffice-login/login.xsl.

You can download a sample login file .xsl.

We advise you to use this file as a basis for your work and to implement your modifications. For output, xsl must comply with the embedding formalism (see xsl embedding).

The input to xsl is 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>
  • The public-signup is true if the site allows public registration, i.e. visitors to the site are authorized to create an account.
  • The <action> contains: login if the login form is to be displayed, failed if authentication failed.
  • The <requestedURL> must contain the (relative)url of the page that has been requested and requires prior authentication
  • The <username> contains the login value to display it again in the form in the event of authentication failure (wrong password, for example)
  • The <signup-page> contains the page identifier for the new account creation form
  • The <password-change-page contains the identifier of the page containing the password modification form
  • The <user-main-prefs-page> contains theurl page for user preferences

For more information, go to the Create visitor accounts page in the user manual.

For example, modify the login file.xsl template xsl "form" to design your own login form:

<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>

Further information
If you wish to redefine the form fields, you must create a new plugin for the by following the instructions on the Creation of a plugin and add the following extension by modifying the tags username-field, password-field and rememberMe-field according to your own fields.

<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>

Please note that url loginUrl and loginFailedUrl do not need to be specified, unlike the FormBased extension defined in CMS (see page Creating a login form).

Then use the Plugins and Workspaces of the to select your new extension, or edit the file directly. WEB-INF/param/runtime.xml
<org.ametys.runtime.authentication.CredentialsProvider>org.ametys.site.plugins.site.authentication.MyFormBased</org.ametys.runtime.authentication.CredentialsProvider>

 

 

Back to top

Setup and integration manual