ওয়ার্ডপ্রেস কাস্টম AJAX লগিন / রেজিস্ট্রেশন ফর্ম

কয়েকদিন আগে একটা ক্লায়েন্টের জন্য একটা মাল্টি-ইউজার এপ্লিকেশন বানাচ্ছিলাম। এপ্লিকেশনে সম্পুর্নভাবে ওয়ার্ডপ্রেস এডমিন প্যানেল এভয়েড করা হয়েছে। যেহেতু কাস্টম ড্যাশবোর্ড তৈরি করা হয়েছে, সেহেতু ড্যাশবোর্ডের সাথে ম্যাচ করে কাস্টম লগিন/রেজিস্ট্রেশন ইউআই বানানো অত্যন্ত জরুরি ছিলো।

আগে এই কাজগুলি লগিন/রেজিস্ট্রেশন পেজে পোষ্ট রিকুয়েস্ট দিয়ে করে ফেলতাম। কিন্তু এই এপ্লিকেশনে ডিফল্ট লগিন/রেজিস্ট্রেশন পেজগুলিকে রিস্ট্রিক্টেড করে দেয়া হয়েছে। সুতরাং, ফর্ম হ্যান্ডেলিং এর জন্য ফাংশন তৈরি করে নিয়েছি এবং সেটাকে WP_AJAX এ অথরাইজ করে দিয়েছি।

মাল্টি-ইউজার এপ্লিকেশনের জন্য AJAX ইউজ করে ওয়ার্ডপ্রেস সাইটে কাস্টম লগিন এবং রেজিস্ট্রেশন ফর্ম ডেভেলপ করতে এই স্টেপগুলি অনুসরন করুন।

AJAX কল অথরাইজেশনঃ

থিমে এই ফাংশনটি দিয়ে এজাক্স কল অথরাইজ করে দিয়েছি।

function ajax_auth_init(){	

    wp_register_script('validate-script', plugin_dir_path( __FILE__ ) . 'assets/js/jquery.validate.js', array('jquery') ); 
    wp_enqueue_script('validate-script');

    wp_register_script('ajax-auth-script', plugin_dir_path( __FILE__ ) . 'assets/js/ajax-auth-script.js', array('jquery') ); 
    wp_enqueue_script('ajax-auth-script');

    wp_localize_script( 'ajax-auth-script', 'ajax_auth_object', array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => home_url(),
        'loadingmessage' => __('Sending user info, please wait...')
    ));

    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
    add_action( 'wp_ajax_nopriv_ajaxregister', 'ajax_register' );

}Code language: PHP (php)

ajax_auth_init() ফাংশনটি সিমপ্লি ajax_login() এবং ajax_register() ফাংশন কে এজাক্স এর মাধ্যমে এক্সিকিউট করার অথরাইজেশন দিচ্ছে। আর ফর্ম ভেলিডেশন স্ক্রিপ্টও এখান থেকে ইনকিউ করা হয়েছে।

এখন ajax_auth_init() ফাংশনটিকে ইনিশিয়েট করতে হবে। যেহেতু এটা লগিন/রেজিস্ট্রেশন ফর্ম, সেহেতু শুধুমাত্র নট লগড-ইন ভিজিটরের জন্য এটা ইনিশিয়েট করবো।

if (!is_user_logged_in()) {
    add_action('init', 'ajax_auth_init');
}Code language: JavaScript (javascript)

এজাক্স অথরাইজেশন, ইনিশিয়েট এবং ভেলিডেশন স্কিপ ইঙ্কিউ শেষ। এখন চলে যাবো ফ্রন্ট-এন্ড ফর্ম সেটাপে।

লগিন সিস্টেমঃ

লগিন দিয়েই শুরু করা যাক। সম্পুর্ন লগিন সেটাপের জন্য আমাদের লগিন ফর্ম, লগিন ফাংশন (ajax_login) এবং এজাক্স কল সেটাপ করতে হবে।

লগিন ফর্মঃ

