Construire un flux utilisateur WordPress personnalisé - Partie 2 Enregistrement d'un nouvel utilisateur

Dans le premier tutoriel de cette série sur la personnalisation de l'expérience de connexion WordPress, nous avons créé un plugin qui vous permet de remplacer votre écran de connexion WordPress par une page personnalisée. Aujourd'hui, nous allons encore plus loin et remplaçons de la même manière le nouveau flux d'enregistrement des utilisateurs..

Les raisons de la personnalisation de la page de connexion que nous avons expliquée dans la partie 1 (faire correspondre la page d'inscription au thème de votre site pour masquer WordPress et rendre l'expérience utilisateur transparente) s'appliquent également à l'enregistrement d'un nouvel utilisateur, mais il existe également des raisons plus spécifiques pour voulez créer votre propre page d'inscription:

  • Tout d’abord, lors de l’enregistrement, vous voudrez peut-être modifier les champs que vous demandez à vos nouveaux membres, en ajoutant des champs ou en en supprimant certains. Par exemple, dans ce didacticiel, nous allons supprimer le champ du nom d'utilisateur et utiliser l'adresse de messagerie du nouvel utilisateur pour la connexion..
  • Deuxièmement, il y a le spam d'enregistrement. Lorsque j'ai ouvert les inscriptions à tout le monde sur mon site pour la première fois, cela n'a pas pris plus de quelques heures pour que le premier enregistrement de spam apparaisse, le suivant le suivant. L'ajout d'un champ reCAPTCHA sur une page d'inscription personnalisée est un bon moyen de gérer cela tout en maintenant la cohérence de l'expérience utilisateur..
  • Enfin, vous souhaiterez peut-être effectuer certaines actions personnalisées lors de l'enregistrement, par exemple en ajoutant le nouvel utilisateur à votre liste de diffusion. Après avoir créé votre propre flux d'inscription, ce sera plus facile que jamais.

Donc, équipé de cet ensemble de raisons, commençons. 

Dans ce didacticiel, vous apprendrez à remplacer l'écran d'enregistrement WordPress par une page personnalisée et à mettre en œuvre l'enregistrement avec votre propre code, sans violer les principes de conception de WordPress.. 

La fonctionnalité sera construite sur le plugin que nous avons construit dans la première partie de la série de tutoriels, donc si vous ne l'avez pas encore lue, c'est une bonne idée de commencer par consulter ce tutoriel. Vous pouvez écrire le code vous-même en suivant le didacticiel ou télécharger l'exemple de code à partir du projet Github du didacticiel..

Ajouter une page d'enregistrement d'un nouvel utilisateur personnalisée

La page d’inscription de nouvel utilisateur WordPress par défaut à wp-login.php? action = enregistrer ressemble à ça:

Pas mal, mais à moins que vous n'utilisiez WordPress.org, ce n'est probablement pas compatible avec la conception de votre blog ou de votre site Web. 

Remarque: si vous ne pouvez pas accéder à la page d'inscription sur votre site WordPress, c'est parce que par défaut, WordPress n'autorise pas les nouveaux utilisateurs à s'inscrire eux-mêmes. Pour changer cela, allez au réglages généraux dans votre tableau de bord d'administration et cochez la case "tout le monde peut s'inscrire". Enregistrez ensuite les paramètres et revenez à la page d'enregistrement.

Dans la première partie de la série, nous avons créé une page personnalisée pour afficher le formulaire de connexion et un shortcode utilisé pour placer le formulaire de connexion sur cette page. Maintenant, nous ferons la même chose pour l'enregistrement: nous allons d'abord créer un shortcode pour afficher le formulaire d'inscription, puis une page sur laquelle ce shortcode sera placé..

Il est également possible de placer le shortcode sur une autre page ou d'avoir les formulaires de connexion et d'inscription sur une seule page..

Étape 1: créer le shortcode

En partant du plug-in créé dans la première partie de la série, commençons par ajouter un shortcode pour la page d'inscription..

