Bouw een aangepaste WordPress gebruikersstroom - deel 2 nieuwe gebruikersregistratie

In de eerste zelfstudie in deze serie over het aanpassen van de WordPress-inlogervaring hebben we een plug-in gemaakt waarmee u uw WordPress-inlogscherm kunt vervangen door een aangepaste pagina. Vandaag gaan we een stap verder en vervangen we de nieuwe gebruikersregistratiestroom op dezelfde manier.

De redenen voor het aanpassen van de inlogpagina die we in deel 1 hebben geschetst (aanpassing van de registratiepagina aan het thema van uw site om WordPress te verbergen en de gebruikerservaring naadloos te maken) zijn ook van toepassing op nieuwe gebruikersregistratie, maar er zijn ook enkele meer specifieke redenen waarom u misschien wil je je eigen registratiepagina maken:

  • Ten eerste wilt u misschien tijdens het registreren de velden wijzigen die u van uw nieuwe leden vraagt, extra velden toevoegen of er misschien een paar laten vallen. In deze zelfstudie verwijderen we bijvoorbeeld het veld gebruikersnaam en gebruiken we het e-mailadres van de nieuwe gebruiker als login.
  • Ten tweede is er registratie-spam. Toen ik voor het eerst registraties voor iedereen op mijn site startte, duurde het niet langer dan een paar uur voordat de eerste spamregistratie werd weergegeven, de volgende die er direct achter volgde. Het toevoegen van een reCAPTCHA-veld op een aangepaste registratiepagina is een goede manier om dit te doen terwijl de gebruikerservaring consistent blijft.
  • Ten slotte wilt u mogelijk enkele aangepaste acties uitvoeren bij de registratie, bijvoorbeeld door de nieuwe gebruiker aan uw verzendlijst toe te voegen. Nadat u uw eigen registratiestroom hebt opgebouwd, is dit eenvoudiger dan ooit.

Dus, uitgerust met deze reeks redenen, laten we aan de slag gaan. 

In deze zelfstudie leert u hoe u het registratiescherm van WordPress kunt vervangen door een aangepaste pagina en de registratie kunt uitvoeren met uw eigen code, zonder inbreuk te maken op de ontwerpprincipes van WordPress. 

De functionaliteit zal bovenop de plug-in worden gebouwd die we in Deel 1 van de tutorialserie hebben gebouwd, dus als je het nog niet hebt gelezen, is het een goed idee om eerst die tutorial te bekijken. U kunt de code zelf schrijven terwijl u de zelfstudie volgt, of de voorbeeldcode downloaden uit het Github-project van de zelfstudie.

Voeg een aangepaste nieuwe gebruikersregistratiepagina toe

De standaard nieuwe gebruikersregistratiepagina van WordPress op wp-login.php? action = register het lijkt op dit:

Niet slecht, maar tenzij je WordPress.org gebruikt, is het waarschijnlijk niet consistent met je blog of websiteontwerp. 

Opmerking: als u geen toegang kunt krijgen tot de registratiepagina op uw WordPress-site, komt dat omdat WordPress standaard niet toestaat dat nieuwe gebruikers zichzelf registreren. Om dit te wijzigen, gaat u naar Algemene instellingen pagina in uw admin Dashboard en vink het selectievakje aan voordatIedereen kan registreren". Sla vervolgens de instellingen op en ga terug naar de registratiepagina.

In het eerste deel van de serie hebben we een aangepaste pagina gemaakt voor het weergeven van het aanmeldingsformulier en een shortcode die werd gebruikt om het aanmeldingsformulier op die pagina te plaatsen. Nu doen we hetzelfde voor registratie: eerst maken we een shortcode voor het weergeven van het registratieformulier en vervolgens een pagina waarop deze shortcode wordt geplaatst.

Het is ook mogelijk om de shortcode op een andere pagina te plaatsen of de aanmeldings- en registratieformulieren op één pagina te plaatsen.

Stap 1: maak de shortcode aan

Bouw op de top van de plug-in gemaakt in deel 1 van de serie, laten we beginnen met het toevoegen van een shortcode voor de registratiepagina.

Aan het einde van de plugin-klasse (Personalize_Login_Plugin) Constructor, voeg de volgende shortcode-definitie toe:

add_shortcode ('custom-register-form', array ($ this, 'render_register_form'));