এখানে ন্যাকেড এইচটিএমএল ফর্ম দেয়া হলো। আপনি ইচ্ছামতো মার্কআপ বানিয়ে নিতে পারেন।

<form id="loginform" role="form" method="post">
    <input class="form-control" id="userloginemail" placeholder="Email" type="text" name="log" required>
    <input id="userloginpwd" class="form-control" placeholder="Password" type="password" name="pwd">
    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
    <button id="loginformsubmit" type="submit" class="btn btn-primary my-4">SIGN IN</button>
    <p id="loginformerror"></p>
</form>Code language: HTML, XML (xml)

খেয়াল রাখবেন wp_nonce_field টা যেনো মিসিং না হয়। ফর্ম সাবমিশন সিকিউরিটি চেকিং এর জন্য এটা অবশ্যই ব্যভার করতে হবে।

লগিন ফাংশনঃ

অথরাইজেশন ফাংশনে আমরা ajax_login() কে এজাক্স থেকে এক্সিকিউটেবল করেছিলাম, এখন ফাংশনটা লিখবো। সিকিউরিটি চেকিং, এরর হ্যান্ডেলিং, এবং ফাইনালি লগিন, সবকিছুই এই ফাংশন থেকেই হবে।

function ajax_login() {

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-login-nonce', 'security' );

    //Nonce is checked, get the POST data and sign user on
    $info = array();
    $info['user_login'] = $_POST['username'];
    $info['user_password'] = $_POST['password'];
    $info['remember'] = true;

    $user_signon = wp_signon( $info, false );

    if ( is_wp_error( $user_signon )) {
        echo json_encode( array( 'loggedin'=>false, 'message'=>__( 'Wrong username or password!' )));
    } else {
        echo json_encode( array( 'loggedin'=>true, 'message'=>__('Login successful, redirecting...' )));
    }

    die();

}Code language: PHP (php)

যদি POST করা ইউজার নেম ও পাসওয়ার্ড সঠিক হয়, এটি ইউজারকে লগিন করাবে এবং এজাক্স রেস্পন্সে লগড-ইন মেসেজ রিটার্ন করবে, যেটা চেক করে আমরা ফ্রন্ট-এন্ডে রিডাইরেক্ট ইনিশিয়েট করবো। আর কোন এরর থাকলে সেটা এজাক্স রেস্পন্সে রিটার্ন করবে এবং সেটা আমরা ফ্রন্ট-এন্ডে শো করাবো।

AJAX কলঃ

লগিন সিস্টেমের শেষ ধাপ, এজাক্স কল এবং রিটার্ন হওয়া ডাটা হ্যান্ডেল করা।

$("#loginform").submit(function(e) {

    e.preventDefault();

    var form = $(this);
    $("#loginformsubmit").text("Signing In...");
    $("#loginformerror").html('');

    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: ajax_auth_object.ajaxurl,
        data: { 
            'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
            'username': $('#userloginemail').val(), 
            'password': $('#userloginpwd').val(), 
            'security': $('#security').val() 
        },

        success: function(data){
            $("#loginformsubmit").text("Sign In");
            if (data.loggedin == true){
                $("#loginformerror").html(data.message);
                $("#loginformsubmit").text("Redirecting...");
                document.location.href = "<?php echo home_url('/');?>";
            } else {
                $("#loginformerror").html(data.message);
            }
        }
    });

});Code language: JavaScript (javascript)

নোটঃ জেকুয়েরির সাহায্য নেয়া হয়েছে এখানে, সো জেকুয়েরি লোড হওয়ার পর কোডটা এক্সিকিউট হতে হবে।

এখানে ফর্ম থেকে ইউজারনেম এবং পাসওয়ার্ড নিয়ে wp_ajax এর মাধ্যমে ajax_login() ফাংশনে পাঠানো হয়েছে। ফাংশনে ডাটা প্রসেস হওয়ার পর রিটার্ন হওয়া ডাটাতে যদি দেখা যায় যে সব ঠিক আছে এবং লগিন হয়েছে তাহলে এটি ইউজারকে হোমপেজে রিডাইরেক্ট করে দিবে। আর যদি কোন এরর থাকে (যেমন ভুল পাসওয়ার্ড), তাহলে ফর্মে সেটি শো করবে।

