W tym przewodniku pokażę jak w prosty sposób zaprogramować bezpieczną rejestrację i logowanie użytkowników na naszej stronie WordPress. Dzięki takiej funkcjonalności będziemy mogli tworzyć panele klienta, strony z zawartością premium przeznaczoną tylko dla subskrybentów oraz wszelkie inne rzeczy, które przyjdą nam do głowy.
Wbudowaną funkcją WordPressa jest możliwość tworzenia dowolnej ilości kont o różnych uprawnieniach w panelu administratora. Ręczne tworzenie kont jest czasochłonne i niewygodne kiedy chcemy umożliwić naszym klientom logowanie do strefy klienta gdzie możemy odbierać jakieś niestandardowe formularze lub zamieścić spersonalizowane cenniki. To samo tyczy się subskrybentów i innych przypadków gdzie logowanie do strony WordPress po uprzedniej rejestracji jest konieczne.
Standardowa rejestracja i logowanie użytkowników w WordPress
System WordPress sam w sobie umożliwia dokonać rejestracji i logowania. Służy do tego standardowa strona wp-admin. Aby umożliwić w tym miejscu rejestrację, wystarczy w ustawieniach ogólnych zaznaczyć przy „Członkowstwo” zaznaczyć pole „Każdy może się zarejestrować”.
Po zaznaczeniu tej opcji na standardowej stronie logowania będzie widoczny link umożliwiający założenia konta.
Na skrzynkę przychodzi link do ustawienia hasła a administrator otrzymuje powiadomienie o rejestracji nowego użytkownika.
Użytkownik po zalogowaniu widzi Kokpit, w którym może edytować swoje dane i na tym jego funkcjonalność się kończy. Użytkownik może teraz przejść na stronę główną witryny i jeżeli posiada ona jakieś treści zarezerwowane tylko dla zarejestrowanych użytkowników, to będą one dla niego widoczne.
Jest to standardowe działanie WordPressa. Można go praktycznie wykorzystywać ale większość się zgodzi że proces samej rejestracji i logowania oraz tego co użytkownik widzi po zalogowaniu jest mało optymalne pod kątem user-experience.
Sam widok formularza można łatwo dostosować co opisałem ponad dwa lata temu w artykule: dostosowanie strony logowania WordPress. Bardziej zaawansowane zmiany (wykraczające poza nadpisanie reguł CSS) będą trudniejsze do wprowadzenia.
Z pomocą przychodzą dwa rozwiązania opisane w następnych punktach tego artykułu. Pierwszy sposób będzie polegał na samodzielnym wykonaniu mechanizmu rejestracji, logowania i panelu klienta – bez wtyczek – jak nietrudno się domyślić, to właśnie to rozwiązanie preferuję, bo daje najwięcej możliwości. Drugie podejście to użycie gotowych wtyczek, które pozwolą wprowadzić funkcjonalność w wygodny sposób – jednak w ramach przypadków użycia przewidzianych przez ich autorów.
Rejestracja użytkowników WordPress
W tym rozdziale skupimy się na samej rejestracji. Najpierw musimy stworzyć stronę z formularzem, dzięki której prześlemy login i hasło a potem kawałek kodu odpowiedzialnego za sprawdzenie danych i wprowadzenie ich do bazy. Choć może się to wydawać skomplikowane, przy wykorzystaniu frameworku WordPress całość ograniczy się do kilku linijek kodu. Dzięki temu przewodnikowi zrozumiesz dlaczego warto wykorzystywać gotowe frameworki i systemy CMS, kiedy mamy bardzo typowe przypadki użycia.
1.1 Tworzenie formularza rejestracji i strony rejestracji
Na początku stwórzmy stronę „Rejestracja” zupełnie tak jakby miała to być strona z dowolną treścią. Teoretycznie można go stworzyć w panelu administratora dodając własny HTML. Ja jednak wolę zakodować go na sztywno aby móc go wygodniej edytować we własnym edytorze tekstowym. Potrzebujemy pola:
- nazwa uzytkownika
- hasło,
- opcjonalnie powtórz hasło (co stosuję się już coraz rzadziej),
- no i przycisk submit.
W tym celu kopiuję plik index.php lub inny szablon nadając mu nazwę rejestracja.php. Na początku pliku oznaczam szablon pod zrozumiałą etykietą:
<?php /* *Template Name: Rejestracja *Template Post Type: page */ ?>
Kiedy odświeżymy panel do publikowania stron – w bocznym pasku w zakładce „Dokument”, w sekcji Atrybuty strony będziemy mogli wybrać szablon rejestracji.
Do tego pliku rejestracja.php trzeba dodać formularz, który pobierze dane i prześle je do dalszego przetwarzania.
<form method="POST"> <input type="text" name="registerUsername" placeholder="nazwa użytkownika"> <input type="email" name="registerEmail" placeholder="e-mail"> <input type="password" name="registerPassword" placeholder="Hasło"> <input type="submit" name="submit"> </form>
To najbardziej minimalny kod. Można (ale w tym momencie nie trzeba) dodać etykiety <label> aby formularz był zgodny z zasadami dostępności.
1.2 Obsługa mechanizmu rejestracji WordPress
W tym samym pliku (czyli rejestracja.php) lub w pliku functions.php należy dodać kod odpowiedzialny za zarejestrowanie użytkownika. Wykryjemy chęć rejestracji za pomocą pola $_POST[„registerUsername”]. I jeżeli wszystkie dane przejdą walidację wykonamy rejestrację za pomocą znanej nam już funkcji wp_create_user(), której działanie miałem już okazję zaprezentować przy okazji hakowania WordPressa.
<?php
global $wpdb;
if($_POST){
$username = $wpdb->escape($_POST["registerUsername"]);
$email = $wpdb->escape($_POST["registerEmail"]);
$password = $wpdb->escape($_POST["registerPassword"]);
$error = array();
if (strpos($username, " ") !== FALSE){
$error["username_space"] = "Nazwa użytkownika nie może posiadać spacji";
}
if (empty($username)){
$error["username_empty"] = "Nazwa użytkownika nie może być pusta";
}
if (username_exists($username)){
$error["username_exists"] = "Nazwa użytkownika jest zajeta";
}
if (!is_email($email)){
$error["email_valid"] = "E-mail nieprawidłowy";
}
if (email_exists($email)){
$error["email_exist"] = "Ten e-mail już posiada konto";
}
if(count($error) == 0){
wp_create_user($username, $password, $email);
echo "Utworzono użytkownika";
}
else{
print_r($error);
}
}
?>
Zmienna $wpdb to obiekt, który musimy zainicjalizować przed wysyłaniem zapytań do bazy a reszta powinna być już zrozumiała.
Przed wykonaniem logowania warto zrobić test:
Po kliknięciu „Zarejestruj” widzimy że do panelu Użytkownicy doszła nowa persona:
Logowanie użytkowników na stronie WordPress
Skoro mamy rejestrację przyszedł czas na logowanie. Tutaj sprawa jest równie prosta.
2.1: Tworzenie formularza logowania i strony logowania
Podobnie jak wyżej kopiuję plik index.php jednak tym razem zmieniając jego nazwę na logowanie.php. Na samej górze dodaję kod aby WordPress rozpoznawał że jest to osobny szablon:
<?php /*
*Template Name: Logowanie
*Template Post Type: page
*/ ?>
Pod nagłówkiem umieszczamy taki kod:
<?php
global $user_ID;
global $wpdb;
if($_POST["loginUsername"]){
echo "Problem z zalogowaniem";
}
if (!$user_ID){
?>
<form method="POST">
<label for="loginUsername">Wpisz nazwę użytkownika lub e-mail</label>
<input type="text" class="form-control" name="loginUsername" id="loginUsername" placeholder="nazwa użytkownika">
<label for="loginPassword">Wpisz Hasło</label>
<input type="password" class="form-control" name="loginPassword" id="loginPassword">
<input type="submit" name="submit">
</form>
<?php
}
else{
echo "Jesteś już zalogowany";
}
?>
Jest on tak prosty, że nie wymaga tłumaczenia ale na wszelki wypadek podpowiem, że na początku wyświetlamy info w przypadku podania błędnego hasła, robimy to „na pewniaka” bo przecież z jakiegoś powodu użytkownik nie został przekierowany do panelu (a w zmiennej POST jest podany login).
$user_ID zwraca fałsz jeżeli użytkownik nie jest zalogowany dlatego używamy negacji i drukujemy formularz.
Tak jak wcześniej tworzę stronę Logowanie i wybieram przed chwilą stworzony szablon „Logowanie”.
2.2 Obsługa mechanizmu logowania WordPress
Akurat tutaj już nie mamy dowolności gdzie umieścić kod, bo musimy go dodać przed renderowaniem szablonu – czyli do pliku functions.php lub stworzyć własną wtyczkę. Robimy tak dlatego, aby uniknąć problemu ponownie wysłanych nagłówków „Headers already sent”, który ma miejsce kiedy używamy funkcji redirect po wygenerowaniu pierwszego znaku szablonu.
function logowanie(){
global $user_ID;
global $wpdb;
if( is_page('logowanie') && isset($_POST["loginUsername"]) ){
$username = $wpdb->escape($_POST["loginUsername"]);
$password = $wpdb->escape($_POST["loginPassword"]);
$login_array = array();
$login_array["user_login"] = $username;
$login_array["user_password"] = $password;
$verify_user = wp_signon($login_array, true);
if(!is_wp_error($verify_user)){
wp_redirect( home_url()."/profil-uzytkownika/" );
}
else{
wp_redirect( home_url()."/logowanie/?error" );
}
}
}
add_action('template_redirect', 'logowanie');
Za pomocą haka template_redirect sprawdzamy czy zostały wysłane dane do logowania. Do wyrażenia logicznego instrukcji if dodajemy sprawdzenie czy bierząca strona to „logowanie” aby WordPress nie wykonywał funkcji przy każdym odświeżeniu dowolnej strony.
Przy użyciu natywnej metody wp_signon() sprawdzamy czy dane się zgadzają. Metoda is_wp_error weryfikuje dla nas czy logowanie się powiodło. Jeżeli tak, przekierowuje użytkownika do panelu klienta, jeżeli nie – z powrotem do logowania.
Tworzenie panelu klienta
Pewnie się zastanawiasz co umieścić w tym panelu? Cokolwiek chcesz. Można tam dodać te same opcje, które są widoczne w natywnym panelu użytkownika lub od razu tam umieścić zbiór dedykowanych artykułów czy załączników.
Zachęcam do skorzystania z poznanej metody tworzenia własnych szablonów:
<?php /*
*Template Name: Profil
*Template Post Type: page
*/
W tym szablonie możemy sprawdzić czy użytkownik jest zalogowany aby uniknąć wystąpienia błędów:
<?php
global $user_ID;
if(!user_ID){
/* Tutaj umieszczamy kod jeżeli użytkownik nie jest zalogowany */
}
Możemy też za pomocą functions.php (lub własnej wtyczki) wykonać analogiczne przekierowanie jak w przypadku logowania:
if( is_page('profil'){
if (!$user_ID){
wp_redirect( home_url()."/logowanie/" );
}
}
Aby wyświetlić powitanie, wystarczy teraz wywołać:
<?php global $current_user; wp_get_current_user(); ?>
<?php if ( is_user_logged_in() ): ?>
Witaj <?php echo $current_user->user_login; ?>
<?php endif; ?>
O tym jak dostosowywać treść dla poszczególnych użytkowników lub tworzyć prosty przeznaczone tylko dla wybranych klientów możesz przeczytać w specjalnym wpisie: Panel klienta WordPress.
Usuwanie paska WP Toolbar
Po zalogowaniu do naszego „panelu klienta” pewnie rzucił Ci się w oczy górny pasek z panelu administracyjnego WordPressa. Prawdopodobnie będziemy chcieli go usunąć użytkownikom a sobie – administratorom – zostawić, bo ułatwia on czasem szybką edycję treści.
Wystarczy wykryć obecny poziom użytkownika i ukryć pasek go kiedy będzie to Subskrybent:
if (current_user_can( 'subscriber' )){
add_filter('show_admin_bar','__return_false');
}
Strony i posty tylko dla zalogowanych
Jeżeli chcemy teraz aby niektóre strony były zalogowane tylko dla zarejestrowanych użytkowników, najłatwiej nadać subskrybentom prawo do czytania prywatnych postów:
<?php
function private_for_subscribers(){
$sub_role = get_role( 'subscriber' );
$sub_role->add_cap( 'read_private_posts' );
$sub_role->add_cap( 'read_private_pages' );
}
add_action( 'init', 'private_for_subscribers' );
?>
Od teraz każdy post oznaczony w ustawieniach dokumentu jako prywatny:
… będzie mógł być czytany przez nas i przez subskrybentów. Jest to takie obejście ale przecież rzadko wykorzystujemy status prywatny posta.
Za pomocą podobnego kodu możemy nadawać w przyszłości także inne uprawnienia. Istnieje też gotowa wtyczka która automatyzuje nadawanie i odbieranie uprawnień użytkownikom: User Role Editor. Jest ona na liście top 100 najpopularniejszych wtyczek WordPress dlatego warto ją przy okazji poznać.
Płatny dostęp do strony WordPress
Jeżeli chcesz mieć możliwość oferowania płatnego dostępu do strony WordPress, sprawdź mój artykuł na temat płatnej strony WordPress, kont premium i wtyczek WooCommerce Memberships i WooCommerce Subscriptions.
Dodatek 1: Logowanie i rejestracja WooCommerce
Kiedy zainstalujemy wtyczkę WooCommerce to strona z rejestracją i logowaniem jest tworzona automatycznie:
Nie ma potrzeby tworzenia osobnych stron – chyba, że będzie nam zależeć na swobodnym ich dostosowaniu lub umieszczeniu dodatkowego formularza do logowania na osobnej stronie.
Wtedy możemy użyć metody przedstawionej w tym poradniku lub skopiować pliki plugins/woocommerce/template do themes/nazwa_motywu/woocommerce. Wówczas w pliku form-login.php możemy dokonać własnych dostosowań lub przepisać całą tę stronę na nowo.
Dodatek 2: Logowanie i rejestracja za pomocą Facebook i Google
Proces rejestracji i logowania w naszej stronie WordPress można zbogacić o logowanie za pomocą Facebooka, Google czy innych popularnych platform, do których często się logujemy. Brak konieczności wypełniania formularzy obniża próg wejścia i powoduje częstsze logowanie się do różnego rodzaju kont.
Czytaj więcej w osobnych przewodnikach:
Wtyczki do rejestracji i logowania WordPress
Jak nie trudno się domyślić istnieją gotowe wtyczki które ułatwiają wykonanie podobnej funkcjonalności, która polega na umożliwieniu wygodnej rejestracji i logowania dla użytkowników naszej strony WordPress. Ja osobiście z nich nie korzystałem (bo nie lubię w takich sprawach uzależniać się od obcej wtyczki). Jeżeli jakaś wtyczka ma funkcjonalność która Cię zainteresowała, na co dzień nie kodujesz, nie zależy Ci na elastyczności i chcesz zrobić wszystko samodzielnie bez niczyjej asysty, możesz przetestować następujące wtyczki:
- Simple User Registration (autor Najeeb Ahmad)
- User Registration (autor WPEverest)
- Ultimate Member (autor Ultimate Member)
- User Registration & User Profile (Cozmoslabs)
- RegistrationMagic (autor: Registrationmagic)
- Easy Registration Forms (autor: EasyRegistrationForms)
- WP User Manager (autor: WP User Manager)
- UsersWP (AyeCode Ltd)
Niestandardowa strona logowania WordPress
Właściwie to istnieje możliwość stworzenia niestandardowej strony logowania, która byłaby czymś pomiędzy edycją strony wp-login.php a tworzeniem własnych formularzy i mechanizmu logowania. W jeden z ostatnich realizacji wykonałem taką stronę logowania:
Jak tego dokonać bez obsługiwania całej logiki logowania i przekierowań na własną rękę? Szablon z formularzem zapisujemy jako page-login.php i tworzymy stronę Logowanie, a w polu uproszczona nazwa URL wpisujemy „login”. Jest to praktycznie to samo co stworzenie osobnego szablonu a potem jego wybór w atrybutach strony. Po prostu tak jest nieco szybciej. W miejscu gdzie ma znajdować się formularz umieszczamy natywną funkcję WordPress:
<?php wp_login_form(); ?>
Niestety funkcja ta nie daje nam łatwej edycji wygenerowanego formularza HTML (poza zmianą etykiet i kilku innych napisów) dlatego można skopiować funkcję wp_login_form(), która oryginalnie znajduje się w lokalizacji /wp-includes/general-template.php do pliku functions.php lub własnej wtyczki. Zmieniamy jej nazwę np. na my_wp_login_form(); W ciele skopiowanej funkcji można bez problemu edytować każdy fragment formularza pamiętając aby nie zmienić wartości name, które są niezbędne aby wbudowane w WordPress logowanie działało. Funkcja wp_login_form() przyjmuje argument redirect dzięki czemu możemy zmienić stronę na jaką użytkownik jest przekierowywany po poprawnym zalogowaniu:
my_wp_login_form(array( 'redirect' => site_url()."/wp-admin/", ));
Niestety, w przypadku podania błędnego loginu lub hasła jesteśmy przekierowywani do standardowej strony wp-login.php. Aby temu zapobiec w pliku functions.php lub we własnej wtyczce posługujmy się hakiem wp_login_failed:
add_action( 'wp_login_failed', 'my_custom_login_fail' );
function my_custom_login_fail( $username ) {
$referrer = $_SERVER['HTTP_REFERER'];
if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ){
wp_redirect( $referrer . '?login=failed' );
}
}
Sprawdzamy czy strona odsyłającą jest wp-login lub wp-admin, jeżeli nie to mamy pewność, że to nasza niestandardowa strona logowania wywołała błąd logowania. Z tego powodu możemy przekierować użytkownika do naszej strony login, którą przechowujemy w zmiennej $referrer. Teraz znowu mamy sytuację, że podanie nieprawidłowych danych nie wyświetla żadnego komunikatu. Na szczęście pomyślałem o tym wcześniej i dodałem do adresu ciąg zapytania ?login=failed. W szablonie page-login.php mogę to teraz wykorzystać:
if( isset($_GET["login"]) ){
if ($_GET["login"] == "failed"){
echo "Nieprawidłowy login i/lub hasło.";
}
}
Podsumowanie
W tym przewodniku kolejny raz bardzo wyraźnie widać, jaka jest zaleta wykorzystywania gotowych systemów CMS. Za pomocą paru linijek kodu wprowadziliśmy do strony funkcjonalność, której stworzenie w dedykowanych rozwiązaniach wymagałaby rozwiązywania szeregu problemów także z zakresu bezpieczeństwa.
Dzięki temu, że back-end strony opieramy o system WordPress, możemy szybko stworzyć prosty formularz i za pomocą gotowych funkcji włączyć mechanizm rejestracji i logowania. Rejestracja użytkownika i możliwość logowania na stronie WordPress to bardzo cenna funkcjonalność, którą możemy wykorzystać na wiele sposobów. Panel klienta – jakby inaczej – dla klientów, stworzenie strefy dla wybranej grupy a może strona z subskrypcjami?
Źródła
- https://developer.wordpress.org/reference/functions/wp_create_user/
- https://developer.wordpress.org/reference/functions/wp_signon/
- https://developer.wordpress.org/reference/functions/wp_login_form/
Karolina pisze: 
Iga 
jacek 
Emilia 
Daniel 
Odpowiedz lub skomentuj