Maak vervolgens de functie die verantwoordelijk is voor het renderen van het nieuwe gebruikersregistratieformulier:

/ ** * Een shortcode voor het weergeven van het nieuwe gebruikersregistratieformulier. * * @param array $ attributen Korte code attributen. * @param string $ content De tekstinhoud voor shortcode. Niet gebruikt. * * @return string De shortcode-uitvoer * / public function render_register_form ($ attributes, $ content = null) // Parse shortcode attributen $ default_attributes = array ('show_title' => false); $ attributes = shortcode_atts ($ default_attributes, $ attributes); if (is_user_logged_in ()) return __ ('U bent al aangemeld', 'personaliseren-inloggen');  elseif (! get_option ('users_can_register')) return __ ('Registreren van nieuwe gebruikers is momenteel niet toegestaan.', 'personaliseren-login');  else return $ this-> get_template_html ('register_form', $ attributes); 

Als u Deel 1 van de serie al hebt gelezen, zult u veel overeenkomsten zien tussen deze functie en de functie voor het renderen van het aanmeldingsformulier in die zelfstudie. 

Ten eerste, op regels 10-12, je zult zien dat de shortcode een attribuut neemt laat de titel zien, gebruikt om te definiëren of een titel door de shortcode moet worden weergegeven of niet.

Ten tweede wordt het registratieformulier niet getoond aan gebruikers die al zijn ingelogd (regels 14-15). Het bericht in plaats van het formulier is vrij eenvoudig, dus afhankelijk van uw behoeften, wilt u dit stuk code mogelijk vervangen door iets uitgebreider, bijvoorbeeld een link terug naar het dashboard. 

Een nieuw element is de controle voor de WordPress-optie users_can_register op regel 16. Deze optie wordt beheerd door de WordPress Algemene instellingen veld- Iedereen kan registreren hierboven vermeld. Om ervoor te zorgen dat we de instellingen respecteren die de gebruiker definieert in WordPress, moeten we het registratieformulier niet weergeven als de instelling is ingesteld op vals. In plaats daarvan, zoals je ziet regel 17, de functie retourneert een melding dat de registratie is gesloten.

De daadwerkelijke weergave van het registratieformulier is voltooid regel 19 een PHP-sjabloon gebruiken, register_form.php, gelegen in de templates map die we in de vorige zelfstudie hebben gemaakt. Zie deel 1 voor een langere uitleg over hoe dit werkt en de code voor de gebruikte functie, get_template_html.

Laten we nu de sjabloon voor het registratieformulier toevoegen.

Stap 2: Maak het registratieformulier aan

In de templates map, voeg een nieuw PHP-bestand toe en geef het een naam register_form.php. Ga vervolgens verder door een registratieformulier toe te voegen met de velden die u door uw nieuwe gebruiker wilt laten invullen.

Dit is de versie die ik voor deze zelfstudie heb gemaakt; een vrij standaard registratieformulier met velden voor e-mail, voornaam en achternaam van de gebruiker. Het formulier bevat geen afzonderlijk veld voor een gebruikersnaam omdat het e-mailadres dubbel zal zijn.

Net als de standaard nieuwe gebruikersregistratie van WordPress zal onze versie het wachtwoord genereren en deze e-mailen naar de nieuwe gebruiker. Dit dient als een eenvoudige e-mailcontrole (de gebruiker kan zich niet aanmelden zonder een geldig e-mailadres in te voeren) en dwingt een bepaald niveau van wachtwoordbeveiliging af. 

Uiteraard heeft deze aanpak zijn eigen beveiligingsrisico in de vorm van het e-mailen van wachtwoorden, dus het is een goed idee om de gebruiker te vragen (of zelfs te eisen) om het wachtwoord te wijzigen nadat het is ingelogd.

Op regels 2-4, de sjabloon geeft een titel voor het formulier als de laat de titel zien attribuut is ingesteld.

Vervolgens, op regel 6, kijk eens naar de actie parameter: het formulier wordt verzonden naar de standaard WordPress registratie-URL die we kunnen ophalen met behulp van de functie wp_registration_url. We zullen hier binnenkort meer over praten, maar ik zal nu al vermelden dat dit niet betekent dat we WordPress de registratie laten regelen ...

De rest van de sjabloon is een vrij standaard HTML-formulier met velden voor e-mail, voornaam en achternaam.

