---
{
	"title": "Expiration de la session",
	"language": "fr",
	"category": "Plugiciels",
	"categoryfile": "plugins",
	"description": "Créer un délai d'inactivité qui avertit les utilisateurs lorsque leur session est sur le point d'expirer.",
	"altLangPrefix": "session-timeout",
	"dateModified": "2015-07-21"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>But</h2>
	<p>Créer un délai d'inactivité qui avertit les utilisateurs lorsque leur session est sur le point d'expirer.</p>
	<p>Ce plugiciel aidera les propriétaires d'actifs Web à configurer leurs actifs avec une fonction « Expiration de la session ». Celle-ci sera activée en deux circonstances : après une période de temps spécifique ou lors d'inactivité.</p>
	<p>Par exemple, si l'utilisateur demeure trop longtemps sur la même page, la fonction sera activée. De même, si l’utilisateur demeure inactif, la fonction sera activée. Le fureteur affichera alors une boîte de dialogue proposant deux options à l'utilisateur ; s’il souhaite rester connecté il devra sélectionner « Continuer la session » et ce, dans un laps de temps précis et s’il souhaite mettre fin à sa session, il n’aura qu’à choisir « Mettre fin à la session ». Advenant que l'utilisateur tarde trop à faire son choix, ce sera le paramètre de déconnexion qui s’affichera.</p>
</section>


<div lang="en">
	<p><strong>Needs translation</strong></p>
	<section>
		<h2>Use when</h2>
		<ul>
			<li>A session timeout warning is required. This will alert the user before their session expires and give them a chance to extend the session.</li>
			<li>User activity on a web page should extend their session.</li>
		</ul>
	</section>
</div>

<section>
	<h2>Exemple pratique</h2>
	<p><a href="../../../demos/session-timeout/session-timeout-fr.html">Exemple de base</a></p>
	<p><a href="../../../demos/session-timeout/session-timeout-signin-fr.html">Exemple avec l'option signInUrl</a></p>
</section>

<div lang="en">
	<p><strong>Needs translation</strong></p>
	<section>
		<h2>How to implement</h2>
		<ol>
			<li>
				Add a <code>class="wb-sessto"</code> element to the web page (only required once). You must set the <code>logouturl</code>, which controls where the user is redirected if their session expires:
				<pre><code>&lt;span class="wb-sessto" data-wb-sessto='{"logouturl": "https://app.gc.ca/logout"}'&gt;&lt;/span&gt;</code></pre>
			</li>
			<li>Configure the plugin using the <code>data-wb-sessto</code> attribute of the element:
				<pre><code>&lt;span class="wb-sessto" data-wb-sessto='{
		"inactivity": 1200000,
		"reactionTime": 30000,
		"sessionalive": 1200000,
		"logouturl": "./",
		"signInUrl": null,
		"refreshCallbackUrl": "./",
		"refreshOnClick": true,
		"refreshLimit": 200000}'&gt;&lt;/span&gt;</code></pre>
			</li>
		</ol>
	</section>

	<section>
		<h2>Configuration options</h2>
		<p>All configuration options of the plugin are controlled by the <code>data-wb-sessto</code> attribute or <code>window[ "wb-sessto" ]</code>. Any configuration parameter that accepts a time value, can optionally have the time unit specified (e.g. "100 ms").</p>
		<p>Supported time units are:</p>
		<ul>
			<li><code>ms</code>: millisecond (0.001 seconds)</li>
			<li><code>cs</code>: centisecond (0.01 seconds)</li>
			<li><code>ds</code>: decisecond (0.1 seconds)</li>
			<li><code>s</code>: seconds (1 second)</li>
			<li><code>das</code>: dekasecond (10 seconds)</li>
			<li><code>hs</code>: hectosecond (100 seconds)</li>
			<li><code>ks</code>: kilosecond (1,000 seconds)</li>
		</ul>
		<table class="table">
			<thead>
				<tr>
					<th>Option</th>
					<th>Description</th>
					<th>How to configure</th>
					<th>Values</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code>inactivity</code></td>
					<td>Sets the inactivity timeout. Once this expires, the plugin's modal dialog will appear and prompt the user to continue or end their session.</td>
					<td>Provide a numeric value, optionally with a time unit appended.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>Default inactivity period is 20 minutes.</dd>
							<dt>Numeric value:</dt>
							<dd>Treated as a millisecond value.</dd>
							<dt>String numeric value with time unit appended (e.g. "100 s"):</dt>
							<dd>Treated as a time value in the provided unit.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>reactionTime</code></td>
					<td>Sets the period of time the user has to perform an action once the modal dialog is displayed</td>
					<td>Provide a numeric value, optionally with a time unit appended.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>Default reaction time is 3 minutes.</dd>
							<dt>Numeric value:</dt>
							<dd>Treated as a millisecond value.</dd>
							<dt>String numeric value with time unit appended (e.g. "100 s"):</dt>
							<dd>Treated as a time value in the provided unit.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>sessionalive</code></td>
					<td>Sets the period of time before an ajax request is made to the server to determine if the session is still alive. A <code>refreshCallbackUrl</code> must be specified for this to work.</td>
					<td>Provide a numeric value, optionally with a time unit appended.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>Default session alive time is 20 minutes.</dd>
							<dt>Numeric value:</dt>
							<dd>Treated as a millisecond value.</dd>
							<dt>String numeric value with time unit appended (e.g. "100 s"):</dt>
							<dd>Treated as a time value in the provided unit.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>logouturl</code></td>
					<td>URL that users are sent to when their session has expired.</td>
					<td>Provide a URL.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>Default logout URL is "./"</dd>
							<dt>String URL:</dt>
							<dd>The URL to redirect to once the session has expired.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>signInUrl</code></td>
					<td>URL to the Sign-In page.</td>
					<td>Provide a URL.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>Default sign-in Url is null.</dd>
							<dt>String URL:</dt>
							<dd>The URL to the Sign-In page.  The logout URL is used if none is provided.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>refreshCallback</code></td>
					<td>The function used to check the response received from <code>refreshCallbackUrl</code>. This parameter cannot be specified on the <code>data-wb-sessto</code> attribute.</td>
					<td>Provide a function.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>The response is matched exactly to the literal string "true".</dd>
							<dt>Function:</dt>
							<dd>The function needs to accept a single string parameter, which will be the response body text. It must return true if the session is alive, or false otherwise.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>refreshCallbackUrl</code></td>
					<td>URL used to perform an ajax request to determine the validity of the session. See the <code>method</code> and <code>refreshCallback</code> parameters for more details.</td>
					<td>Provide a URL.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>No ajax request will be performed.</dd>
							<dt>String URL:</dt>
							<dd>An ajax request (POST) will be made to the URL.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>refreshOnClick</code></td>
					<td>Determines if clicking on the document should reset the inactivity timeout and perform an ajax request (if a <code>refreshCallbackUrl</code> has been specified).</td>
					<td>Provide a boolean true/false value.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>true (refresh on click is turned on)</dd>
							<dt>Boolean:</dt>
							<dd>true/false.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>refreshLimit</code></td>
					<td>Sets the amount of time that must pass before an ajax request can be made.</td>
					<td>Provide a numeric value, optionally with a time unit appended.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>Default refresh limit is 2 minutes.</dd>
							<dt>Numeric value:</dt>
							<dd>Treated as a millisecond value.</dd>
							<dt>String numeric value with time unit appended (e.g. "100 s"):</dt>
							<dd>Treated as a time value in the provided unit.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>method</code></td>
					<td>Sets the request method used for ajax requests. While all methods are accepted, the response must contain a message body therefore methods that preclude this are not recommended. Recommended: GET, POST.</td>
					<td>Provide a string value.</td>
					<td>
						<dl>
							<dt>None (default):</dt>
							<dd>The POST request method is used.</dd>
							<dt>String:</dt>
							<dd>Treated as the request method (HTTP verb). The method is used as entered.</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<td><code>additionalData</code></td>
					<td>Additional data to send with the request.</td>
					<td>Provide a string value, array, object or null.</td>
					<td>
						<dl>
							<dt>None or null (default):</dt>
							<dd>No additional data is sent with the request.</dd>
							<dt>String:</dt>
							<dd>Treated as a query string of the form <code>key1=value1&amp;key2=value2</code> and sent as-is.</dd>
							<dt>Array or object:</dt>
							<dd>Converted to query string form before being sent with the request.</dd>
						</dl>
					</td>
				</tr>
			</tbody>
		</table>
	</section>

	<section>
		<h2>Events</h2>
		<p>Document the public events that can be used by implementers or developers.</p>
		<table class="table">
			<thead>
				<tr>
					<th>Event</th>
					<th>Trigger</th>
					<th>What it does</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code>wb-init.wb-sessto</code></td>
					<td>Triggered manually (e.g., <code>$( ".wb-sessto" ).trigger( "wb-init.wb-sessto" );</code>).</td>
					<td>Initializes the plugin and starts the session and inactivity timeouts. <strong>Note:</strong> the session timeout plugin will be initialized automatically unless the <b>.wb-sessto</b> element is added after the page has already loaded.</td>
				</tr>
				<tr>
					<td><code>wb-ready.wb-sessto</code> (v4.0.5+)</td>
					<td>Triggered automatically after the Session timeout plugin initializes.</td>
					<td>Used to identify when and where the Session timeout plugin initializes (target of the event).
						<pre><code>$( document ).on( "wb-ready.wb-sessto", ".wb-sessto", function( event ) {
});</code></pre>
						<pre><code>$elm.on( "wb-ready.wb-sessto", function( event ) {
});</code></pre>
					</td>
				</tr>
				<tr>
					<td><code>inactivity.wb-sessto</code></td>
					<td>Triggered manually and by the plugin (e.g., <code>$( ".wb-sessto" ).trigger( "inactivity.wb-sessto" );</code>).</td>
					<td>Causes the modal dialog to appear and prompt the user to continue or end their session. This event is triggered automatically when the <code>inactivity</code> timeout expires.</td>
				</tr>
				<tr>
					<td><code>keepalive.wb-sessto</code></td>
					<td>Triggered manually and by the plugin (e.g., <code>$( ".wb-sessto" ).trigger( "keepalive.wb-sessto" );</code>).</td>
					<td>Causes an ajax request to be made (if a <code>refreshCallbackUrl</code> has been specified). This will alert the user that their session has expired if the <code>refreshCallbackUrl</code> response is not "true".</td>
				</tr>
				<tr>
					<td><code>reset.wb-sessto</code></td>
					<td>Triggered manually and by the plugin (e.g., <code>$( ".wb-sessto" ).trigger( "reset.wb-sessto" );</code>).</td>
					<td>Restarts the <code>inactivity</code> and <code>keepalive</code> timeouts.</td>
				</tr>
				<tr>
					<td><code>wb-ready.wb</code> (v4.0.5+)</td>
					<td>Triggered automatically when WET has finished loading and executing.</td>
					<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
						<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
					</td>
				</tr>
			</tbody>
		</table>
		<p><strong>Note:</strong> when manually triggering the <code>inactivity</code>, <code>keepalive</code> and <code>reset</code> events, you must pass the <code>data-wb-sessto</code> attribute as a second argument:</p>
		<pre><code>// Get a reference to the session timeout element and its <code>data-wb-sessto</code> attribute
	var $element = $( ".wb-sessto" ),
		settings = $element.data( "wb-sessto" );

	// Trigger the event on the element
	$element.trigger( "reset.wb-sessto", settings );</code></pre>
	</section>

	<section>
		<h2>Source code</h2>
		<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/session-timeout">Session timeout source code on GitHub</a></p>
	</section>
</div>