À la fin de la classe du plugin (Personnaliser_Login_Plugin) Constructeur, ajoutez la définition de shortcode suivante:

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

Ensuite, créez la fonction responsable du rendu du nouveau formulaire d’enregistrement utilisateur:

/ ** * Un shortcode pour afficher le nouveau formulaire d'inscription. * * @param array $ attributs Attributs Shortcode. * @param string $ content Le contenu du texte pour shortcode. Non utilisé. * * @return string La sortie de shortcode * / public function render_register_form ($ attributs, $ content = null) // Analyser les attributs de shortcode $ default_attributes = array ('show_title' => false); $ attributs = shortcode_atts ($ default_attributes, $ attributs); if (is_user_logged_in ()) return __ ('Vous êtes déjà connecté.', 'personnaliser-login');  elseif (! get_option ('users_can_register')) return __ ('L'enregistrement de nouveaux utilisateurs n'est actuellement pas autorisé.', 'personalize-login');  else return $ this-> get_template_html ('register_form', $ attributs); 

Si vous avez déjà lu la première partie de la série, vous remarquerez de nombreuses similitudes entre cette fonction et la fonction de rendu de formulaire de connexion de ce tutoriel.. 

Tout d'abord, sur lignes 10-12, vous remarquerez que le shortcode prend un attribut montrer le titre, utilisé pour définir si un titre doit être rendu par le shortcode ou non.

Deuxièmement, le formulaire d'inscription n'est pas affiché pour les utilisateurs déjà connectés (lignes 14-15). Le message renvoyé à la place du formulaire est assez simple. Par conséquent, en fonction de vos besoins, vous voudrez peut-être remplacer ce morceau de code par quelque chose de plus élaboré - par exemple, un lien vers le tableau de bord.. 

Un nouvel élément est la vérification de l'option WordPress users_can_register sur ligne 16. Cette option est contrôlée par WordPress réglages généraux champ tout le monde peut s'inscrire mentionné ci-dessus. Pour nous assurer de respecter les paramètres définis par l'utilisateur dans WordPress, nous ne devrions pas afficher le formulaire d'inscription si le paramètre est défini sur faux. Comme vous le voyez sur ligne 17, la fonction renverra une notification de fermeture de l'enregistrement.

Le rendu effectif du formulaire d’inscription se fait le ligne 19 en utilisant un template PHP, register_form.php, située dans le des modèles répertoire que nous avons créé dans le tutoriel précédent. Voir la partie 1 pour une explication plus détaillée sur son fonctionnement ainsi que sur le code de la fonction utilisée., get_template_html.

Ajoutons maintenant le modèle de formulaire d'inscription.

Étape 2: Créer le formulaire d'inscription

dans le des modèles répertoire, ajoutez un nouveau fichier PHP et nommez-le register_form.php. Ensuite, continuez en ajoutant un formulaire d’inscription avec les champs que vous voulez que votre nouvel utilisateur remplisse..

Voici la version que j'ai créée pour ce tutoriel; un formulaire d'inscription plutôt standard avec des champs pour l'adresse électronique, le prénom et le nom de l'utilisateur. Le formulaire ne contient pas de champ distinct pour un nom d'utilisateur, car l'adresse électronique fera double emploi..

Tout comme l'enregistrement par défaut du nouvel utilisateur WordPress, notre version générera le mot de passe et l'enverra par courrier électronique au nouvel utilisateur. Il s’agit d’une simple vérification d’e-mail (l’utilisateur ne peut pas se connecter sans entrer une adresse e-mail valide) et impose un certain niveau de sécurité du mot de passe.. 

Bien sûr, cette approche comporte son propre risque de sécurité sous la forme de l’envoi de mots de passe par courrier électronique. Il est donc judicieux de demander (ou même d’exiger) à l’utilisateur de changer le mot de passe une fois connecté..

Sur lignes 2-4, le modèle donne un titre au formulaire si le montrer le titre l'attribut est défini.

