PhoneGap WordPress Tutorial – Part 2

Build Mobile Apps with WordPress using PhoneGap

In the last article, I have explained how to read the latest post from the WordPress blog. In this tutorial, I’m going to explain how to do user registration and user login using WordPress backend. This uses WordPress – JSON API User Plugin

Create & Edit register.html

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>WordPress</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#register").click(function() {
                    var display_name = $("#display_name").val();
                    var email = $("#email").val();
                    var username = $("#username").val();
                    var password = $("#password").val();
                    $.ajax({
                        type: "POST",
                        url: "http://yoursite.com/api/get_nonce/?controller=user&method=register",
                        crossDomain: true,
                        cache: false,
                        success: function(data) {
                            var nonce = data.nonce;
                            var dataString = "display_name=" + display_name + "&email=" + email + "&username=" + username + "&password=" + password + "&nonce=" + nonce + "&insecure=cool";
                            $.ajax({
                                type: "POST",
                                url: "http://yoursite.com/api/user/register",
                                data: dataString,
                                crossDomain: true,
                                cache: false,
                                success: function(data) {
                                    alert(JSON.stringify(data));
                                }
                            });
                        }
                    });
                });
            });
        </script>
    </head>

    <body>
        <input type="text" id="display_name" placeholder="Display Name">
        <input type="text" id="email" placeholder="Email Address">
        <input type="text" id="username" placeholder="Username">
        <input type="text" id="password" placeholder="Password">
        <button id="register">Login</button>
    </body>

    </html>

Create & Edit Login.html

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>WordPress</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#login").click(function() {
                    var username = $("#username").val();
                    var password = $("#password").val();
                    var dataString = "username=" + username + "&password=" + password + "&insecure=cool";
                    $.ajax({
                        type: "POST",
                        url: "http://yoursite.com/api/user/generate_auth_cookie/?",
                        data: dataString,
                        crossDomain: true,
                        cache: false,
                        success: function(data) {
                            alert(JSON.stringify(data));
                        }
                    });
                });
            });
        </script>
    </head>

    <body>
        <input type="text" id="username">
        <input type="text" id="password">
        <button id="login">Login</button>
    </body>

    </html>