22 kwietnia 2020

Rejestracja i logowanie użytkowników w WordPress

Kategoria: Programowanie
Tagi: WordPress,
Autor: Paweł Mansfeld

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ć”.

Ustawienia ogólne WordPress – konta użytkowników

Po zaznaczeniu tej opcji na standardowej stronie logowania będzie widoczny link umożliwiający założenia konta.

Rejestracja na standardowej stronie wp-login

Na skrzynkę przychodzi link do ustawienia hasła a administrator otrzymuje powiadomienie o rejestracji nowego użytkownika.

Domyślny profil dla subskrybenta w kokpicie WordPress

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.

Przykład strony logowania ze stocka 🙂

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
  • e-mail
  • 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.

Tworzenie strony rejestracji WordPress

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:

Test rejestracji w WordPress

Po kliknięciu „Zarejestruj” widzimy że do panelu Użytkownicy doszła nowa persona:

Lista zarejestrowanych użytkowników WordPress

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(){
$subRole = get_role( 'subscriber' );
$subRole->add_cap( 'read_private_posts' );
$subRole->add_cap( 'read_private_pages' );
}
add_action( 'init', 'private_for_subscribers' );
?>

Od teraz każdy post oznaczony w ustawieniach dokumentu jako prywatny:

Prywatne posty WordPress

… 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: Logowanie i rejestracja WooCommerce

Kiedy zainstalujemy wtyczkę WooCommerce to strona z rejestracją i logowaniem jest tworzona automatycznie:

Rejestracja i logowanie klientów WooCommerce

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..

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:

  1. Simple User Registration (autor Najeeb Ahmad)
  2. User Registration (autor WPEverest)
  3. Ultimate Member (autor Ultimate Member)
  4. User Registration & User Profile (Cozmoslabs)
  5. RegistrationMagic (autor: Registrationmagic)
  6. Easy Registration Forms (autor: EasyRegistrationForms)
  7. WP User Manager (autor: WP User Manager)
  8. UsersWP (AyeCode Ltd)

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/

Oceń artykuł na temat: Rejestracja i logowanie użytkowników w WordPress
Średnia : 4.7 , Maksymalnie : 5 , Głosów : 15


 

Odpowiedz lub skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *




Komentarze

Karolina

11 sierpnia 2020

Super artykuł. Częściowo rozwiązuje mój problem. Mam jedno pytanie:
Czy jest możliwe, tworzenie spersonalizowanych treści osobno dla każdego zalogowanego użytkownika, a nie dla grupy subskrybentów? Przypuśćmy, że chciałabym aby klienci tworzyli swoje własne konto, które będzie swego rodzaju komunikatorem między nami, na które będę umieszczać treści przeznaczone tylko dla tego użytkownika, np. określony plan zbudowany na podstawie przedstawionych przez klienta danych.

Czy jedynym rozwiązaniem będzie samodzielne napisanie kodu czy jest na to jakiś prostszy sposób?

Paweł Mansfeld

11 sierpnia 2020

Dziękuję za komentarz. Oczywiście, że jest możliwe tworzenie spersonalizowanych treści dla konkretnych użytkowników. Jest wiele technik aby to osiągnąć. Kilka z nich opisałem w artykule: https://mansfeld.pl/programowanie/panel-strefa-klienta-wordpress/ wspomniałem też tam o gotowych wtyczkach.

Generalnie, wolałbym zlecić komuś stworzenie takiej funkcjonalności jeżeli nie potrafiłbym napisać własnego kodu. Korzystanie z wtyczek zawsze jest okupione pewnymi kompromisami i zwyczajnie hamuje nasze pomysły.

 

Wykryto brak połączenia z Internetem.