Implementing an OAuth 2.0 Client - Node.js


Hello! I hope you had a good day and an awesome week. 😊

Daily we come across many websites that would require us to register with them in order to fulfil our requirements. As we need to complete our work we would make an account on these websites even though we are not going to use them regularly or ever again. This would result in a long list of usernames and passwords for us to remember and forgetting at least one would be a troublesome task of resetting it.

As a solution to this problem, Single sign-on was introduced along with social logins. Single sign-on provides a way for users to have a single set of credentials (username and password) for multiple applications. This was achieved using social logins, where existing login details of a social platform provider can be used to register to a third-party website instead of creating a new set of credentials. OAuth 2.0 is a framework which helps in such a situation.

What is OAuth 2.0?

OAuth (Open Authorization) 2.0 is a framework for delegate authorization. It allows a 3rd party to access user information in a controlled manner upon user’s permission on behalf of the user. Hence, the term delegate is used. OAuth 2.0 is widely used by popular social media providers like Facebook, Google, Twitter etc. to provide social logins. Here, the social media platform providers would allow the 3rd party to access user information without revealing user credentials. This allows developers to worry less about authorization and more about application logic.

In order to integrate a social login, the 3rd party application should first register the application with developer portal of the social platform provider and should obtain a client id and a secret, which acts like a password. Then 3rd party application can get an access token from the social media provider and by providing this access token the application can access user details whenever it is required.

There are 4 roles in OAuth 2.0.
  •           Client – the 3rd party application which enables registering through social logins
  •           Resource Owner – the user who is going to use the 3rd party application
  •           Authorization Server – gives access token to the client
  •           Resource Server – which stores resources such as user details

There are instances where authorization server and resource server are the same server.

There are 5 grant types in OAuth 2.0.
  •  Authorization Code – for server-side web applications
  •  Implicit – for client-side web application
  •  Resource Owner Password Credentials (Password) – for trusted applications from the same vendor (for example Facebook mobile app requesting from the Facebook server)
  •  Client Credentials – when protected data doesn’t belong to a particular user (for example requesting from a weather API)
  •  Refresh Token – for refreshing access token without user involvement

In this post we are only going to talk about Authorization Code Grant Type and its implementation from Node.js.

Authorization Code Grant Type

In this grant type, the client first receives a code, which would be used to obtain the access token.

There are 3 endpoints related to this grant type.
  •           Authorization Endpoint – use to initiate authorization process and issue code
  •           Token Endpoint – use to issue the access token
  •           Redirection Endpoint – use to send responses by the authorization server

Both authorization endpoint and token endpoint present in the authorization server whereas the redirection endpoint in the client.

Following diagram represent the flow of the authorization code grant type.

Authorization Code Grant Type


Once you get the access token, it can be presented to the resource server to obtain resources. Resource server makes a request to the authorization server to validate the received access token before sending the requested resources. This process is known as OAuth Token Introspection.

Node.js Implementation

Let’s look at the implementation to have a better understanding.

The demonstrated application use Instagram social login and displays user details gained from user’s Instagram account.

