Hello everyone ! Aujourd’hui on va quitter un peu mon domaine de prédilection (je ne t’oublie pas Drupal, promis je reviens vite à toi) pour un petit tuto sur WordPress afin de répondre à un besoin de plus en plus récurrent : un petit bloc de login, le tout en Ajax, avec une petite pointe de redirection vers la page que l’on souhaite. On va même s’en faire un mini-plugin. Superbe recette non ? Let’s go !
(Je vais passer la création du plugin dans cet article, et on supposera qu’il s’appelle « Beautiful Login ». Ouep)
Vous désirez Monsieur (ou Madame) ?
Vu que nous faisons de l’Ajax, on va avoir besoin d’un fichier JS. On va placer ce fichier JS dans un répertoire qui va s’appeler « js » (un jour mon originalité va me perdre). On va aussi en profiter pour rendre disponible dans notre script les variables dont on a besoin, à savoir l’URL de redirection, l’URL du fichier admin-ajax.php (pour faire de l’Ajax, c’est plus pratique) et le message d’attente de vérification.
function beautiful_login_init() {
wp_register_script('beautiful-login-script', plugin_dir_url( __FILE__ ) . '/js/beautiful-login-script.js', array('jquery') );
wp_enqueue_script('beautiful-login-script');
wp_localize_script( 'beautiful-login-script', 'beautiful_login_object', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'redirecturl' => home_url() . '/home',
'loadingmessage' => __('Vérification ...')
));
add_action( 'wp_ajax_nopriv_ajaxlogin', 'beautiful_login_form_submit' );
}
if (!is_user_logged_in()) {
add_action('init', 'beautiful_login_init');
}
Dans ce hook d’init, on en profite aussi pour permettre aux utilisateurs anonymes de pouvoir utiliser notre formulaire (plus particulièrement la fonction de submit du formulaire en Ajax) et si l’utilisateur n’est pas loggué, on lui ajoute cette action.
Vous prendrez bien un peu de shortcode ?
Si il y a bien un truc que j’apprécie sur WordPress, c’est le shortcode. On va déclarer un petit shortcode qui va juste nous permettre de mettre notre formulaire où vous voulez (même dans le footer, si vous aimez).
function beautiful_login_form() {
$output = beautiful_login_create_form();
return $output;
}
add_shortcode('beautiful_login', 'beautiful_login_form');
Et … c’est tout en fait. Voilà pour le shortcode ! Maintenant on va voir pour créer le formulaire.
Le formulaire convient-il à Monsieur (ou Madame) ?
La fonction beautiful_login_create_form() juste au dessus va nous permettre de placer le HTML de notre formulaire. On va pas faire compliqué, 2 champs texte et un bouton (comme la cuisine contemporaine, avec 2 carottes et un radis)
function beautiful_login_create_form() {
ob_start(); ?>
<form class="form form-horizontal" method="POST" id="beautiful-login">
<div class="error"></div>
<div class="form-group">
<input placeholder="Nom d'utilisateur" name="log" type="text" id="username" value="" class="form-control" required>
</div>
<div class="form-group">
<input name="pwd" placeholder="Mot de passe" type="password" id="password" value="" class="form-control" required>
</div>
<div class="form-group">
<?php wp_nonce_field('ajax-login-nonce', 'security'); ?>
<input type="submit" name="Submit" value="Je M'identifie" class="login_button buttons">
</div>
</form>
<?php return ob_get_clean();
}
On utilise bien sûr Bootstrap (l’ami des Business dev’), et on ajoute un nonce_field pour sécuriser (façon WordPress) tout ça. Rien de bien follichon jusqu’à maintenant.
On avait commandé un JS en début de repas, ça serait possible de l’avoir ?
On va maintenant passer au plat de résistance, le coeur de notre petit formulaire : la soumission en Ajax. Voilà le code, j’explique en mode Joël Robuchon après !
jQuery(document).ready(function($) {
$('form#beautiful-login').on('submit', function(e){
$('form#beautiful-login .error').show().text(beautiful_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: beautiful_login_object.ajaxurl,
data: {
'action': 'beautiful-login',
'log': $('form#beautiful-login #username').val(),
'pwd': $('form#beautiful-login #password').val(),
'security': $('form#beautiful-login #security').val()
},
success: function(data){
$('form#beautiful-login .error').text(data.message);
if (data.loggedin == true){
document.location.href = beautiful_login_object.redirecturl;
}
}
});
e.preventDefault();
});
});
On va catcher la soumission du formulaire, et faire 2 choses :
- On va d’abord afficher le message d’attente
- Et ensuite, on va soumettre en POST via Ajax les valeurs des champs nous intéressant, à savoir le nom d’utilisateur, le mot de passe saisi, et le nonce_field pour la vérification du formulaire.
Ensuite (dans la partie suivante, pas de précipitation !), on affiche le message de succès ou d’échec, et si l’authentification est un succès, on redirige l’utilisateur vers l’adresse que l’on a défini plus haut.
Excusez moi, serveur, on pourrait avoir un truc qui marche ?
Oui parce que là en fait, on a un formulaire. Qui ne fait … strictement rien. Pas très utile ! On va donc ajouter la partie la plus intéressante, la couche métier !
function beautiful_login_form_submit() {
check_ajax_referer('ajax-login-nonce', 'security');
$info = array();
$info['user_login'] = $_POST['log'];
$info['user_password'] = $_POST['pwd'];
$info['remember'] = true;
$user_signon = wp_signon($info, false);
if (is_wp_error($user_signon) ){
echo json_encode(array('loggedin'=>false, 'message'=>__('Adresse mail ou mot de passe incorrect')));
} else {
echo json_encode(array('loggedin'=>true, 'message'=>__('Redirection ...')));
}
die();
}
Le premier que l’on doit vérifier c’est la validité du nonce_field. Ensuite, on récupère les valeurs soumises plus tôt pour les passer à la fonction de WordPress permettant d’authentifier un utilisateur : wp_signon
Si tout va bien, on renvoie le message indiquant qu’on redirige l’utilisateur et on le redirige défini au début. Sinon, on lui annonce qu’il s’est trompé (shame on him).
Un café et l’addition !
Voilà, avec ces petits bout de code dans votre module, vous avez un joli formulaire que vous pouvez afficher où vous voulez. N’hésitez pas à me contacter si jamais vous avez des améliorations à lui apporter !
Stay tuned !