Puis le ligne 6, regardez le action paramètre: le formulaire est soumis à l'URL d'inscription WordPress par défaut que nous pouvons récupérer à l'aide de la fonction wp_registration_url. Nous en reparlerons bientôt, mais je mentionnerai déjà que cela ne veut pas dire que nous laisserons WordPress gérer l'enregistrement…

Le reste du modèle est un formulaire HTML plutôt standard avec des champs pour le courrier électronique, le prénom et le nom de famille..

Avant de voir le shortcode en action, nous devons toujours créer la page d'enregistrement et y placer le shortcode..

Étape 3: Créez la page d'enregistrement d'un nouvel utilisateur

Pour afficher le formulaire d'inscription, vous devez ajouter le code suivant sur une page WordPress:

[formulaire-registre personnalisé]

Cela peut être n'importe quelle page, mais pour l'instant, créons une nouvelle page pour le formulaire d'inscription.

Dans la partie précédente, nous avons créé une fonction, plugin_activé, pour créer les pages du plugin lors de l'activation du plugin. Dans la fonction, nous avons ajouté un tableau pour stocker toutes les pages que le plugin devrait créer.. 

Ajoutons maintenant les informations sur la nouvelle page au tableau. Après l’ajout, la définition du tableau devrait ressembler à ceci, avec la nouvelle page (avec le slug registre des membres) défini en dernier:

// Informations nécessaires pour créer les pages du plugin $ page_definitions = array ('member-login' => array ('title' => __ ('Connexion', 'personnaliser' - login '),' content '=>' [custom -login-form] '),' member-account '=> array (' title '=> __ (' Votre compte ',' personnaliser-login '),' content '=>' [compte-info] '), 'member-register' => array ('title' => __ ('Register', 'personnaliser-login'), 'content' => '[custom-register-form]'),);

Le hook d’activation ne s’exécute que lorsqu’un plugin est activé, alors désactivez-le puis activez-le sur le Plugins page. Maintenant, quand vous naviguez vers l'URL http: /// membre-registre, vous devriez voir quelque chose comme ceci (en utilisant le thème par défaut actuel de WordPress, Vingt quinze):

Étape 4: Rediriger l'utilisateur vers notre nouvelle page d'inscription

Avant de passer à l’exécution de l’action d’enregistrement, assurons-nous que l’utilisateur soit toujours redirigé vers cette nouvelle page d’enregistrement au lieu de la page nouvel utilisateur par défaut. wp-login.php? action = enregistrer.

Pour ce faire, nous allons utiliser le crochet d'action login_form_ action comme vous vous en souvenez peut-être de la partie 1, est renvoyé avant chaque action wp-login.php. Comme vous le voyez sur le lien ci-dessus, l'action dans ce cas est registre, et ainsi, nous accrocherons notre fonction à login_form_register.

Dans le constructeur du plugin, ajoutez la ligne suivante:

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

Ensuite, créez la fonction de rappel:

/ ** * Redirige l'utilisateur vers la page d'enregistrement personnalisée à la place * de wp-login.php? Action = register. * / fonction publique 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'));  sortie; 

Comme nous avons accroché la fonction à la login_form_register action, nous savons que l’utilisateur essaie d’accéder au nouveau formulaire d’inscription ou de le poster..

C’est pourquoi la première chose que nous faisons dans cette fonction (le ligne 6) Consiste à vérifier la méthode de requête utilisée pour accéder à la page: la redirection n’est effectuée que sur OBTENIR demandes en tant que POSTER La demande sera réservée à l'exécution de l'action d'enregistrement. En savoir plus sur ça bientôt.

Ensuite, la fonction continue en vérifiant si l’utilisateur est déjà connecté (ligne 7). 

Les utilisateurs connectés sont redirigés vers la page du compte (ou vers le tableau de bord de l'administrateur s'ils sont administrateurs) à l'aide de la fonction redirect_logged_in_user créé dans la première partie. Les visiteurs sont redirigés vers notre nouvelle page., registre des membres.

Maintenant, avec la page et le formulaire en place, passons à ce qui se passe lorsque l'utilisateur soumet le formulaire..

Enregistrer un nouvel utilisateur

