| |
[ 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∩ ] |
Homepage
