Wystarczy edytor HTML, PHP i MySQL, aby ukryć szczególnie ważne strony internetowe przed wzrokiem niepowołanych osób
Niektóre strony po prostu nie powinny być dostępne
dla wszystkich. Nie chciałbyś, aby obce osoby odwiedzały podstrony, które wykorzystujesz
do aktualizacji firmowego katalogu. Lepiej także się stanie, jeżeli zdjęcia z ostatniej sylwestrowej imprezy,
jakie powiesiłeś dla znajomych w sieci, nie dostaną się w ręce szefa. Na szczęście, dzięki doskonałemu edytorowi
HTML, jakim bez wątpienia jest Dreamweaver, masz dostęp do narzędzi umożliwiających ograniczenie dostępu do najbardziej sekretnych stron internetowych.
Na początku powinieneś stworzyć bazę danych ze spisem osób dopuszczonych do przeglądania twojego serwisu. Podstawowe informacje, jakich będziesz potrzebował, to nazwa i hasło dla każdego z użytkowników.
Zazwyczaj rolę nazwy użytkownika pełni adres poczty elektronicznej, hasło można natomiast wygenerować za pomocą dedykowanych skryptów, jakich mnóstwo dostępnych jest w sieci. Czym bardziej skomplikowane będzie hasło, tym trudniej będzie je złamać, dlatego warto zawrzeć w nim cyfry oraz duże i małe litery, otrzymując w efekcie coś w rodzaju \”A59gkdi00\” lub \”7u57ua0I\”.
Możesz również dodatkowo utworzyć kilka poziomów dostępu.
Na początku chroniony serwis może składać się jedynie z kilku stron – np. panelu administracyjnego. Lecz wraz z rozwojem witryny możesz zechcieć stworzyć wydzielone sekcje serwisu, np. sekcję \”tylko dla zarejestrowanych użytkowników\”. W takim wypadku trzeba zadbać o to, aby nowa sekcja nie mieszała się z częścią administracyjną, tak jak i zwykli internauci nie powinni mieć dostępu do podstron
dla stałych gości. Rozwiązanie problemu polega na stworzeniu statusu dla każdego z rodzaju użytkowników,
np. \”admin\”, \”zarejestrowany użytkownik\” i \”gość serwisu\”. Dzięki Dreamweaverowi będziesz mógł ograniczyć dostęp do konkretnej strony wyłącznie do grona osób o odpowiednim statusie.
Po wypełnieniu bazy danych trzeba będzie stworzyć formularz, za pośrednictwem którego użytkownicy będą mogli się zalogować, a następnie ustanowić procedurę sprawdzania hasła. Oczywiście nie musisz wstawiać hasła dla każdej strony w twoim serwisie, ale te, które wybrałeś, powinny być generowane dynamicznie po stronie serwera (dopuszczalne rozszerzenia
to .php, .asp, .cfm, .jsp oraz .aspx). W naszym przykładzie skorzystamy w tym celu z PHP.
Niezbędny okaże się dostęp do serwera z obsługą PHP i bazą danych MySQL. Mile widziana będzie również
dobra znajomość obsługi edytora Dreamweaver.
Krok pierwszy: Konfiguracja bazy danych
{tlo_1}
1. Zainstaluj serwer testowy
Zainstaluj na swoim komputerze testowy serwer, składający się z serwera HTTP (Apache), bazy danych (MySQL) i obsługującego PHP. Możesz w tym celu użyć dystrybucji XAMPP, zawierającej wszystkie wymienione powyżej elementy. Skopiuj katalog \”password\”, który znajduje się wśród materiałów pomocniczych do tego artykułu na naszym CD, i umieść go w katalogu głównym wirtualnego serwera.
{/tlo}
{tlo_0}
2. Stwórz nową bazę danych
Do zarządzania bazami danych MySQL najczęściej używa się aplikacji phpMyAdmin. Udostępnia ją większość dostawców usług internetowych, wchodzi ona także w skład wielu pakietów w rodzaju XAMPP-a. Otwórz przeglądarkę internetową i wpisz adres http://localhost/phpmyadmin. W polu tekstowym podaj nazwę nowej bazy danych i kliknij na poleceniu \”Create\”.
{/tlo}
{tlo_1}
3. Stwórz nową tabelę
Informacje określające, kto posiada dostęp do chronionej hasłem strony, będą zapisane w tabeli w bazie danych. Jako jej nazwę (Name) podaj \”users\”, liczbę pól (Number of fields)określna4, a następnie kliknij na przycisku \”Go\”, aby dodać nową tabelę.
{/tlo}
{tlo_0}
4. Dodaj pola do tabeli
Wpisz po kolei nazwy każdego z pól w tabeli (pozycja \”Field\”): \”userID\”, \”username\”, \”password\” i \”access\”. W kolumnie \”Type\” ustaw dla pola \”userID\” wartość \”INT\”, a dla pozostałych pól wpisz wartości 32 w kolumnie \”Lenght/Values\”. Upewnij się, że dla pola \”userID\” ustawiłeś w menu \”Extra\” pozycję \”auto_increment\”, a w polach wyboru wybrałeś pierwszą opcję.
{/tlo}
{tlo_1}
5. Dodaj użytkownika do tabeli
Kliknij na odnośniku \”Insert\” dla nowej tabeli. Dodaj wartości nowych rekordów w bazie danych; pozostaw pole \”Value\” dla \”userID\” (baza danych wypełni je automatycznie), a następnie wpisz jako nazwę użytkownika (username) \”bigCheese\” oraz \”openSesame\” jako hasło (password). Dla pola \”access\” wpisz \”admin\”. Kliknij na przycisku \”Go\”.
{/tlo}
{tlo_0}
6. Stwórz nowego użytkownika bazy danych
Kliknij na odnośniku \”Localhost\” u góry strony, a następnie na opcji \”privileges\” i wybierz opcję \”Add a new User\”. W polu \”User name\” wpisz nazwę nowego użytkownika, w \”Host\” podaj \”localhost\” oraz to samo nowe hasło w polach \”Password\” i \”Re-type\”. Zaznacz pola \”Select\”, \”Insert\”, \”Update\” i \”Delete\” i naciśnij przycisk \”Go\” na dole strony.
{/tlo}
{tlo_1}
7. Przeładuj podstronę z przywilejami bazy danych
Ponownie kliknij na odnośniku \”Localhost\” u góry strony, aby powrócić do głównego panelu administracyjnego. W celu uaktywnienia przywilejów
bazodanowych nowego użytkownika musisz odświeżyć wszystkie przywileje. Kliknij na odnośniku \”Reload MySQL\”.
{/tlo}
Krok drugi: Konfiguracja Dreamweavera
{tlo_0}
1. Utwórz nową stronę
Uruchom Dreamweavera i z menu startowego wybierz opcję Site > New Site. Upewnij się, że wybrałeś zakładkę \”Advanced\”. W polu \”Site name\” wpisz \”Password\”, a następnie kliknij na ikonie folderu widocznej przy pozycji \”Local root folder\” i wskaż katalog \”password\”, który skopiowałeś wcześniej z CD do katalogu głównego serwera wirtualnego.
{/tlo}
{tlo_1}
2. Zdefiniuj serwer testowy
W oknie \”Site Definition\” wybierz z listy pozycję \”Testing Server\”. W menu \”Server Model\” wskaż pozycję \”PHP MySQL\”, a z menu \”Access\” pozycję \”Local/Network\”. Kliknij na ikonie folderu zlokalizowanej na prawo od pola \”Testing server folder\” i wskaż ten sam katalog, co w poprzednim kroku. W polu \”URL Prefix\”wpisz\”{stala}http://localhost/password/{/stala}\”. Kliknij OK, aby utworzyć nową stronę.
{/tlo}{tlo_0}
3. Skonfiguruj połączenie z bazą danych
Otwórz plik \”login.php\”. Wybierz z menu opcję Window > Databases, aby otworzyć panel baz danych, za pomocą którego będziesz mógł dodawać
do swojej strony funkcje działające w oparciu o bazę danych. Kliknij ikonę z symbolem plusa w lewym górnym rogu panelu i wybierz połączenie MySQL. Spowoduje to wyświetlenie okna \”MySQL Connection\”.
{/tlo}
{tlo_1}
4. Połączenie z bazą danych
W polu \”Connection name\” wpisz nazwę połączenia, może to być dowolne określenie, nie używaj jedynie spacji i znaków interpunkcyjnych. W polu \”MySQL server\” wpisz \”localhost\”. W kolejnych polach podaj nazwę i hasło, które wprowadziłeś w punkcie 6. Na końcu podaj nazwę bazy danych. Zatwierdź, klikając OK.
{/tlo}
{tlo_0}
5. Ustaw właściwości formularzy
Wybierz z menu pozycję Edit > Preferences w celu wywołania okna właściwości. Kliknij na kategorii \”Accessibility\” i upewnij się, że pole \”Form objects\” zostało zaznaczone. Ułatwi to opisywanie poszczególnych pól formularza, które będziesz dodawać w następnym kroku
{/tlo}
Krok trzeci: Formularz
{tlo_1}
1. Wstaw formularz na stronę
Mając otwartą w edytorze stronę login.php, kliknij poniżej nagłówka \”Login Required!\”. Wstaw w tym miejscu formularz, wybierając z menu polecenie Insert > Form > Form. Następnie nadaj mu nazwę \”login\”, korzystając
z panelu właściwości u dołu ekranu
{/tlo}
{tlo_0}
2. Dodaj pole na nazwę użytkownika
Wybierz z menu polecenie Insert > Form > Text Field, aby dodać do formularza pole tekstowe. W nowym oknie wpisz w polu \”Label\” nazwę \”Username\” i wybierz opcję \”Wrap with label tag\” oraz \”Before form item\”. Kliknij OK. Kliknij teraz na nowo utworzonym polu tekstowym, przejdź do panelu właściwości i w polu \”TextField\” wpisz \”username\”.
{/tlo}
{tlo_1}
3. Dodaj pole na hasło
Niezbędne będzie teraz dodanie pustego akapitu poniżej pierwszego pola. Wybierz polecenie Edit > Select Parent Tag. Naciśnij strzałkę w prawo,
a następnie enter. Nowy akapit został utworzony. Powtórz teraz czynności z poprzedniego kroku: jako \”Label\” wpisz \”Password\”, także jako nazwę pola tekstowego podaj \”password\”. W panelu właściwości u dołu ekranu jako \”Type\” wybierz pozycję \”Password\”
{/tlo}{tlo_0}
4. Dodaj przycisk wysyłania
W celu dodania kolejnego pustego akapitu poniżej drugiego pola powtórz czynności z poprzedniego punktu. Aby wstawić przycisk \”Login\”, wybierz z menu polecenie Insert > Form > Button. W oknie \”Input Tag Accessibility Attributes\” zaznacz opcję \”No label tag\” i kliknij OK. Użyj panelu właściwości, aby zmienić dla przycisku pozycję \”Value\” na \”Login\”.
{/tlo}
{tlo_1}
5. Określ procedurę logowania
Kliknij na zakładce \”Server Behaviors\” w bocznym panelu \”Application\”. Kliknij na ikonie z symbolem plusa i wybierz opcję User Authentication > Log In User. Pierwsze trzy opcje powinny już być ustawione. W polu \”Validate using connection\” wybierz nazwę połączenia, którą określiłeś wcześniej. Ustawienia
pozostałych pól powinny wyglądać tak, jak to pokazano na ilustracji.
{/tlo}
Krok czwarty: Ogranicz dostęp do strony
{tlo_0}
1. Ogranicz dostęp do strony
Otwórz plik secret.php – to jest właśnie strona, do której prowadzi hasło. Nie zapominaj o tym, że Dreamweaver potrafi zabezpieczać hasłem jedynie strony generowane dynamicznie (w dużym uproszczeniu są to te o końcówkach .php, .asp, .jsp itd.). Nie działa to w odniesieniu do statycznych stron o zakończeniu .html. Przejdź do panelu \”Server Behaviors\” i wybierz opcję User Authentication > Restrict Access To Page.
{/tlo}
{tlo_1}
2. Określ poziom dostępu
W oknie \”Restrict Access to Page\” zaznacz drugie pole wyboru i kliknij na poleceniu \”Define\”.Zostanie wyświetlone okno \”Define Access Levels\”.W polu \”name\” wpisz \”admin\” i kliknij OK. Określasz w ten sposób, kto może wchodzić na stronę: wartość \”admin\” musi odpowiadać wartości \”admin\” zapisanej w polu \”access\” w tabeli bazy danych. Kliknij na przycisku \”Browse\” i wskaż plik login.php.
{/tlo}
{tlo_0}
3. Dodaj odnośnik do wylogowania
Będąc z powrotem w oknie edycji strony, kliknij
na słowie \”Only\” widocznym w nagłówku. W panelu \”Server Behaviors\” kliknij na ikonie o symbolu plusa i wybierz opcję User Authentication
> Log Out User. W oknie \”Log Out User\” zwróć uwagę na to, czy jest zaznaczone pierwsze pole wyboru, a następnie kliknij na przycisku \”Browse\” i wskaż plik login.php. Kliknij OK.
{/tlo}
{tlo_1}
4. Próba: logowanie
Zapisz zmodyfikowanąstronę.NaciśnijF12,aby zobaczyć stronę w akcji. Nie będziesz mógł podejrzeć zabezpieczonej witryny – zamiast tego zostaniesz przeniesiony do strony logowania. Podaj nazwę użytkownika \”bigCheese\” i hasło \”openSesame\”. Kliknij na przycisku \”Login\”.
{/tlo}
{tlo_0}
5. Próba: wylogowanie
Po zalogowaniu tajna strona będzie wreszcie w pełni dostępna. W praktyce mógłbyś w tej chwili uzyskać dostęp do wszystkich chronionych
hasłem podstron w tym serwisie. Aby mieć pewność, że nikt nie wykorzysta twojego konta użytkownika, zawsze używaj odnośnika \”Log Out\” po skończeniu pracy ze stroną. W ten sposób zostaniesz
cofnięty do ekranu logowania.
{/tlo}