Lorsque l'utilisateur soumet le nouveau formulaire d'inscription, son contenu est publié sur wp-login.php? action = enregistrer, la même URL que nous avons utilisée lors de la redirection de l'utilisateur vers la page d'inscription ci-dessus. 

Pour effectuer les personnalisations que nous avons mentionnées précédemment (le plus important, en utilisant l'adresse électronique comme nom d'utilisateur), nous devrons remplacer cette fonctionnalité par notre propre code. Pour ce faire, nous allons d’abord créer une fonction permettant d’enregistrer par programme un nouvel utilisateur, puis appeler cette fonction dans un gestionnaire d’actions..

Étape 1: créer l'utilisateur

Commençons par créer une fonction pouvant être utilisée pour enregistrer un nouvel utilisateur à l'aide des données collectées à partir du formulaire ci-dessus: adresse électronique, prénom et nom de famille. L'adresse e-mail sera le seul identifiant unique, et le reste est simplement agréable à avoir..

Dans la classe plugin, ajoutez la fonction privée suivante:

/ ** * Valide puis termine le processus d'inscription d'un nouvel utilisateur si tout s'est bien passé. * * @param string $ email La nouvelle adresse email de l'utilisateur * * @param string $ prénom_du_nouveau nom du nouvel utilisateur * @param string $ last_name Le nom de famille du nouvel utilisateur * * @return int | WP_Error Identifiant de l'utilisateur créé, ou erreur en cas d'échec. * / fonction privée register_user ($ email, $ prénom, $ dernier nom) $ errors = new WP_Error (); // L'adresse électronique est utilisée à la fois comme nom d'utilisateur et comme adresse électronique. C'est également le seul // paramètre que nous devons valider si (! Is_email ($ email)) $ errors-> add ('email', $ this-> get_error_message ('email')); retourne $ erreurs;  if (username_exists ($ email) || email_exists ($ email)) $ errors-> add ('email_exists', $ this-> get_error_message ('email_exists')); retourne $ erreurs;  // Génère le mot de passe pour que l'abonné ait à vérifier son courrier électronique… $ password = wp_generate_password (12, false); $ user_data = array ('user_login' => $ email, 'user_email' => $ email, 'user_pass' => $ mot_de_passe, 'prénom_nom' => $ prénom_nom, 'nom_dernier' => $ dernier_nom, 'pseudonyme' => $ prenom,); $ user_id = wp_insert_user ($ user_data); wp_new_user_notification ($ user_id, $ password); return $ user_id; 

Comme je l'ai mentionné ci-dessus, l'adresse e-mail est le seul identifiant unique, et également le seul paramètre requis. C'est pourquoi nous commençons la fonction en validant sa valeur. D'abord sur ligne 15, nous validons l'adresse e-mail puis, sur ligne 20 nous vérifions que l'adresse e-mail n'est pas déjà utilisée. Si l’une ou l’autre des validations échoue, un Wp_Error l'objet est retourné. Nous reviendrons à l'affichage de ces erreurs bientôt.

Si tout se passe bien et qu'aucune erreur n'est trouvée, la fonction continue en générant un mot de passe sur ligne 26.

Sur lignes 28 à 37, vous trouverez le cœur de cette fonction, la création du nouvel utilisateur. L'utilisateur est ajouté en utilisant la fonction WordPress wp_insert_user. (ligne 37). En tant que paramètre unique, la fonction prend un tableau associatif contenant des informations sur l'utilisateur en cours de création. Comme vous le verrez sur lignes 28-35, nous utilisons $ email pour le nom d'utilisateur (Utilisateur en ligne) et email (email) des champs. Pour une liste complète des champs pouvant être inclus dans le tableau d'attributs, consultez le codex WordPress.

Après avoir créé l'utilisateur, le ligne 38, la fonction appelle wp_new_user_notification envoyer le mot de passe généré au nouvel utilisateur et informer l'administrateur du site du nouvel utilisateur. 

Étape 2: Appelez le code d'enregistrement lorsqu'un utilisateur envoie le formulaire

