The logic behind Angular login with Drupal.

Photo by rawpixel.com on Unsplash
Share this
Resource

Understand this is the key, if you already know what to do, even if you are new to the tool, this will create a kind of mental map and will be easier to find help. 

Now, I will divide all the Angudru Project in 4 stage. In every stage, I use different icons, like for example, the admin from Drupal, the database or Postman. I will upload the illustrator file if you need to use it for explaining anything, even if you want to improve them, I will be very, very thankful. 

So, a faster summary: First you need to create a Drupal and outside this, an Angular site. From Drupal we need a “protected” content, it means a content that just can be accessed by a specific user role. From angular, we will ask for user credentials and send them via web service to the Drupal site. Once the Drupal site authenticates the credential, it gives us a token, the token will be the key for us. Back in Angular, with the token, we will include it in our header and tell to Drupal that we are users with a specific role, so it has to show us the content. 

I like to create a list of steps before I start working. So, let’s put some step by step. 


First, Show a list of users, from Drupal to Angular:

  1. Create our Drupal Site. 
  2. Setup Rest module and enable Simple Oauth
  3. Create a REST export view with a list of users (or anything)
  4. Create a new Angular project. 
  5. Check user-list service, with postman!
  6. Show the list of users in Angular
  7. Create a User Class
  8. User component
  9. User-list service
user-list testing

This was the first stage, after testing my User-list rest service, I know what I need to send in my user-list.service with the get method in angular, and also I know how will be the Drupal response. So, create a User class to keep that data and a user component to show that data. Simple!


Second: Protect your data, ask for a token. 

  1. Set-up Simple OAuth module. 
    1. Create a Client. 
  2. Test the login with Postman. 
  3. Create the Login Form in Angular
    1. Create a Token class 
    2. Create a login component
  4. Login service 
    1. send the credentials
    2. handle errors and 200 ok response
  5. Guard
    1. authentication service
    2. Guards!
  6. Create an App routing. 
guards

In this second part, everything gets complicated. First, configure the Simple OAuth module adding a new client, we saw that in our previous post. So, we need to test it with Postman and know what the hell Drupal wants to give us the token and how it will respond.

Once we know that, is time to create the Login Component, with a Token class for keep some data, (we will use local storage, for now, maybe later I will update it with a behaviour subject), and an entire form to get the username and the password and send it to our login.service using our post function. 

After that, we need to handle the errors, if Drupal give us a 401 or a 403, will be impossible to access, but if it give us a 200 ok, is okay to let them go to the User-list component. That is not enough protection, so I include the Authentication service and Guards to keep our little user-list component under protection.
The authentication service is called by the Guards, which is working in our router. Once a user wants to access to our user-list component, from the route /home, we call the Guard, and this, in turn, calls the authentication services to know if the access has or not the authenticated token.  


Third: Access to your content with the token. 

  1. Set permissions, and protect the user-list view in Drupal
  2. Test sending the token into the header with Postman
  3. Read the forbidden content with Angular
    1. Add the token to the header. 
       

 

authentication token

Good! now comes the easy part again. Until now, Drupal was showing the user-list content to everyone, because there weren’t any permissions needed to see that content.

The first thing that we do here, is changing the permissions, let it available for our authenticated users.

And, if we test the application now, it will let us get into the user-list content, but it will not show us the content.

That is because we need to prove to Drupal that we have the token. For that, we need to include in our header the token. 


Fourth: Time over, intercept errors and update your token. 

  1. Test refresh token with Postman
  2. Interceptor
    1. Add an interceptor for sending the header
    2. In that interceptor catch the error for outdated token
  3. Handle error, if is 403 refresh the token
  4. Handle error, if is 401 send it to the login page. 
     
refresh authentication token

Now it gets a little more complicated. Yeah, I will write a post about how to use Postman and Drupal, it’s very helpfully. After know what Drupal needs, and what it gives us, we know how to use Angular to send all that. But we face a new problem, after a while, our token is out of date, so there are two solutions, the first one is asking for the credentials again, the second one is asking for a new token, with a refresh token. 

Is hard to see it on the graphic, but in the top of our postman, there is a different token, it has a refresh icon inside the key, so let’s use our imagination and suppose that it is our refresh token that we use to get a new token. 

In Angular, the interceptor tells us when we need to ask for a new token. After sending a request, the interceptor, intercepts, the response, and if it is 200 ok, it shows the content, if it is 403, it calls a handle error 403 functions which will call the refresh token service. If it is 401, nothing happens, our refresh token is outdated so we need to ask for new credentials. 

Extra info: What the hell is a refresh token??
Well, the Simple OAuth module, give us tow tokens, one with a short time of life and other one with a little bit longer. The short one is the main token, the one that we use for login. If for any reason someone steal our token, I don't know, maybe you post it on facebook, or something like that… who know!. Well it doesn't matter, that token have a very short lifetime, so after a couple of seconds will be invalid. For refresh that token, we use the refresh token!. and use it as credential for the new one, like the bracelets from the club that let you get in after a while… something like that! good luck. 

Know how Postman works with Drupal will reduce a lot of time, so I will talk about that in my next post, good luck!

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.