Voordat we de shortcode in actie zien, moeten we nog steeds de registratiepagina maken en de shortcode erop plaatsen.

Stap 3: Maak de nieuwe gebruikersregistratiepagina

Als u het registratieformulier wilt weergeven, moet u de volgende code op een WordPress-pagina toevoegen:

[Custom-register-vorm]

Dit kan elke pagina zijn, maar laten we voor nu een nieuwe pagina maken voor het registratieformulier.

In het vorige deel hebben we een functie gemaakt, plugin_activated, voor het maken van de pagina's van de plug-in bij activering van plug-ins. Binnen de functie hebben we een array toegevoegd voor het opslaan van alle pagina's die de plug-in zou moeten maken. 

Laten we nu de informatie over de nieuwe pagina aan de array toevoegen. Na de toevoeging moet de arraydefinitie er als volgt uitzien, met de nieuwe pagina (met de slug lid-register) als laatste gedefinieerd:

// Informatie nodig voor het maken van de pagina's van de plug-in $ page_definitions = array ('member-login' => array ('title' => __ ('Aanmelden', 'personaliseren-login'), 'content' => '[aangepast -login-formulier] '),' member-account '=> array (' title '=> __ (' Uw account ',' personaliseren-login '),' content '=>' [account-info] '), 'member-register' => array ('title' => __ ('Registreren', 'personaliseren-login'), 'content' => '[aangepast-register-formulier]'),);

De activeringshaak wordt alleen uitgevoerd wanneer een plug-in is geactiveerd, dus ga je gang en deactiveer en activeer dan de plug-in op de plugins pagina. Nu, wanneer u naar de URL navigeert http: /// Lid-register, je zou zoiets moeten zien (met behulp van het huidige standaard WordPress-thema, Twintig Vijftien):

Stap 4: Leid de gebruiker om naar onze nieuwe registratiepagina

Voordat we overgaan tot het uitvoeren van de registratie-actie, laten we ervoor zorgen dat de gebruiker altijd wordt omgeleid naar deze nieuwe registratiepagina in plaats van de standaard nieuwe gebruikerspagina op wp-login.php? action = register.

Om dit te doen, gebruiken we de actieknop login_form_ actie die, zoals je je misschien herinnert uit Deel 1, wordt afgevuurd vóór elke actie in wp-login.php. Zoals je ziet op de bovenstaande link, is de actie in dit geval registreren, en dus zullen we onze functie aansluiten op login_form_register.

Voeg in de constructor van de plug-in de volgende regel toe:

add_action ('login_form_register', array ($ this, 'redirect_to_custom_register'));

Maak vervolgens de callback-functie:

/ ** * Hiermee wordt de gebruiker doorgestuurd naar de aangepaste registratiepagina * van wp-login.php? Action = registreren. * / public function redirect_to_custom_register () if ('GET' == $ _SERVER ['REQUEST_METHOD']) if (is_user_logged_in ()) $ this-> redirect_logged_in_user ();  else wp_redirect (home_url ('member-register'));  Uitgang; 

Omdat we de functie hebben gekoppeld aan de login_form_register actie, we weten dat de gebruiker probeert toegang te krijgen tot het nieuwe gebruikersregistratieformulier of om het te plaatsen.

Dat is de reden waarom het eerste wat we doen in deze functie (op regel 6) Is om de aanvraagmethode te controleren die werd gebruikt om toegang te krijgen tot de pagina: de omleiding wordt alleen uitgevoerd op KRIJGEN verzoeken als de POST aanvraag wordt gereserveerd voor het uitvoeren van de registratieactie. Hierover binnenkort meer.

Vervolgens gaat de functie verder door te controleren of de gebruiker al is ingelogd (regel 7). 

Aangemelde gebruikers worden met behulp van de functie omgeleid naar de accountpagina (of het beheerdersdashboard als ze beheerders zijn) redirect_logged_in_user die we in Deel 1 hebben gemaakt. Bezoekers worden omgeleid naar onze nieuwe pagina, lid-register.

Laten we nu, met de pagina en het formulier op zijn plaats, kijken naar wat er gebeurt als de gebruiker het formulier indient.

Registreer een nieuwe gebruiker

Wanneer de gebruiker het nieuwe gebruikersregistratieformulier verzendt, wordt de inhoud ervan gepost naar wp-login.php? action = register, dezelfde URL die we hebben gebruikt bij het omleiden van de gebruiker naar de registratiepagina hierboven. 

