Hlavná stránka · Diskusné Fórum · Pracovné príležitosti · Zoznam

 Main Menu
o Hlavná stránka
o Zoznam tém
o Zoznam
o Odporučte nás
o Užívatelia
o Vaše konto
o Pridaj článok
o Štatistiky
o Top 10

 Reklama


 Developer Zone's
o Internet
o Tools
o Linux
o CGI Zone
o ASP Zone
o ASP.net
o PHP Zone
o CSS Zone
o JavaScript
o MySQL
o WAP / WML
o WML / WMLScript
o XML / XHTML
o Tipy a triky
o Best of web
o WebServers
o WebDesign
o Grafika

 Servis
o Vyhľadávanie
o Fórum
o Workoffice
o Zoznam článkov
o Reklama
o Pridaj článok
o Pridaj novinku

Napíšte nám
Homepage Do favoritov

 LinkExpres
Interval.cz · Pc.sk
Builder.cz · Mobilmania
PCSvet.cz · Asp.cz
Webdnes · Živě.sk
Zoznam.sk · Atlas.sk
Inzine.sk · PHP.sk
Agent.sk · Lupa.cz
Code.box.sk · Root.cz
Pixel32 · Grafika.cz

 forum.developer.sk
o Fórum ::
o Markup languages
o Scriptové jazyky
o CGI
o PHP/MySQL
o Perl
o Grafika
o Webservery
o HTML Editory
o Browsery
o Bookmarx
o ASP
o Vytvor tému ::

 Pracovné príležitosti
o Ponúkate prácu?
o Hľadáte prácu?

 Autori developer.sk
o Martin Nemeček
o Sväťo Straka
o Jany Masaryk
o Jozef Murín

 
JavaScript [ 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 :)

 
 Príslušné odkazy k téme
  • Javascript.sk
    Viac o téme: JavaScript | Iné články od: Admin | Pošli komentár | Stránka vhodná na tlač width=15 height=11  Pošli tento článok priateľovi, známemu width=15 height=11


    Najčítanejšie články JavaScript:
    Pulldown menu a tabuľka odkazov

    Ďalšie články v rubrike JavaScript:

  •  

    "JavaScript: Ochrana vstupu na stránku pomocou hesla" | Login / vytvor konto | 1 Komentár
    Prah
    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ď ]




    Autorské práva:   ©1999 - 2001 Developer Zone [developer@developer.sk]

    Všetky články sú vlastníctvom autorov Developer Zone. Všetky práva vyhradené. Stránky Developer.sk sú vytvorené pomocou PHP-Nuke.
    Odkazy na nové články je možné preberať pomocou:Backend.php.