|
WCTL
Examples
Building
a Logout Button
As discussed
in the section on User Authentication
issues, when you use cookies in your site to help Web Crossing
keep track of who is who, a user is officially logged in until
the browser is quit. This could be a security problem in environments
where users share the same computers for access.
The solution
is to build a logout button (or text link) which will log the
user out by removing the login cookie and expiring their certificate.
This
macro, and a number of other useful templates, are found in the
aptly-named useful.tpl file, which you can retrieve from the Web
Crossing Site FTP directory (ftp.webcrossing.com/pub/WebCrossing/Extras/Templates).
Log in as Anonymous with your email address as your password if
you use a regular FTP program rather than your browser.
Installing
the Logout Macro
This
macro is simple to use and install, although it's long and looks
pretty scary because of the length. All we'll be doing is dropping
the logout macro as-is into our webx.tpl file (or make
it a separate file and do an Include in your webx.tpl file,
as described elsewhere)
Copy
this to your webx.tpl file, as is:
<!------------------- logout ----------------------------
This macro logs out the current user (both cookies and Web Crossing
certificate), and then ask them to log in again.
Usage is <http://yoursite/...?logout@certificate@>
or
<http://yoursite/...?logout@@> -->
%% macro logout %%
<HTML><HEAD>
<!-- Page produced by Web Crossing(tm)/%% platform %%-%%
version %% (http://wwww.webcrossing.com/) for %% siteLicensee
%%-->
<!-- User interface (c)Copyright 1995-2000 by Web Crossing,
Inc. All rights reserved.-->
<title>%% siteTitle %% - Logged Out %% pathTitle %%</title></HEAD>
<body %% background %%>%% preparedFor %%%% banner %%
%% if userUseCookies %%
%% addResponseHttp( "Set-cookie: Web CrossingUser="";
path=/" ) %%
%% endif %%
%% certificateLogout %%
<h1>Logged Out</h1><p>
You've been logged out - please visit again soon!
<form name=loginForm method="POST" action="%% urlBase %%23@%%
certificate %%@%%actionPath%%" name=login
onSubmit="if( window.submitted ) return false; window.submitted
= true; return true;">%%nop%%
<table>
<tr><td>Your name:</td>
<td><input name="username" type=text size=30 maxlength=50
%% if siteHasPasswordForm %%
onblur="if( !window.submitted && this.value
!= '' ){ this.form.submit(); window.submitted = true; }"
%% endif %%><tr><td></tr>%%nop%%
%% if !siteHasPasswordForm %%
<tr><td>Your password:</td>
<td><input name="password" type=password
size=30 maxlength=50
onblur="if( !window.submitted
&& this.form.username.value != '' && this.value != '' )
{ this.form.submit(); window.submitted
= true; }"></td></tr>%%nop%%
%% endif %%
</table>
<br>%% if imgButton %%<input type=image NAME=" Login "
ALT=" Login " BORDER=0 align=middle src="%% siteImages %%/login.gif"
%% pictSizeButton %%>%%nop%%
%% else %%<input type=submit value=" Login "> %% endif %%
%% if siteCanAutoRegister %%
<a href="%% urlBase %%18@@%%actionPath%%"><img
align=middle alt=" New User Registration " border=0 src="%%
siteImages %%/newuser.gif" %% pictSizeButton %%></a>%%nop%%
%% endif %%
%% if siteAllowsGuests %%
<a href="%% urlBase %%13@@%%location%%"><img
alt=" Guest Access " align=middle border=0 src="%% siteImages
%%/gstlgin.gif" %% pictSizeButton %%></a>%%nop%%
%% endif %%
<a href="mailto:%% sysopEmail %%"><img alt=" Lost Password
" align=middle border=0 src="%% siteImages %%/lstpswd.gif" %%
pictSizeButton %%></a>%%nop%%
<a href="mailto:%% sysopEmail %%"><img alt=" email to
Sysop " align=middle border=0 src="%% siteImages %%/emlsysop.gif"
%% pictSizeButton %%></a>%%nop%%
</form>
<SCRIPT language="Javascript"><!--
document.forms.loginForm.username.focus();
window.submitted = false;
//-->
</SCRIPT>
%% if !siteHasPasswordForm %%
<p>(You can <tt>Tab</tt> out of
the password field to login automatically.)
%% endif %%
%% footer %%
</body></html>
%% endmacro %%
What This All
Does
Don't
let the length intimidate you. Let's look at each section overall,
just to see what it's doing - we won't worry about all the details,
since we're not going to change anything in it anyway. Don't copy
this code below! It's the same as the code above that you already
copied to your webx.tpl file.
%% macro logout %%
<HTML><HEAD>
<!-- Page produced by Web Crossing(TM)/%% platform %%-%%
version %% (http://www.webcrossing.com/) for %% siteLicensee
%%-->
<!-- User interface (c)Copyright 1995-2000 by Web Crossing,
Inc. All rights reserved.-->
<title>%% siteTitle %% - Logged Out %% pathTitle %%</title></HEAD>
<body %% background %%>%% preparedFor %%%% banner %%
- This
is just the usual code to begin a page with the standard
HTML and code to produce a title, background, and page
banner like all your other pages. Note the words "Logged
Out" included in the title.
|
%% if userUseCookies %%
%% addResponseHttp( "Set-cookie: Web CrossingUser="";
path=/" ) %%
%% endif %%
%% certificateLogout %%
- This
part does all the work! If the user has a cookie, it removes
it, and it also logs out the user's certificate.
|
<h1>Logged Out</h1><p>
You've been logged out - please visit again soon!
<form name=loginForm method="POST" action="%% urlBase %%23@%%
certificate %%@%%actionPath%%" name=login
onSubmit="if( window.submitted ) return false; window.submitted
= true; return true;">%%nop%%
<table>
<tr><td>Your name:</td>
<td><input name="username" type=text size=30 maxlength=50
%% if siteHasPasswordForm %%
onblur="if( !window.submitted && this.value
!= '' ){ this.form.submit(); window.submitted = true; }"
%% endif %%><tr><td></tr>%%nop%%
%% if !siteHasPasswordForm %%
<tr><td>Your password:</td>
<td><input name="password" type=password
size=30 maxlength=50
onblur="if( !window.submitted
&& this.form.username.value != '' && this.value != '' )
{ this.form.submit(); window.submitted
= true; }"></td></tr>%%nop%%
%% endif %%
</table>
- This
section notifies the user that he or she has been logged
out, and presents a login screen, so the user (or someone
else) can log in with a different name. This is just a
reproduction of the standard Log In macro.
|
<Br>%% if imgButton %%<input type=image NAME="
Login " ALT=" Login " BORDER=0 align=middle src="%% siteImages
%%/login.gif" %% pictSizeButton %%>%%nop%%
%% else %%<input type=submit value=" Login "> %% endif %%
%% if siteCanAutoRegister %%
<a href="%% urlBase %%18@@%%actionPath%%"><img
align=middle alt=" New User Registration " border=0 src="%%
siteImages %%/newuser.gif" %% pictSizeButton %%></a>%%nop%%
%% endif %%
%% if siteAllowsGuests %%
<a href="%% urlBase %%13@@%%location%%"><img
alt=" Guest Access " align=middle border=0 src="%% siteImages
%%/gstlgin.gif" %% pictSizeButton %%></a>%%nop%%
%% endif %%
<a href="mailto:%% sysopEmail %%"><img alt=" Lost Password
" align=middle border=0 src="%% siteImages %%/lstpswd.gif" %%
pictSizeButton %%></a>%%nop%%
<a href="mailto:%% sysopEmail %%"><img alt=" email to
Sysop " align=middle border=0 src="%% siteImages %%/emlsysop.gif"
%% pictSizeButton %%></a>%%nop%%
</form>
<SCRIPT language="Javascript"><!--
document.forms.loginForm.username.focus();
window.submitted = false;
//-->
</SCRIPT>
%% if !siteHasPasswordForm %%
<p>(You can <tt>Tab</tt> out of
the password field to login automatically.)
%% endif %%
- This
section just adds the row of buttons that appears after
the login form blanks.
|
%% footer %%
</body></html>
%% endmacro %%
- And
this finishes the HTML file with the usual footer for
your site, and ends the macro.
|
Calling This
Macro
We'll
put the code to call this macro into the footer, since it's convenient
there.
Go to
the Control
Panel > Customizing > Banner, footer, background and top-level
page appearance section and find the footer. In the footer,
type this code (changing the "yoursite/...?" part to
correspond with your site name and script name):
<a href="http://yoursite/...?logout@%% certificate
%%@">Logout</a>
So for
webxharbor.com running in CGI mode, we would use this:
<a href="http://www.webxharbor.com/cgi-bin/webx?logout@%%
certificate %%@">Logout</a>
This
will produce a link named "Logout" which calls your
logout macro when it's clicked.
If you're
feeling graphically inclined, you can create a Logout button image
and set up your HTML code so clicking the button activates the
link.
You can
even add your button to the toolbar macro if you want to, but
that's beyond the scope of these lessons.
Resources
WCTL
Concept Reference Page
|