Om de aanpassingen die we eerder noemden (het belangrijkste, het gebruik van het e-mailadres als gebruikersnaam) te doen, zullen we deze functionaliteit moeten vervangen door onze eigen code. Om dit te doen, zullen we eerst een functie aanmaken om een ​​nieuwe gebruiker programmatisch te registreren en vervolgens deze functie in een actie-afhandelaar aanroepen.

Stap 1: Maak de gebruiker

Laten we beginnen met het maken van een functie die kan worden gebruikt om een ​​nieuwe gebruiker te registreren met behulp van de gegevens die zijn verzameld via het bovenstaande formulier: e-mailadres, voornaam en achternaam. Het e-mailadres is het enige unieke ID en de rest is gewoon iets leuks om te hebben.

Voeg in de plugin-klasse de volgende privé-functie toe:

/ ** * Valideert en voltooit vervolgens het nieuwe aanmeldproces voor gebruikers als alles goed is gegaan. * * @param string $ email Het e-mailadres van de nieuwe gebruiker * @param string $ first_name De voornaam van de nieuwe gebruiker * @param string $ last_name De achternaam van de nieuwe gebruiker * * @return int | WP_Error De id van de gebruiker die is aangemaakt, of fout indien mislukt. * / private function register_user ($ email, $ first_name, $ last_name) $ errors = new WP_Error (); // E-mailadres wordt gebruikt als gebruikersnaam en e-mailadres. Het is ook de enige // parameter die we moeten valideren als (! Is_email ($ email)) $ errors-> add ('email', $ this-> get_error_message ('email')); return $ errors;  if (gebruikersnaam_exists ($ email) || email_exists ($ email)) $ errors-> add ('email_exists', $ this-> get_error_message ('email_exists')); return $ errors;  // Genereer het wachtwoord zodat de abonnee e-mail moet controleren ... $ password = wp_generate_password (12, false); $ user_data = array ('user_login' => $ email, 'user_email' => $ email, 'user_pass' => $ wachtwoord, 'first_name' => $ first_name, 'last_name' => $ last_name, 'nickname' => $ voornaam,); $ user_id = wp_insert_user ($ user_data); wp_new_user_notification ($ user_id, $ wachtwoord); return $ user_id; 

Zoals ik hierboven al zei, is het e-mailadres de enige unieke ID en ook de enige vereiste parameter. Dat is waarom we de functie beginnen door de waarde ervan te valideren. Eerst maar regel 15, we valideren het e-mailadres en vervolgens op regel 20 we verifiëren dat het e-mailadres niet al in gebruik is. Als een van de validaties mislukt, a Wp_Error object wordt geretourneerd. We zullen snel terugkeren naar deze fouten.

Als alles goed gaat en er geen fouten worden gevonden, gaat de functie verder door een wachtwoord aan te maken regel 26.

Op regels 28-37, je zult de kern van deze functie vinden, het creëren van de nieuwe gebruiker. De gebruiker wordt toegevoegd met behulp van de WordPress-functie wp_insert_user. (regel 37). Als enige parameter neemt de functie een associatieve array met informatie over de gebruiker die wordt gemaakt. Zoals je zult zien regels 28-35, we gebruiken $ e-mail voor zowel de gebruikersnaam (gebruiker login) en e-mail (e-mail) velden. Zie de WordPress codex voor een volledige lijst van de velden die kunnen worden opgenomen in de attribuutarray.

Nadat de gebruiker is aangemaakt regel 38, de functie-aanroepen wp_new_user_notification om het gegenereerde wachtwoord naar de nieuwe gebruiker te verzenden en de sitebeheerder van de nieuwe gebruiker op de hoogte te stellen. 

Stap 2: Bel de registratiecode wanneer een gebruiker het formulier indient

Nu we de code hebben geschreven voor het registreren van de gebruiker, kunnen we dit noemen wanneer het registratieformulier is ingediend.

Eerder, toen we de omleiding met behulp van de actie aan onze aangepaste registratiepagina toevoegden login_form_register, Ik zei dat we dezelfde actie ook zouden gebruiken voor het afhandelen van de POST verzoeken.

