| |
[ 16. March 2000]
- Martin_Nemecek
JavaScript: Ochrana vstupu na stránku pomocou hesla
Ukážeme si ako pomocou JavaScriptu zabespečíme našu stránku pred neoprávneným vstupom nepovolaných návštevníkov.
Ukážeme si dva spôsoby ako na to a bude len na vás aký spôsob si vyberiete.
Celý systém je zložený z viacerých funkcií a postupných krokov, ktoré na seba nadväzujú. V prvom rade si zadefinujeme funkciu gateKeeper(). Tá bude zabespečovať na vstupnej stránke otvorenie nového okna (po kliknutí na odkaz vedúci do chránenej oblasti) v ktorom bude formulárové pole na vyplnenie hesla. Celá funkcia bude vypadať nasledovne:
function gateKeeper() {
nifty_little_window = window.open('gatekeep.html', 'theKeeper',
'width=350,height=200,resizable=1');
}
Celý náš príklad sa bude skladať z 3 súborov. Prvý si nazveme protect.html a bude obsahovať už spomenutý script s funkciou gateKeeper() .
<HTML>
<HEAD>
<TITLE> Protect Page - Gate Keeper - protect.html</TITLE>
</HEAD>
<BODY BGCOLOR="<SCRIPT LANGUAGE="javascript">
<!--- Skryť pred staršími browsermi
var nifty_little_window = null;
function gateKeeper() {
nifty_little_window = window.open('gatekeep.html', 'theKeeper',
'width=350,height=200,resizable=1');
}
// End hiding --->
</SCRIPT>
<form>
<input type="button" value="Kliknite sem" onClick="gateKeeper()">
</form>
</BODY>
</HTML></B>
V predchádzajúcom kóde si môžeme všimnúť okrem klasického zadefinovania známej funkcie gateKeeper() odkaz - tlačítko, na ktoré je viazaná udalosť onClick , ktoré volá našu známu funkciu.
Táto bude obsahovať dve nasledovné funkcie, prva s názvom goForit() , ktorá nám vyhodnotí zadané heslo. Keď nájde stránku s názvom "heslo".html, potom ju zobrazí ak nie tak smola :) Môžeme si všimnúť, že celá autorizácia pomocou hesla je položená na názve konkrétnej HTML stránky a porovnaní zadaného hesla s jej názvom. Teraz už sľúbená funkcia:
function goForit() {
var location;
var password;
password=this.document.testform.inputbox.value
location=password + ".html"
fetch(location)
theKeeper=window.close()
}
Teraz bude nasledovať stránka gatekeep.html , ktorá bude obsahovať pole na vyplnenie požadovaného hesla a vlastný vykonávací mechanizmus.
<HTML>
<HEAD>
<TITLE>Gate Keeper</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- Skryť pred staršími browsermi
function goForit() {
var location;
var password;
password=this.document.testform.inputbox.value
location=password + ".html"
fetch(location)
theKeeper=window.close()
}
function fetch(location) {
var root;
if (opener.closed) {
root=window.open('','theKeepersGopher','toolbar=yes,location=yes,status=yes,
menubar=yes,scrollbars=yes,resizable=yes,copyhistory=no');
root.location.href = location;
} else {
opener.location.href = location;
}
}
// koniec skr. --->
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ROWSPAN=2 WIDTH=50%>>
<TD WIDTH=50% ALIGN=CENTER VALIGN=MIDDLE>
<FONT FACE="ARIAL" SIZE=2><B>Pokúšate sa vstúpiť do chránenej oblasti. Zadajte
prosím Vaše prístupové meno a heslo.</B></FONT>
<TR>
<TD WIDTH=50% ALIGN=CENTER VALIGN=BOTTOM>
<CENTER>
<FORM NAME="testform">
<INPUT TYPE="text" NAME="inputbox" VALUE="" size=20>
<INPUT TYPE="button" NAME="button" Value="Submit Password" onClick="goForit(this.form)">
</FORM>
</CENTER>
</TABLE>
</BODY>
</HTML>
Takže toľko k samotnej ochrane vašej stránky týmto spôsobom.
Ukážeme si teraz druhý spôsob, troch jednoduchší a nenáročnejší.
Funkčný príklad bude vypadať nasledovne (vložte heslo "heslo1"):
A zdrojový kód bude vypadať nasledovne:
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Vložte prosím Vaše heslo',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "heslo1") {
alert('Správne!');
window.open('protectpage.html');
break;
}
testV+=1;
var pass1 =
prompt('Prístup zamietnutý - Heslo nesprávne.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Vstup do chránenej oblasti" onClick="passWord()">
</FORM>
</CENTER>
Takže to by sme mali. Sami môžete vidieť že sa jedná o jednoduchý spôsob zabespečenia HTML stránok. Pokročilejšie funkcie zabespečenia je potrebné hľadať v systéme akým je ASP, PHP, alebo CGI ... ale pre začiatok stačí.
Majte sa krásne. Do ďalšieho javascriptovania :)
|
|
| |
|
"JavaScript: Ochrana vstupu na stránku pomocou hesla" | Login / vytvor konto | 1 Komentár |
|
Za obsah komentárov je zodpovedný užívateľ, nie prevádzkovateľ týchto stránok. |
Re: JavaScript: Ochrana vstupu na stránku pomocou hesla (Skóre: 0) kým: Anonym dňa 30. May 2001 | Ma to jeden neosetreny bug:
ked dam cancel, tak sa vola history.back() -
- jednak by som rad ostal na stranke, z ktorej sa okno otvorilo
- a jednak pokial je moja history prazdna, tak to hadze chybu.
|
[ Odpoveď ] |