How To Use WordPress REST API with Authentication/Authorization In Ionic Angular?

Hello Friends I am Suhasini Mishra, Once Again I welcome all of you today in this How To Use WordPress REST API with Authorization In Ionic Angular? article on RKR Knowledge. How are you all? I hope all of you will be safe in your home.

Today’s article How To Use WordPress REST API with Authorization In Ionic Angular? is very interesting and very important. In fact, through this article today, I want to share a little bit of knowledge about this topic with you whatever knowledge I have.

In this How To Use WordPress REST API with Authorization In Ionic Angular? article of today, what problem I faced? And how I solved it, which I am going tell to you in this article, then, please read it completely, maybe you can also solve your own problem through it. So Lets Start.

While doing a project recently, I had faced the problem at the time of WordPress REST API with Authorization that, for doing the authentication in ionic Angular using the WordPress Rest API, I did not know how to send a request in the HTTP header. And to solve this problem, let’s see what solution I did.

I assume that you must have installed Ionic. And how to run Ionic? you all know, so we learn directly how you can do authentication through WordPress Rest API in ionic angular?

So, first of all i declared the global variable and i stored the credentials in it. so i can access it all over the application.

How to declare a global variable in Ionic?

Step:1 First of all, we have to make a global variable. So that we can easily access the global variable on any page.

Step:2 To declare a global variable, you need to create a file named GlobalConstant.ts.

Step:3 And we will use the command to create a global constant file. For that first, we will create a class file and name it as GlobalConstant.ts.If you want to make this file inside a folder you can make it or you can also make it outside the folder.

But I have created the file inside the common folder, and its command is shown in the screenshot below.

Whenever you run this command, your file will be created inside the common folder.

After creating this file, you can declare all the global variables in that file. I have declared two global variables named username and password.

To do authentication while sending the api request to WordPress, you have to store the value of the username and password of your WordPress application in that variable. that I have shown in the screenshot below.

Later you can access those variables on any page by importing this page in any file by using import{ GlobalConstants } from ‘./common/global-constants’. After this, to do the authentication, we have to do the code which I have given below.

How to send authorization details in HTTP header while using WordPress REST API in Ionic Angular?

 const headerDict = {
            'Content-Type': 'application/json',
            'Authorization':"Basic " + btoa(""+GlobalConstants.userName+":"+GlobalConstants.passWord+""),
          }
          
          const requestOptions = {                                                                                                                                                                                 
            headers: new HttpHeaders(headerDict), 
          };

• In the above code, we have created a dictionary named headerDict, you know that dictionaries are always in key-value pair.
• In which we have given the application/JSON value in the content type key so the response of our application will come in the JSON format,
• you can also change it according to your requirement and another key is the authorization in which you have to pass the username and password that we stored in globalConstants file.
• After that, we created another dictionary named request options in which we created the object of HttpHeaders and passed headerDict in that object.
• For using HttpHeaders you need to import this line in the file import { HttpClient, HttpHeaders } from ‘@angular/common/http’;

• and then you have to inject this line public http: HttpClient in the constructor.

• After that, you have to pass that requestsOptions to the function,
• in which function you have to perform the authentication which I have shown in the code below,
• and at the same time, we will have to pass it in the get method of HTTP.

async getCategories(url: string, showLoading,requestOptions) {
        const loading = await this.loadingController.create({
          message: 'Loading...'
        });
            if (showLoading) {
              await loading.present();
            }

        const route = this.url + 'wp-json/wp/v2/categories?per_page=100';
    
        return new Promise((resolve, reject) => {
          
this.http.get(route,requestOptions)
            .subscribe(data => {

              if (showLoading) {
                loading.dismiss();
              }
              this.categories = data;
              console.log(this.categories);
              resolve(this.categories);
            },
              error => {
                if (showLoading) {
                  loading.dismiss();
                }
                reject(error);
                this.presentToast(error.error.message)
              })
        });
  }

In the above code, I have highlighted the code in which I have passed the request options Dictionary.

So in this way you can do Authentication and send authorization header in Ionic Angular for using Authorized WordPress Rest API. I hope you have understood. If you have any questions in your mind, then you can ask by commenting on this post. Thank You.

You May Also Like:–

• Create a Stunning WordPress Theme from HTML Template Easily
• Something interesting about WordPress and Blogger, You have to know……..
• ThemeRaja Review – Best GPL Plugins and Themes Seller
• Chatting v/s Email
• Best 10 Browser Extension for Developer/Web Designer

How To Use WordPress REST API Authorization In Ionic Angular?