Build a Mobile App With Ionic + WordPress

Learn how to build a mobile app that integrates Ionic with WordPress.

This project includes:

  • Ionic 3.9.2, WP-API v2 integration
  • WP-API post integration with pull to refresh and infinite scroll
  • Simple login and membership functionality
  • WooCommerce REST API v2 with Stripe payments
  • More coming soon…

View on Github

This project is mostly for fun, and so other developers can get excited about Ionic. The app includes a posts page with pull to refresh and infinite scroll, a login with custom authentication (requires a plugin), static page, tabs menu, and more coming soon.

You can use this project as a starting point to create a mobile app of your own.

WordPress integration

This app uses the WP-API to integrate with WordPress. Your site must be running WordPress 4.7 or later, or you have to install the WP-API v2 plugin.

You’ll need Ionic’s CLI tools, and to use the login feature you have to install my WordPress plugin. The plugin adds a WP-API endpoint to handle logging in and out, and adds featured image urls to the post response.

How to use

  1. Clone the git repository, run npm install
  2. Change 2 urls and the security passphrase in the app files (instructions below)
  3. Change the security passphrase in the WordPress plugin (instructions below)
  4. Install the WordPress plugin on your test site
  5. Run ionic serve to test in a browser

Change URLs and Passphrase

Before you use this project, you’ll need a WordPress site to connect the app.

After you clone the WP Ionic repository, open providers/configure/configure.ts and change the website url. For the post list, you can use any WP-API endpoint, including a custom endpoint (like a CPT) and url parameters.

Next, open providers/login/login.ts and change the security passphrase. It looks like this:

formData.append(“security”, ‘my-secure-phrase’);

You’ll need to change the security passphrase in the WordPress plugin to match (sb-app-integration/inc/class-wpapi-login.php around line 43).

This passphrase simply stops anyone from being able to try to login through this endpoint. It’s not the most secure thing in the world, but this is basically just a login form. It doesn’t do anything except log a user in, it does not expose any sensitive data.

You should always perform login over SSL. Do your own homework on security.

How the Login Works

The SB App Integration plugin adds an endpoint to the WP-API to allow a simple verification of a WordPress user.

Here’s how it works:

  1. We send a POST request to a WordPress site from the app with user, pass, and security phrase.
  2. If it all checks out, we do a wp_signon() (which just gives us a cookie) and return successfully
  3. The app checks the response and saves the user data if we logged in
  4. We also log out the same way, but sending logout=true with the POST request

Since we are saving the login data in the app, we can show and hide members only content based on the login status.

To make this all happen, we need the SB App Integration WordPress plugin that handles the user verification.

The information below is already handled in the plugin and app files, it’s just for informational purposes if you want to customize.

Once the plugin is activated, you can make a POST request to https://mysite.com/wp-json/app/v1/login

Include the following:

  • $_POST[‘security’] is the security phrase
  • $_POST[‘logout’] if set to “true” it will log the user out
  • $_POST[‘username’] or $_SERVER[‘PHP_AUTH_USER’] (not all servers accept authentication headers)
  • $_POST[‘password’] or $_SERVER[‘PHP_AUTH_PW’] (not all servers accept authentication headers)

Be sure to change the security passphrase in class-wpapi-login.php, preferably a hash of some sort.

If a valid username, password, and security phrase is sent, a json success message will be returned to the app:


$return = array(
‘message’ => ‘Login successful!’,
‘username’ => $info[‘user_login’],
‘success’ => true
);

The app then saves the login data using Ionic Storage. You can check if a user is logged in by getting the data from storage. For example:


this.storage.get(‘user_login’).then( data => {
if( data ) {
this.loggedin = true
} else {
this.loggedin = false
}
})

Login Notes

  • You can use an authentication header to do this instead of a normal POST request, but many servers do not accept auth headers.
  • CORS is always an issue, which is why we have the Access-Control-Allow-Origin header in there.
  • The plugin does a wp_signon(), which will add the logged in cookie to the browser. Technically you can load the site in an iframe and view it logged in now, but this won’t work if you switch to the in app browser. WKWebview also has an issue with cookies, so you may need to use UIWebview if you are going native.
  • We aren’t doing much of a security check, but the only thing an attacker could do here is login. Let me know how you’d improve security in the comments.

WP-API Modifications

This plugin also adds featured image urls to the post response to make it easier to display features images in post lists. The field added is featured_image_urls, with all available urls for each image size returned.

WooCommerce

WooCommerce REST API

To use the WooCommerce module, you must create a REST API key in WooCommerce.

In the app, go to providers/configure/configure.ts and change the Authorization header. This is a base64 encoded string of your consumer key and secret. You can generate these using btoa(key:secret), but keep in mind these are discoverable in your app files even in a signed native app package.

Included features:

  • Product list
  • Single product pages
  • Add to cart
  • Cart modal
  • Basic multi-step checkout
  • Stripe Payments

You can now create payments with Stripe, select shipping zones, and add variable products to the cart.

Stripe Payments

To use Stripe payments with the WooCommerce REST API, open src/app/app.module.ts and change the publishable key around line 30. You can get your Stripe API keys here.

Customizing the App

To run the app, clone the WPIonic git repository, then run npm install.

You can add a page or provider using Ionic CLI commands like:

ionic generate page MyPage

To add an item to the tab menu, open tabs.html and tabs.ts and add your pages as needed.

Have fun, and send me some pull requests!

Changelog

  • 3/15/18: Add to cart improvements, configure provider for easier setup
  • 3/10/18: Added Stripe payments, shipping zones, and better variable products!
  • 2/27/18: Added simple WooCommerce product display through the REST API
  • Update 2/26/18: wpIonic has been completely re-written and updated for Ionic 3.9.2. I also added a fully functioning login system.
  • Update 9/15:wpIonic has been modified to work with the WP-API version 2. I’ve also added new features such as post caching and bookmarks. Follow the project on Github for the most recent updates.
  • Update 12/15: I wrote a new article on the Ionic blog about creating an app with Ionic 2 and the WP-API 2. Check that out here.

Subscribe

Get more great content like this, enter your email below.

Share

Loading comments...

Leave a comment

Your email address will not be published. Required fields are marked *