রেজিস্ট্রেশন সিস্টেমঃ

রেজিস্ট্রেশন সিস্টেমেও অলমোস্ট সেম প্রসেস। ফর্ম, এজাক্স কল, রেজিস্ট্রেশন ফাংশন এবং এক্সট্রা হিসেবে অটো লগিন ফাংশন।

রেজিস্ট্রেশন ফর্মঃ

লগিন ফর্মের মতো এখানেও ন্যাকেড এইচটিএমএল ফর্ম দেয়া হলো, আপনার প্রয়োজনমতো সাজিয়ে নিবেন।

<form id="userregisterform" role="form" action="/wp-login.php" method="post">
    <input class="form-control" placeholder="First Name" type="text" name="fname" id="userfname">
    <input class="form-control" placeholder="Last Name" type="text" name="lname" id="userlname">
    <input class="form-control" placeholder="Email" type="text" name="email" id="useremail">
    <input class="form-control" placeholder="Password" type="password" name="pwd" id="userpwd">
    <?php wp_nonce_field('ajax-register-nonce', 'signonsecurity'); ?>  
    <button id="registerformsubmit" type="submit" class="btn btn-primary my-4">REGISTER</button>
    <div id="loginformerror"></div>
 </form>Code language: HTML, XML (xml)

এখানেও সিকিউরিটি নিশ্চিত করতে wp_nonce_field ফিল্ডটা রিকুয়ার্ড।

রেজিস্ট্রেশন ফাংশনঃ

এখন এজাক্স কল প্রসেস করার জন্য ajax_register() ফাংশনটি লিখতে হবে যেটি আমরা প্রথমেই এজাক্স এক্সিকিউটেবল করে দিয়েছিলাম।

function ajax_register(){

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-register-nonce', 'security' );

    // Nonce is checked, get the POST data and sign user on
    $info = array();
    $info['user_nicename'] = sanitize_text_field( $_POST['fname']);
    $info['nickname'] = sanitize_text_field( $_POST['fname']);
    $info['first_name'] = sanitize_text_field( $_POST['fname']);
    $info['last_name'] = sanitize_text_field( $_POST['lname']);
    $info['user_login'] = sanitize_email( $_POST['email']);
    $info['user_pass'] = sanitize_text_field($_POST['password']);
    $info['user_email'] = sanitize_email( $_POST['email']);

    // Register the user
    $user_register = wp_insert_user( $info );

    if ( is_wp_error($user_register) ){	

        $error  = $user_register->get_error_codes()	;

        if(in_array('empty_user_login', $error))

            echo json_encode(array('loggedin'=>false, 'message'=>__($user_register->get_error_message('empty_user_login'))));

        elseif(in_array('existing_user_login',$error))

            echo json_encode(array('loggedin'=>false, 'message'=>__('This username is already registered.')));

        elseif(in_array('existing_user_email',$error))

        echo json_encode(array('loggedin'=>false, 'message'=>__('This email address is already registered.')));

    } else {

    auth_user_login($info['user_login'], $info['user_pass'], 'Registration');       

    }

    die();

}Code language: PHP (php)

ফাংশনটি POST করা সব ডাটা চেক করে যদি কোন এরর পায় তাহলে সেটি রিটার্ন করবে, এবং রিটার্ন হওয়া ডাটা চেক করে ফর্মে এরর শো করাবো।

আর যদি সব ঠিক থাকে, তাহলে ইউজার ক্রিয়েট করে ইউজারকে অটো লগিন করার জন্য অটো লগিন ফাংশন (auth_user_login) কল করবে। যদি আপনি অটো লগিন না চান, তাহলে অটো লগিন ফাংশন কল না করে ইউজার ক্রিয়েশন সাক্কেসফুল ডেটা রিটারন করতে পারেন। সেক্ষেত্রে আপনাকে এজাক্স রিটার্ন ডাটা হ্যান্ডলিংটাও কাস্টমাইজ করতে হবে। এখানে আমি অটো লগিনেই এগিয়ে যাচ্ছি।