Before adding the social login to our application, it is necessary to register the application on Instagram developer portal (https://www.instagram.com/developer/). In order to have an Instagram social login, it is necessary for you to possess an Instagram account first. Once you get to developer portal, log in to it and select ‘Register Your Application’ option as shown below.

Developer Portal


Then you would get a page as below where it is necessary to provide the name of the application, phone number and a small description of your application.

Application Registration


Application Summary

Once you click ‘Sign up’, you would be directed to the above shown page. One important thing here is that it shows client status as ‘Sandbox Mode’. This is a fully functional environment ideal for developers to explore Instagram API, but there are some restrictions. As of currently, you would be the only one who would be allowed to use this social login for developing and testing purposes. If you want to add other users, they need to be invited and invitation should be accepted. Then again only 10 such users would be allowed in the sandbox mode including you.

Using ‘Manage’ option, details of the application can be managed as shown below. It is also can be seen that you have acquired a client id and a client secret that we talked about earlier.

Profile Management


Addition of Redirection Endpoints

As shown in the above image, it is best to provide a redirection endpoint. Multiple redirection endpoints can be provided.

Now let’s look at the implementation.

Step 1:
An authorization request is sent to authorization endpoint of Instagram (https://api.instagram.com/oauth/authorize/) as shown below.

Authorization Request

https://api.instagram.com/oauth/authorize/?client_id=2f5fb7d1345341f19c2eb07280006c67&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fmyprofile_redirect&response_type=code&scope=basic+public_content

Let’s understand the query parameters in the above authorization request.
  •           client id – Id of the application provided by Instagram.
  •           redirect uri – Redirection endpoint of the client. This is an optional parameter, but if a redirection endpoint is not provided in the developer portal or if multiple endpoints are provided, this becomes required. The value should be URL encoded.
  •           response type – Expected response type. Since this is authorization code grant type, the value should be ‘code’.
  •           scope – Specifies the resources that the application wish to obtain. Different social media providers define scopes differently. It is best only to put the absolutely necessary scopes.


Application Login Page

Shown above is the login page of the application. Once you click on ‘SIGN UP WITH INSTAGRAM’, the above request would be sent. Then Instagram prompt for the user to login.

Instagram Login Page

Then the user consent page is shown to the user. This is where the user has to give permission for the application to access data.

User Consent Page

Once the user accepts it, the ‘code’ would be sent to the redirection endpoint.

Redirection Endpoint

In redirection endpoint, the ‘code’ is extracted from the response, and an HTTP POST request is made to the token endpoint to get the access token.

Request for Access Token

Apart from the client id and the redirect uri, 3 more parameters are sent in the body of the request.
  •          grant type – Since this is authorization code grant type, the value is ‘authorization_code’.
  •          code – The code received from the authorization endpoint
  •          client secret – This is the main reason for this request to be a POST

I have used ‘Axios’ to make HTTP requests. More details can found here.

Once the access token is received, an HTTP GET request is made to the resource server to obtain user information as shown below. The only query parameter is access token.

Request for User Details
Request for Resources



When the resources are received, they can be shown in the application as below.

User Details Page

The full implementation of this example can be found at,
https://github.com/hinami95/oauth-2.0-client-nodejs

For more information on OAuth 2.0, visit,
https://tools.ietf.org/html/rfc6749

I hope now you have some idea what OAuth 2.0 is and how Authorization Code Grant Type works. I recommend you to read the developer documents of any platform before integrating their login to your application.

I wish you all an amazing week ahead! Adios 😊

Comments

Post a Comment

Popular posts from this blog

Double Submit Cookies Pattern - Node.js

Image
Hello! I hope you had a good day and an awesome week. 😊 In this post, we are going to talk about how to prevent Cross-site Request Forgery (CSRF) using Double Submit Cookies Pattern and its Node.js implementation. If you are unaware of CSRF, I recommend you to read my previous post here as it is crucial to understand Double Submit Cookies Pattern. Prerequisites are the knowledge about cookies, CSRF and Synchronizer Token Pattern. As discussed earlier, there are some drawbacks of Synchronized Token Pattern, namely, The requirement of excessive storage space in the server due to the fact that all the CSRF tokens are stored. Useless if the server supports cross-domain AJAX requests. To overcome the aforementioned reasons and to prevent CSRF, Double Submit Cookies Pattern can be used . Double Submit Cookies Pattern Double Submit Cookies Pattern When Harry signs in to the bank’s website using his username and password, the bank’s server would create a ses...
Read more

Synchronizer Token Pattern - Node.js

Image
Hello! I hope you had a good day and an awesome week. 😊 With the advancement of technology in information and communication sectors, millennials are electronics-filled, increasingly online and socially networked, which is exactly why everything can be done once you are connected to the internet. Doing online transactions have become so much easy making it is just a button click but, can we guarantee the safety of these transactions? Cross-site Request Forgery (CSRF) is a type of attack which targets such online transactions. You’ll need to have the knowledge of cookies as a prerequisite to fully understand CSRF. What is Cross-site Request Forgery? Cross-site Request Forgery (CSRF) is a malicious exploit of a website where unauthorized commands are sent from a user the website trusts, without this particular user’s knowledge. This is a vulnerability found in websites. Let’s see the below example to understand CSRF. Cross-site Request Frogery When Harry ...
Read more