Zoals vaak het geval is bij het programmeren, is dit niet de enige manier om met de nieuwe gebruikersregistratie om te gaan, maar het heeft wel een vrij belangrijk voordeel: op deze manier zorgen we ervoor dat niemand per ongeluk toegang krijgt tot de standaard registratiecode in WordPress.

Laten we voor de duidelijkheid een afzonderlijke functie toevoegen en deze aan dezelfde actie koppelen (technisch gezien is er geen reden waarom je deze code niet evengoed zou kunnen toevoegen aan de omleidingsfunctie die we hierboven hebben gemaakt). 

Voeg in de constructor van de plugin-klasse een nieuwe actiedefinitie toe:

add_action ('login_form_register', array ($ this, 'do_register_user'));

Maak vervolgens de functie:

/ ** * Verwerkt de registratie van een nieuwe gebruiker. * * Gebruikt via de actiehaak "login_form_register" geactiveerd op wp-login.php * wanneer toegang verkregen via de registratie-actie. * / public function do_register_user () if ('POST' == $ _SERVER ['REQUEST_METHOD']) $ redirect_url = home_url ('lid-register'); if (! get_option ('users_can_register')) // Registratie gesloten, toont fout $ redirect_url = add_query_arg ('register-errors', 'closed', $ redirect_url);  else $ email = $ _POST ['email']; $ first_name = sanitize_text_field ($ _POST ['first_name']); $ last_name = sanitize_text_field ($ _POST ['last_name']); $ result = $ this-> register_user ($ email, $ first_name, $ last_name); if (is_wp_error ($ result)) // Parseer fouten in een string en voeg als parameter toe om $ errors om te leiden = join (',', $ result-> get_error_codes ()); $ redirect_url = add_query_arg ('register-errors', $ errors, $ redirect_url);  else // Succes, doorverwijzing naar inlogpagina. $ redirect_url = home_url ('lid-login'); $ redirect_url = add_query_arg ('registered', $ email, $ redirect_url);  wp_redirect ($ redirect_url); Uitgang; 

De functie begint met het aanvinken van een verzoekmethode regel 8: de functie is gekoppeld aan de WordPress-actie login_form_register, hetzelfde dat we hebben gebruikt voor het omleiden van de gebruiker, en de verzoekmethode is wat de twee toepassingen onderscheidt van elkaar.

Op regel 11, we verifiëren dat het registreren van nieuwe gebruikers is toegestaan. Zo niet, dan wordt de gebruiker teruggeleid naar de registratiepagina met een foutcode (Gesloten) als queryparameter (register-fouten).

Aan de andere kant, als de registratie open is, verzamelt de functie de vereiste parameters (regels 15-17) Uit de aanvraaggegevens en gebruikt deze om de functie te bellen die we hierboven hebben gecreëerd (regel 19) om de nieuwe gebruiker te maken.

Na de register_user call, de functie leidt de gebruiker om naar de juiste plaats, afhankelijk van het feit of de nieuwe gebruikersregistratie succesvol was of niet: 

  • Na een succesvolle omleiding wordt de gebruiker omgeleid naar de inlogpagina met de parameter $ geregistreerd geeft aan dat er zojuist een nieuwe gebruiker is gemaakt. 
  • In het geval van een fout, verwijst de omleiding terug naar het registratieformulier en worden de foutcodes van de nieuwe gebruikersregistratiefunctie gecombineerd in een door komma's gescheiden lijst en opgenomen in het verzoek (regels 23-24).

Stap 3: Weergavefout en succesberichten

Zoals we hierboven hebben gezien, leidt de registratiefunctie de gebruiker om naar de inlogpagina als de registratie succesvol was en terug naar de registratiepagina als er fouten waren, met de status doorgegeven als verzoekparameter.

Laten we nu een code toevoegen om die berichten aan de gebruiker weer te geven, te beginnen met de foutmeldingen op de nieuwe gebruikersregistratiepagina.

In render_register_form, voeg het volgende stuk code toe vlak voor het renderen van de sjabloon:

// Ophalen mogelijke fouten van aanvraagparameters $ attributen ['errors'] = array (); if (isset ($ _REQUEST ['register-errors'])) $ error_codes = explode (',', $ _REQUEST ['register-errors']); foreach ($ error_codes als $ error_code) $ attributen ['errors'] [] = $ this-> get_error_message ($ error_code); 