অটো লগিন ফাংশনঃ

ajax_register() ইউজার রেজিস্ট্রেশন সফল হওয়ার পর নতুন ইউজারকে অটোম্যাটিক লগিন করাতে auth_user_login() ফাংশনটি লিখতে হবে।

function auth_user_login($user_login, $password, $login){

	$info = array();
    $info['user_login'] = $user_login;
    $info['user_password'] = $password;
    $info['remember'] = true;


	$user_signon = wp_signon( $info, '' ); // From false to '' since v4.9

    if ( is_wp_error($user_signon) ){

		echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));

    } else {

		wp_set_current_user($user_signon->ID); 
        echo json_encode(array('loggedin'=>true, 'message'=>__($login.' successful, redirecting...')));

    }

	die();

}Code language: PHP (php)

এখানে এরর হওয়ার সম্ভাবনা নেই বললেই চলে কারন ইউজার ক্রিয়েট করা হয়েছে যেই ডাটা দিয়ে, লগিনও করা হচ্ছে সেম ডাটা দিয়েই। তারপরও অভার শিউর হওয়ার জন্য এরর চেকিং রাখা হয়েছে।

কোন এরর না পেলে এটি ইউজারকে লগিন করিয়ে দিবে এবং লগিন ফাংশনে যেই লগিন সফল মেসেজ রিটার্ন করা হচ্ছে, সেই সেম মেসেজ রিটার্ন করবে।

AJAX কলঃ

রেজিস্ট্রেশন ফর্মের সকল ব্যাক-এন্ড ফাংশনালিটিস শেষ, এখন সময় এসেছে ফ্রন-এন্ডে হাত দেয়ার এবং এজাক্স কল করার।

$("#userregisterform").submit(function(e) {
    e.preventDefault();

    var form = $(this);
    var url = form.attr('action');
    $("#registerformsubmit").text("Signing In...");
    $("#loginformerror").html('');
    email = $('#useremail').val(), 
    fname = $('#userfname').val(), 
    lname = $('#userlname').val(), 
    password = $('#userpwd').val(), 
    security = $('#signonsecurity').val()

    $.ajax({

        type: 'POST',
        dataType: 'json',
        url: ajax_auth_object.ajaxurl,
        data: { 
            'action': 'ajaxregister', //calls wp_ajax_nopriv_ajaxlogin
            'email': email, 
            'fname': fname, 
            'lname': lname, 
            'password': password, 
            'security': security
        },

        success: function(data){
            $("#registerformsubmit").text("Register");
            if (data.loggedin == true){
                $("#loginformerror").html(data.message);
                $("#registerformsubmit").text("Redirecting...");
                document.location.href = "<?php echo home_url('/');?>";
            } else {
                $("#loginformerror").html(data.message);
            }
        }

    });
});Code language: JavaScript (javascript)

লগিন ফর্মের মতোই, এখানেও ফর্ম থেকে ইউজারের ডাটা নিয়ে ajax_register() এ পাঠানো হচ্ছে প্রসেস করার জন্য। ajax_register() যদি এরর রিটার্ন করে (যেমন ইউজার অলরেডি এক্সিস্ট), তাহলে ফর্মে এরর দেখানো হবে। আর যদি সব ঠিক থাকে এবং auth_user_login() এর মাধ্যমে লগড-ইন রিটার্ন হয়, তাহলে সাক্কেস মেসেজ দেখিয়ে ইউজারকে হোমপেজে রিডাইরেক্ট করে দিবে।

চেস্টা করেছি সহজভাবে বুঝানোর জন্য। যদি বুঝতে কোন সমস্যা হয়, নিচে কমেন্ট সেকশন ২৪ ঘন্টা খোলা আছে।