Mobile App Development with WordPress Backend: A Practical Guide to REST API Integration by Sanjay - HTML preview

03 08

Authentication

Mechanisms

When your mobile app communicates with the WordPress backend using the REST

API, it’s important to ensure that only authorized users can access certain data.

Authentication is the process of verifying the identity of users, and there are

different ways to handle it in WordPress. In this section, we will look at two

popular methods for authentication: OAuth and JWT (JSON Web Tokens).

1 OAuth Authentication: Overview and How it Works with WordPress

OAuth is a widely-used protocol that allows users to grant third-party

applications limited access to their resources without sharing their

password. It’s commonly used to allow users to sign in using their Google or

Facebook account.

In the context of WordPress:

OAuth allows your mobile app to access WordPress data

(like posts, user profiles, etc.) on behalf of the user without requiring

them to log in directly through the app.

WordPress can use plugins to enable OAuth-based authentication for

the REST API. A popular plugin for this is the OAuth 2.0 Server plugin.

09

With OAuth, there are typically two main steps:

1. The user is redirected to WordPress to grant permission.

2. Once permission is granted, WordPress issues a token that can be

used to make API requests on behalf of the user.

While OAuth is powerful, it can be more complex to set up compared

to simpler authentication methods like JWT.

2 JWT (JSON Web Tokens): Overview and Setup in WordPress

JWT (JSON Web Tokens) is another method for securing API requests. It’s a

compact, URL-safe token that represents claims between two parties. Unlike

OAuth, JWT is simpler to set up and is commonly used in mobile app development

because it’s lightweight and doesn’t require user redirection.

With JWT, the WordPress backend generates a token for the user, which the mobile

app can use to make secure API requests. The token is typically short-lived and

contains user information, like their ID and role, to authenticate the user on

subsequent API calls.

3 Setting Up the JWT Authentication Plugin in WordPress

To enable JWT authentication in WordPress, you need to install and configure a JWT

Authentication plugin. Here’s how to do it:

1. Install the Plugin:

Go to the WordPress admin dashboard.

Navigate to Plugins > Add New.

Search for the JWT Authentication for WP REST API plugin.

Install and activate the plugin.

10

2. Configure the Plugin:

After activation, you need to configure the plugin by adding

a secret key in your wp-config.php file.

This key is used to sign the JWTs.

Open the wp-config.php file in your WordPress installation.

Add the following line before the “/* That’s all, stop editing!

Happy blogging. */” line: define('JWT_AUTH_SECRET_KEY',

'your-secret-key-here');

Replace 'your-secret-key-here' with a strong, unique key. You

can generate a key using online tools like randomkeygen.com.

3. Enable CORS (Optional):

If you’re accessing the WordPress API from a different domain

(such as a mobile app), you may need to enable Cross-Origin

Resource Sharing (CORS) to allow the app to communicate

with the WordPress backend.

You can do this by adding the following to your .htaccess

file or your WordPress theme's functions.php:

header("Access-Control-Allow-Origin: *");

4 Code Example to Handle Token Generation and Validation:

Once the plugin is set up, you can use it to generate and validate JWT tokens.

Generating the Token:

To authenticate a user, you’ll need to send a POST request to the WordPress REST

API endpoint /wp-json/jwt-auth/v1/token. This request includes the user’s

credentials (username and password). If the credentials are correct, WordPress will

return a JWT token.

11

Here’s an example of how to send a request from your mobile app to get the token:

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify({

username: 'your-username',

password: 'your-password',

}),

})

.then(response => response.json())

.then(data => {

if (data.token) {

// Store the token for later use

console.log('JWT Token:', data.token);

} else {

console.log('Authentication failed');

}

})

.catch(error => console.error('Error:', error));

Validating the Token:

Once the token is generated, your mobile app can include the token in

the Authorization header when making subsequent API requests to

access protected resources (e.g., posts or user data). WordPress will

validate the token and allow access if the token is valid.

Here’s an example of how to make an authenticated API request using the

token:

12

method: 'GET',

headers: {

'Authorization': `Bearer ${token}`, // Include the JWT token },

})

.then(response => response.json())

.then(data => {

console.log('Posts:', data);

})

.catch(error => console.error('Error:', error));

In this example:

Bearer ${token} is how you send the JWT token with the API request.

If the token is valid, WordPress will respond with the requested

data (e.g., posts).