Maintenant que nous avons écrit le code pour enregistrer l'utilisateur, nous pouvons l'appeler lorsque le formulaire d'inscription est envoyé..

Auparavant, lorsque nous avons ajouté la redirection à notre page d'inscription personnalisée à l'aide de l'action login_form_register, J'ai mentionné que nous utiliserions la même action aussi pour gérer le POSTER demandes.

Comme c'est souvent le cas en programmation, ce n'est pas le seul moyen de gérer l'enregistrement du nouvel utilisateur, mais cela présente un avantage assez important: de cette manière, nous nous assurerons que personne ne peut accéder accidentellement au code d'enregistrement par défaut dans WordPress.

Pour plus de clarté, ajoutons une fonction distincte et lions-la à la même action (techniquement, il n’ya aucune raison pour que vous ne puissiez pas aussi bien ajouter ce code à la fonction de redirection que nous avons créée ci-dessus).. 

Dans le constructeur de la classe du plugin, ajoutez une nouvelle définition d'action:

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

Ensuite, créez la fonction:

/ ** * Gère l'enregistrement d'un nouvel utilisateur. * * Utilisé via le crochet d'action "login_form_register" activé sur wp-login.php * lors d'un accès via l'action d'enregistrement. * / public function do_register_user () if ('POST' == $ _SERVER ['REQUEST_METHOD']) $ redirect_url = home_url ('member-register'); if (! get_option ('users_can_register')) // Enregistrement fermé, erreur d'affichage $ redirect_url = add_query_arg ('register-errors', 'fermé', $ 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, $ premier_nom, $ dernier_nom); if (is_wp_error ($ result)) // Analyse les erreurs dans une chaîne de caractères et les ajoute en tant que paramètre pour rediriger $ errors = join (',', $ result-> get_error_codes ()); $ redirect_url = add_query_arg ('register-errors', $ errors, $ redirect_url);  else // Succès, redirection vers la page de connexion. $ redirect_url = home_url ('membre-login'); $ redirect_url = add_query_arg ('inscrit', $ email, $ redirect_url);  wp_redirect ($ redirect_url); sortie; 

La fonction commence par une vérification de la méthode de requête le ligne 8: la fonction est liée à l'action WordPress login_form_register, le même que celui que nous avons utilisé pour rediriger l'utilisateur, et la méthode de requête est ce qui différencie les deux utilisations.

Sur ligne 11, nous vérifions que l'enregistrement de nouveaux utilisateurs est autorisé. Sinon, l'utilisateur est redirigé vers la page d'inscription avec un code d'erreur (fermé) en tant que paramètre de requête (erreurs de registre).

D'autre part, si l'enregistrement est ouvert, la fonction collecte les paramètres requis (lignes 15-17) À partir des données de la demande et les utilise pour appeler la fonction créée précédemment (ligne 19) pour créer le nouvel utilisateur.

Après le register_user appel, la fonction redirige l'utilisateur au bon endroit selon que l'enregistrement du nouvel utilisateur a réussi ou non: 

  • Après une redirection réussie, l’utilisateur est redirigé vers la page de connexion, avec le paramètre $ enregistré indiquant qu'un nouvel utilisateur vient d'être créé. 
  • En cas d'erreur, les redirections pointent vers le formulaire d'inscription avec les codes d'erreur de la fonction d'enregistrement du nouvel utilisateur sont combinées dans une liste séparée par des virgules et incluses dans la requête (lignes 23-24).

Étape 3: Afficher les messages d'erreur et de réussite

Comme nous l’avons vu plus haut, la fonction d’enregistrement redirige l’utilisateur vers la page de connexion si l’enregistrement a réussi et revient à la page d’enregistrement s’il y avait des erreurs, avec le statut passé en tant que paramètre de requête..

Ajoutons maintenant du code pour afficher ces messages à l’utilisateur, en commençant par les messages d’erreur de la page d’enregistrement du nouvel utilisateur..

Dans render_register_form, ajoutez le morceau de code suivant juste avant de rendre le modèle:

// Récupère les erreurs possibles à partir des paramètres de demande $ attributs ['erreurs'] = array (); if (isset ($ _REQUEST ['register-errors']))) $ error_codes = explode (',', $ _REQUEST ['register-errors']); foreach ($ codes_erreur sous forme de code_erreur) $ attributs ['erreurs'] [] = $ ceci-> get_error_message ($ code_erreur); 

Ce fragment vérifie d’abord si des erreurs ont été passées dans le paramètre request erreurs de registre (ligne 2). Si oui, il les passe tous en cherchant les messages d’erreur correspondants à l’aide de la touche get_error_message fonction que nous avons créée dans la première partie de la série de tutoriels. 

Les messages d'erreur sont collectés dans un tableau de la attributs $ tableau pour l'impression dans le modèle.

Pour pouvoir afficher les messages d'erreur corrects, nous devons également ajouter les nouveaux messages d'erreur à la fonction. get_error_message. Dans la structure du commutateur, ajoutez ces (ou vos propres) messages d'erreur:

// Cas d'erreur d'enregistrement 'email': return __ ('L'adresse email que vous avez entrée n'est pas valide.', 'Personnaliser-login'); case 'email_exists': return __ ('Un compte existe avec cette adresse électronique.', 'personnaliser-login'); case 'closed': return __ ('L'enregistrement de nouveaux utilisateurs n'est actuellement pas autorisé.', 'personnaliser-login');

Pour afficher les erreurs sur la page d’enregistrement, ajoutez le code suivant dans le champ register_form.php modèle entre le titre et le formulaire:

 0):?>  

Ensuite, ajoutons le message de réussite.

Lorsqu'un nouvel utilisateur a été enregistré avec succès, l'utilisateur est redirigé vers la page de connexion avec un paramètre, enregistré = adresse email ajouté à l'URL. 

Dans la fonction render_login_form, ajoutez les deux lignes suivantes pour vérifier si le paramètre est présent:

// Vérifie si l'utilisateur vient d'enregistrer $ attributs ['registered'] = isset ($ _REQUEST ['registered']);

Ensuite, dans le modèle login_form.php, ajouter un message qui sera affiché si le inscrit le drapeau est mis:

 

% s. Nous avons envoyé votre mot de passe à l'adresse e-mail que vous avez entrée. ',' Personnaliser-login '), get_bloginfo (' nom ')); ?>

C'est tout. Vous avez maintenant créé un nouveau flux complet d'enregistrement des utilisateurs avec validation des paramètres et rapport d'erreur. 

Allez-y et créez un nouveau compte utilisateur pour tester le flux.

Si vous testez le plug-in sur un serveur local, vous risquez de ne pas recevoir l'email contenant le mot de passe, à moins que vous n'ayez configuré les paramètres de l'e-mail..

Combattez le spam d'enregistrement avec Google ReCaptcha

Alors que le formulaire d'inscription est maintenant complet, nous allons continuer à le personnaliser un peu plus en ajoutant un chèque reCAPTCHA (c'est la case à cocher "Je ne suis pas un robot" que vous trouverez sur de nombreux sites en ligne) pour empêcher les spammeurs d'inscription de créer des comptes sur votre site web.

Étape 1: Obtenez votre clé Captcha

Tout d’abord, visitez le site reCAPTCHA. Clique sur le "Obtenez reCAPTCHA"bouton situé dans le coin supérieur droit pour accéder à la page d’administration de reCAPTCHA.

Si vous n'êtes pas connecté à votre compte Google, il vous sera demandé de vous connecter. Si vous n'en avez pas encore, vous devez en créer un pour utiliser cet outil.. 

Sur la page de compte reCAPTCHA, vous trouverez le formulaire suivant. Utilisez-le pour insérer des informations sur votre site web. 

Une fois que vous avez soumis le formulaire en cliquant sur registre, vous verrez une page avec des instructions sur l'activation de reCAPTCHA sur votre site, ainsi que deux clés utilisées pour utiliser l'API: Clé du site et Clef secrète.