Dit fragment controleert eerst of fouten zijn doorgegeven in de parameter request register-fouten (lijn 2). Zo ja, dan doorloopt het allemaal de overeenkomstige foutmeldingen met behulp van de get_error_message functie die we hebben gecreëerd in deel 1 van de tutorialserie. 

De foutmeldingen worden verzameld in een array in de $ attributen matrix voor afdrukken in de sjabloon.

Om de juiste foutmeldingen te kunnen tonen, moeten we ook de nieuwe foutmeldingen aan de functie toevoegen get_error_message. Voeg in de schakelstructuur deze (of uw eigen) foutmeldingen toe:

// Registratiefouten, geval 'email': retour __ ('Het e-mailadres dat u hebt ingevoerd is niet geldig.', 'Personaliseren-login'); case 'email_exists': return __ ('Een account bestaat met dit e-mailadres', 'personaliseren-login'); case 'closed': return __ ('Nieuwe gebruikers registreren is momenteel niet toegestaan', 'personaliseren-login');

Om de fouten op de registratiepagina weer te geven, voegt u de volgende code toe in de register_form.php sjabloon tussen de titel en het formulier:

 0):?>  

Laten we vervolgens het succesbericht toevoegen.

Wanneer een nieuwe gebruiker met succes is geregistreerd, wordt de gebruiker omgeleid naar de aanmeldingspagina, met een parameter, geregistreerd = email address toegevoegd aan de URL. 

In de functie render_login_form, voeg de volgende twee regels toe om te controleren of de parameter aanwezig is:

// Controleer of de gebruiker zojuist $ attributen ['registered'] = isset ($ _REQUEST ['registered']) heeft geregistreerd;

Vervolgens in de sjabloon login_form.php, voeg een bericht toe dat wordt getoond als het geregistreerd vlag is gezet:

 

% s. We hebben uw wachtwoord gemaild naar het e-mailadres dat u hebt ingevoerd. ',' Personaliseren-login '), get_bloginfo (' naam ')); ?>

Dat is het. U hebt nu een compleet nieuwe gebruikersregistratiestroom met parametervalidatie en foutrapportage gebouwd. 

Ga je gang en maak een nieuw gebruikersaccount aan om de stroom te testen.

Als u de plug-in test op een lokale server, tenzij u de e-mailinstellingen hebt geconfigureerd, ontvangt u mogelijk niet de e-mail met het wachtwoord - dat is normaal.

Vecht registratie Spam met Google ReCaptcha

Hoewel het registratieformulier nu is voltooid, blijven we het aanpassen door een reCAPTCHA-controle toe te voegen (dit is het selectievakje "Ik ben geen robot" dat u op veel van de grotere sites online vindt) om registratiespammers te voorkomen van het aanmaken van accounts op uw website.

Stap 1: haal uw Captcha-sleutel

Ga eerst naar de reCAPTCHA-site. Klik op de "Ontvang reCAPTCHA"knop in de rechterbovenhoek om toegang te krijgen tot de reCAPTCHA-beheerderspagina.

Als u niet bent aangemeld bij uw Google-account, wordt u gevraagd om in te loggen. Als u nog geen account heeft, moet u er een maken om dit hulpprogramma te gebruiken.. 

Op de reCAPTCHA-accountpagina vindt u het volgende formulier. Gebruik het om informatie over uw website in te voegen. 

Nadat u het formulier hebt verzonden, klikt u op Registreren, u ziet een pagina met instructies over het inschakelen van reCAPTCHA op uw site, evenals twee sleutels die worden gebruikt voor het gebruik van de API: Sitetoets en Geheime sleutel.

Om de sleutels in onze WordPress-plug-in op te slaan, moeten we twee instellingsvelden maken. Om dingen eenvoudig te houden, voegen we ze toe aan de Algemene instellingen en maak nog geen aangepaste instellingenpagina.

Voeg eerst een nieuwe actie toe om de instellingenvelden toe te voegen. Voeg in de constructor van de plug-in de volgende nieuwe regel toe:

add_filter ('admin_init', array ($ this, 'register_settings_fields'));

Maak vervolgens de functie voor het definiëren van de instellingsvelden en de twee callback-functies voor het weergeven van de instellingenvelden:

/ ** * Registreert de instellingenvelden die de plug-in nodig heeft. * / public function register_settings_fields () // Maak instellingenvelden voor de twee sleutels gebruikt door reCAPTCHA register_setting ('general', 'personaliseren-login-recaptcha-site-key'); register_setting ('general', 'personaliseren-login-recaptcha-geheime sleutel'); add_settings_field ('personaliseren-login-recaptcha-site-sleutel', '', array ($ this,' render_recaptcha_site_key_field '),' general '); add_settings_field ('personaliseren-login-recaptcha-geheime sleutel', '', array ($ this,' render_recaptcha_secret_key_field '),' general ');  openbare functie render_recaptcha_site_key_field () $ value = get_option ('personaliseren-login-recaptcha-site-sleutel', "); echo '';  openbare functie render_recaptcha_secret_key_field () $ value = get_option ('personaliseren-login-recaptcha-geheime-sleutel', "); echo ''; 

Aangezien deze zelfstudie niet over de API voor WordPress-instellingen gaat, gaan we niet door de veldverklaring voor instellingen. Als je niet bekend bent met het toevoegen van instellingen in WordPress, bekijk dan deze complete tutorialserie van Tom McFarlin.

Ga nu naar de Algemene instellingen pagina en kopieer de reCAPTCHA-toetsen naar de twee velden die u zojuist hebt gemaakt en sla de instellingen op.

Stap 2: Geef de CAPTCHA weer

Nu de voorbereidingen zijn voltooid, kunnen we nu het reCAPTCHA-veld toevoegen en gebruiken om te controleren of onze gebruikers menselijk zijn.

In render_registration_form, haal eerst de reCAPTCHA-sitesleutel op uit WordPress-instellingen en sla deze op in de $ attributen array om het beschikbaar te maken in de sjabloon:

// Ophalen recaptcha-sleutel $ attributes ['recaptcha_site_key'] = get_option ('personaliseren-login-recaptcha-site-sleutel', null);

Voeg vervolgens met behulp van de parameter een tijdelijke aanduiding toe voor het reCAPTCHA-veld in het registratieformulier, direct boven de verzendknop:

 

Het eigenlijke reCAPTCHA-veld wordt in de div hierboven met behulp van JavaScript. Om het veld weer te geven, moeten we daarom JavaScript in de voettekst van de pagina opnemen.

WordPress heeft een specifieke actie alleen voor dit gebruik. Voeg de volgende regel toe aan de constructor van de plug-in: 

add_action ('wp_print_footer_scripts', array ($ this, 'add_captcha_js_to_footer'));

Maak vervolgens de functie, add_captcha_js_to_footer die de JavaScript-code afdrukt, inclusief tag die de reCAPTCHA API van Google laadt:

/ ** * Een actiefunctie die wordt gebruikt om het reCAPTCHA JavaScript-bestand * aan het einde van de pagina op te nemen. * / public function add_captcha_js_to_footer () echo "";

Als u nu naar de registratiepagina gaat, ziet u het reCAPTCHA-veld op zijn plaats:

Stap 3: Controleer de CAPTCHA

Als de JavaScript-gebaseerde "geen robot" -controle succesvol is, voegt de reCAPTCHA-widget een nieuwe parameter toe aan het formulier, g recaptcha-respons. Vervolgens, aan de serverzijde validaties in de do_register_user functie, kunnen we de parameter gebruiken om te controleren of de gebruiker de test heeft doorstaan.

Laten we eerst een functie maken voor het controleren van de parameter reCAPTCHA:

/ ** * Controleert of de parameter reCAPTCHA verzonden met het registratie * -verzoek geldig is. * * @return bool True als de CAPTCHA OK is, anders false. * / private function verify_recaptcha () // Dit veld wordt ingesteld door de recaptcha-widget als de controle succesvol is als (isset ($ _POST ['g-recaptcha-response'])) $ captcha_response = $ _POST ['g-recaptcha -respons '];  else return false;  // Controleer de captcha-reactie van Google $ response = wp_remote_post ('https://www.google.com/recaptcha/api/siteverify', array ('body' => array ('secret' => get_option ('personaliseer' -login-recaptcha-geheime sleutel '),' antwoord '=> $ captcha_response))); $ success = false; if ($ response && is_array ($ response)) $ decoded_response = json_decode ($ response ['body']); $ succes = $ decoded_response-> succes;  return $ succes; 

Op regel 9-13, de functie haalt het reCAPTCHA-antwoord op. Als het niet wordt gevonden, heeft de gebruiker zelfs niet geprobeerd de test te voltooien voordat het formulie