As of version 0.4, WP-AppKit handles secured user authentication that allows to:

  • log in WordPress users from you app,
  • restrict some part of your app content to authenticated users with given permissions,
  • post comments from your app,
  • make authenticated queries to WordPress,
  • secure download links,
  • and any other cool stuff you can think of when you can authenticate users from apps.

WP-AppKit leverages the RSA public key encryption to encrypt all sensible data (password at handshake for example) and secret key based HMAC controls for all authenticated communications between the app and the WordPress server.

Here are the basic steps that will bring user authentication to your WP-AppKit app:

Create a RSA Private Key

On Windows the easiest way is to use PuTTY (see the private key generation doc for detailed steps).

On iOS/Unix based systems, simply use the “openssl” command:

Then, open the generated private key file (rsa_1024_priv.pem) in a text editor, and copy its content to your clipboard. This is your private key, which should be something like:

Link the Private Key to Your App

In your WordPress Back Office, go edit your App and paste your private key into the “Authentication Settings” > “App Private Key” field:

App private key

Save your app. It is now ready for secured user authentication.

Log Your Users In

To authenticate users from your app’s theme, you’ll use the WP-AppKit User Authentication JS API (JS module used as Auth var in the following examples).

Here is a login example (in the theme’s functions.js), where we suppose that the theme includes a login form (#login-form) where the user fills in his/her login (input#userlogin) and password (input#userpass), and submits with a #go-login button:

Then you can retrieve the currently logged in user:

check the WordPress user’s capabilities:

log the user out:

And many other things that you’ll find in the doc 🙂

To display user data in your templates, add the user object to your template vars using the “template-args” filter :

Then, the currently logged in user object is available as “user” var in your “my-user-page.html” template:

You can also check a complete implementation example in the “User login” version of our Bootstrap theme.

Happy user authentication folks!

Published by Mathieu on October 24, 2015

Freelance Senior Web Developer, WordPress since 2009, JS/Backbone since 2012, Custom Back-End devs, WebApps and Plugins for clients and the community.

9 Comments

  1. This looks good and I have been following WP app kit.

    I’m curious to know why can’t I do the same with the soon to be native Rest API?

    Reply
    • You can and… we will 🙂 But not until the REST API is fully integrated to the core and stable. Apps are not updated as easily as web sites and any change to the API they rely on means updates on the app’s side. Note that WP-AppKit is more than an API, it’s also a JS framework to build app themes, enhancement to the admin, project export for PhoneGap Build, etc.

      Reply
  2. Is it possible to add push notification function using WP APPKit?

    Reply
    • Thank you Tylor.

      We’re currently working on (native) push notifications. First thing we’ve done is to add deeplinks to WP-AppKit. The idea is to able to have a custom URL scheme to open any screen in the app. That’s the first step for push notifications as you usually need to deeplink to your app from push. Deeplinks will be available with WP-AppKit 0.5.

      Second step is to be able to let users register for push notifications and actually to be able to send push notifications. For that, we’ll use the PushWoosh service as we don’t intend to create that kind of service. PushWoosh has a nice Cordova integration and we’ll build an addon to support it in WP-AppKit (yes you can create addons for WP-AppKit). We’re going to release this addon with the 0.6 probably along with an addon marketplace.

      Reply
  3. It’s amazing! Thanx for great work! Maybe in next release WP-AppKit you planning add user regiter support?

    Reply
    • Yes. That’s something on our roadmap. We may release that for 0.6.

      Reply
      • Great! And second question, maybe you planing use in template some famous framework like Foundation frontend, onsenui or ionic? Bottstrap template looks good, but not better for mobile app. Don’t have sliding menu like Foundation.

        Reply
        • Well the magic lies in the fact you may use whatever you like as a JS framework for your themes. You may have notice that our default themes don’t even use a framework 😉 iOnic is another beast as it requires AngularJS. You won’t be able to use it with WP-AppKit.

          Reply

Leave a Reply

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

Having questions?

FAQ | Tutorials | Documentation

Or

Contact Us