How to Connect Angular to WordPress API with Authentication?

In this guide, you will be going to know how to work with the (WORDPRESS API) with wp-api-angular library that enables you to communicate with the WordPress API from Angular applications. Additionally, this library will support all major WP resources including USERS, POSTS, COMMENTS, MEDIA, TAXONOMIES, etc.

To work with the library you’re going to code the following features, Authenticating using JWT, Listing Users, Listing Post, Creating / Editing the Post, Deleting Post. Let’s dive in.

Setting Up and Configuring WordPress

Before we begin coding there are a couple of things to do so. First is we will going interact with WordPress API running locally or self-hosted WordPress, to do this we required to use WAMP, XAMP, MAMP, Bitnami WordPress Stack or Similar Application to host our WordPress locally. Next, you need to enable the WordPress Permalinks which is required for our API client to communicate. For NGINX you’ll need to add the flowing link to the nginx.conf file, below the configuration.

Detailed information and explanations to enable WordPress permalinks please follow this link. Note that you need also to take care of WordPress security by using the JWT Authentication plugin to manage our authentication process with the WordPress API. If you know more about WordPress API just follow this link.

Working with Bootstrap

I am assuming that all required is ready, WordPress is installed and running to your localhost or existing WordPress site. On the other hand, you can now open your Command Prompt, to create an Angular application by typing.

The command above will create a skeleton for the application, please refer to this link for more information about the Angular series. Now navigate to the directory by typing CD into the desired directory and install the library itself.

Then you need to import the components inside of the src/app/app.module.ts

Keep in mind that WpApiModule should be also added to the imports. Keep in mind we must use the factory for AoT compilation.

The below code is the factory itself.

Keep in mind the do not forget to provide your domain name, additionally, you need to add some imports to the app.components.ts file.

You need the NgForm to generate forms that HTTP modules can interact with the API and Headers for the user to authenticate.

The Client API Authentication

Additionally, before you interact with the API, you need to introduce the authentication mechanism, a token-based authentication will be used, you need to add a token variable to the app.component.ts

Additionally, edit the app.component.html file by adding a new line

In order to work, a separate component is required, you need to generate an authentication component.

You need to import the necessary module inside the src/app/authentication/authentication.component.ts file

The authentication method is going to be very easy, a user should input their username and password, then submit the form, then a special token will be returned if the credentials are true. This token will then be used to execute API requests. Therefore, let’s conscript a user and add input and output to the AuthenticationComponent

You may define the user as a model, but for this demo, it’s not necessary. As for the constructor, will pass the HttpClient to it.

At the code line auth method. It’s as simple as sending a POST request to the proper URL with the credentials and expecting the response.

Don’t forget to input the domain name into the URL. The component is set. additionally, you need to create the corresponding form. That should be displayed only if the token is null. When the form is submitted, the auth method should be called

Then the next step is adding two fields and a submit button.

That’s it!, Our authentication is completed.

Leave a Reply

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