Postman and Drupal

Photo by John Baker on Unsplash
Share this

Postman makes API development simple, and if we use Drupal, it will be more simple. 

From the side of Drupal, even if there is a large documentation about all the kinds of web services, use this tool for testing is fundamental, because you don't know what kind of information Drupal will send you back, or how should be the information that you send to Drupal. 

That is why all around the project Login from Angular into Drupal I have used Postman for testing 4 requests.

  1. Check out if the user-list service was working. 
  2. Ask for an Authorization Token
  3. Access to forbidden content with a token. 
  4. Refresh the token.

Check out if the user-list service was working.

This one was the simplest one, so let's use it to explain how postman works. When we start using the tool, the first option that we got is built a new block, which could be a request, a collection or an environment. For this case, I create a new Collection

Remember, from the side of Drupal, I created a rest format view with a list of users, and I was able to access into it by going to http://mysite/user-list?_format=json, but without any plugin, for reading JSON format the response is a little messy. So for testing with Postman, the only thing that we need to do is copy and paste the URL and specify the method, in this case, the Get method.

Once we have this, for our Angular project, we can use it for understanding the structure, a common mistake is forgetting to match the class with the JSON response, for example, this is my class and it has to fit with the json that I got from the view. 

Look at the structure for our Userlistclass.

export class UserList {
        name: string;
        uid: number;
    }

And this is how I call the data in the component

<span class="badge">{{user.id}}</span>{{ user.name | uppercase }}

See that all the names and variables that I use have the same name, from the Json we have a string “name” and in template component I print that user.name, all the name it still the same variable. 

[{
        "name": "josue",
        "uid": "1"
    },{
        "name": "test",
        "uid": "2"
}]

Ask for an authorization Token: We need to send credentials, which means, from the user, the username, and the password, from the client, the id, and the password and specify the type.

All this to the http://mysite.com/oauth/token route. About the header, is optional to set it as Content-type application/x-www-form-urlencoded, it will work with or without that. 

authorization token

The Grant_type is by default. The client_id and the client_secret come from our Drupal client of which we spoke in the previous post. And the username and the password comes from a Form in our login component from Angular. 

    onSubmit(name: string, pass: string): void { 
    	name = name.trim();
    	if (!name) { return; }
  		let user: any = { name, pass };
  		 // console.log('Body ' +JSON.stringify(user));    
  		this.LoginService.login(user.name, user.pass)
  		  .subscribe(
          data => {this.router.navigate (['/']);},         
          error => this.errorMsg = error
           );
    }

We will see it deeply in our next post about How to Login With Angular and Drupal


Access to forbidden content with a token: In this case, we need to include the token that we got and add it to the header. For that 

get with authorization token

Refresh Token: For refresh the current token, we go to the same route, http://mysite.com/oauth/token but we made some changes, for example, our Grant_type now is refresh_token, and we include the refresh_token from our previous request. We still including the cliend_id and the client_secret. 

refresh token

And that is all!. I would recommend you to test your Drupal configuration before start anything in Angular, it will help you with the logic of the whole project and you will be sure that the backend, is perfect. 

Comments

Submitted by Developper Sat, 05/26/2018 - 14:27

Hello,

Thanks for your amazing tutoriel.

Actually, I followed all steps indicated, but I always get 403 forbidden as a response from Drupal 8 using the post method.

I don't really know what's rong with POST method???

In my rest API, POST method is enabled with Oauth2 and basic auth providors !

Submitted by josuevalrob Mon, 05/28/2018 - 19:50

In reply to by Developper

If your Get method is working, that means that the Drupal Site is answering very well... So let's move on other possible errors. 

The most obvious are the credentials, so it will depend on the configuration of your OAuth2 module. 

Check your Consumer configuration on the Drupal side: 

client

Submitted by Developper Thu, 05/31/2018 - 11:37

In reply to by josuevalrob

Thanks for your reply!

I found out that by changing this line of Drupal file "service.yml":

allowedOrigins ['http://localhost:4200']

to:

allowedOrigins: ['*']

My token was eventually created in postman with post method!

Still, I don't really know why GET method wasn't forbidden too ?!

Thanks again for this tutorial, I follow it step by step in my project :)

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.