MEAN Stack as Solution for "Hard Stuff"

We are going to change gears here and let WordPress do all of the management (and display) of user-managed content and then use the MEAN stack for the "hard stuff", i.e., custom functionality that normally would be executed in WordPress through a jumble of WordPress plug-ins.

The difficult piece of making this work is to a single-sign-on (SSO) experience between the WordPress and the MEAN stack application.  The second piece will be to leverage the WP REST API plugin to get at data that is stored in WP, e.g., the logged in user to start of with.

SSO with WordPress as Authentication Source

WordPress (with the WP OAuth Server plugin) uses OAuth2 to remotely authenticate users against the WordPress authentication system.  For more information on OAuth2, Google has an excellent explanation as it relates to Google APIs (in particular the documentation on using it for web server applications): https://developers.google.com/identity/protocols/OAuth2

Install Plugin

To get started, install the WP OAuth Server plugin: https://wp-oauth.com/

Setup Client (Essentially is the MEAN Stack Application)

Then next step is to setup a client in WP OAuth Server, e.g.,:

• Client Name: demo
• Redirect URI: http://localhost:3000/authorize (need to implement this end-point in the Node.js server code).

WP OAuth Server then will provide two values:

• Client ID (this is what AngularJS will use to initiate the request)
• Secret (this is what the Node.js application will use to exchange the authorization code for an access token).

Manually Test

Going to use a combination of Web Browser and a tool to handle more advanced HTTP messages (e.g., Chrome extension called Postman) to manually test the OAuth2 service.  We are essentially manually walking through the process documented at: https://wp-oauth.com/knowledge-base/using-authorization-code/

While there will differences between setups, e.g., client_id will be different, the following is the general flow:

1. Using Browser: Open the following 

http://local.wordpress.dev/oauth/authorize?response_type=code&client_id=tY168glCRAKR0qX1CrHMcR6H2Z0JeY&redirect_uri=http://localhost:3000/authorize

note: The redirect_uri provided needs to match what was setup in the client setup step.

Assuming that one is not already logged into WordPress, Wordpress will prompt with the login window.

2. Once logged in, WordPress will redirect the browser to the redirect_uri provided with the authorization code. Normally, the browser goes to this URL and the Node.js server would handle the rest of the steps (providing the access token to the browser).

At this point, with no implementation in Node.js the browser will error with a connection refused; but we can extract the authorization code from the URL.

3. Using Postman, post the following:

• URL: http://local.wordpress.dev/oauth/token
• Header: Authorization: Basic XXXXX (this is an encoded version of username - Client ID and password - Secret).
• form-data: grant_type: authorization_code
• form-data: code: XXXXX (this is the authorization code obtained in step 2).
• form-data: redirect_uri: http://localhost:3000/authorize (this is the same redirect_uri used all along).

If all works out, WordPress will respond with:

{"access_token":"7c4d59622fe3c4196356d6758d2c27491c2c14ac","expires_in":86400,"token_type":"Bearer","scope":"basic","refresh_token":"222ef3fc78d5eb1809f237038a0ff860b9417245"}

4. Access a Protected API Endpoint Using Access Token

Using Postman, get the following:

• URL: http://local.wordpress.dev/users/me
• Header: Authorization: Bearer XXXXX (this is the access token gotten in the previous step)

If all works out, WordPress will respond with:

{"ID":1,"username":"admin","name":"admin","first_name":"","last_name":"","nickname":"admin","slug":"admin","URL":"","avatar":"http:\/\/0.gravatar.com\/avatar\/06e92fdf4a9a63441dff65945114b47f?s=96","description":"","registered":"2015-06-22T20:13:15+00:00","roles":["administrator"],"capabilities":{"switch_themes":true,"edit_themes":true,"activate_plugins":true,"edit_plugins":true,"edit_users":true,"edit_files":true,"manage_options":true,"moderate_comments":true,"manage_categories":true,"manage_links":true,"upload_files":true,"import":true,"unfiltered_html":true,"edit_posts":true,"edit_others_posts":true,"edit_published_posts":true,"publish_posts":true,"edit_pages":true,"read":true,"level_10":true,"level_9":true,"level_8":true,"level_7":true,"level_6":true,"level_5":true,"level_4":true,"level_3":true,"level_2":true,"level_1":true,"level_0":true,"edit_others_pages":true,"edit_published_pages":true,"publish_pages":true,"delete_pages":true,"delete_others_pages":true,"delete_published_pages":true,"delete_posts":true,"delete_others_posts":true,"delete_published_posts":true,"delete_private_posts":true,"edit_private_posts":true,"read_private_posts":true,"delete_private_pages":true,"edit_private_pages":true,"read_private_pages":true,"delete_users":true,"create_users":true,"unfiltered_upload":true,"edit_dashboard":true,"update_plugins":true,"delete_plugins":true,"install_plugins":true,"update_themes":true,"install_themes":true,"update_core":true,"list_users":true,"remove_users":true,"add_users":true,"promote_users":true,"edit_theme_options":true,"delete_themes":true,"export":true,"administrator":true},"email":false,"meta":{"links":{"self":"http:\/\/local.wordpress.dev\/wp-json\/users\/1","archives":"http:\/\/local.wordpress.dev\/wp-json\/users\/1\/posts"},"0":false}}

At this point, one can continue to make WordPress protected API endpoints as necessary.