Pour stocker les clés dans notre plugin WordPress, nous devrons créer deux champs de paramètres. Pour que les choses restent simples, nous les ajouterons à la réglages généraux et ne pas créer encore une page de paramètres personnalisés.

Pour ajouter les champs de paramètres, commencez par créer une nouvelle action. Dans le constructeur du plugin, ajoutez la nouvelle ligne suivante:

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

Créez ensuite la fonction permettant de définir les champs de paramètres et les deux fonctions de rappel permettant de restituer les champs de paramètres:

/ ** * Enregistre les champs de paramètres requis par le plugin. * / public function register_settings_fields () // Crée des champs de paramètres pour les deux clés utilisées par reCAPTCHA register_setting ('general', 'personalize-login-recaptcha-site-key'); register_setting ('général', 'personnaliser-identifier-recaptcha-secret-clé'); add_settings_field ('personnaliser-login-recaptcha-site-clé', '', array ($ this,' render_recaptcha_site_key_field '),' general '); add_settings_field ('personnaliser-identifier-recaptcha-secret-clé', '', array ($ this,' render_recaptcha_secret_key_field '),' general ');  fonction publique render_recaptcha_site_key_field () $ value = get_option ('personalize-login-recaptcha-site-key', "); echo '';  fonction publique render_recaptcha_secret_key_field () $ value = get_option ('personalize-login-recaptcha-clé-secrète', "); echo ''; 

Comme ce tutoriel ne concerne pas l'API de paramètres WordPress, nous ne passerons pas par la déclaration de champ de paramètres. Si vous ne savez pas comment ajouter des paramètres dans WordPress, consultez cette série complète de tutoriels de Tom McFarlin..

Maintenant, allez au réglages généraux page et copiez les clés reCAPTCHA dans les deux champs que vous venez de créer et enregistrez les paramètres.

Étape 2: Afficher le CAPTCHA

Une fois les préparatifs terminés, nous pouvons maintenant ajouter le champ reCAPTCHA et l’utiliser pour vérifier que nos utilisateurs sont humains..

Dans render_registration_form, récupérez d’abord la clé de site reCAPTCHA à partir des paramètres WordPress et stockez-la dans le attributs $ tableau pour le rendre disponible dans le modèle:

// Récupération de la clé recaptcha $ attributs ['recaptcha_site_key'] = get_option ('personalize-login-recaptcha-site-key', null);

Ensuite, en utilisant le paramètre, ajoutez un espace réservé pour le champ reCAPTCHA dans le formulaire d'inscription, juste au-dessus du bouton d'envoi:

 

Le champ reCAPTCHA actuel sera placé à l'intérieur du div ci-dessus en utilisant JavaScript. Donc, pour afficher le champ, il faudra toujours inclure le JavaScript dans le pied de page.

WordPress a une action spécifique juste pour cet usage. Ajoutez la ligne suivante dans le constructeur du plugin: 

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

Ensuite, créez la fonction, add_captcha_js_to_footer qui imprime la balise include JavaScript qui charge l’API reCAPTCHA à partir de Google:

/ ** * Une fonction d'action utilisée pour inclure le fichier JavaScript reCAPTCHA * à la fin de la page. * / fonction publique add_captcha_js_to_footer () echo "";

Maintenant, quand vous allez sur la page d’inscription, vous devriez voir le champ reCAPTCHA en place:

Étape 3: Vérifiez le CAPTCHA

Si la vérification "pas un robot" basée sur JavaScript réussit, le widget reCAPTCHA ajoute un nouveau paramètre au formulaire., g-recaptcha-response. Ensuite, dans les validations côté serveur dans do_register_user fonction, nous pouvons utiliser le paramètre pour vérifier que l'utilisateur a réussi le test.

Commençons par créer une fonction permettant de vérifier le paramètre reCAPTCHA:

/ ** * Vérifie que le paramètre reCAPTCHA envoyé avec la demande registration * est valide. * * @return bool True si le CAPTCHA est correct, sinon false. * / private function verify_r