Build Mobile Apps with WordPress using PhoneGap / Cordova - Part 2

build-mobile-app-with-wordpress

Build Mobile Apps with WordPress using PhoneGap

In the last article, I have explained how to read a 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>