OAuth 2.0 is an authentication protocol that is used to authenticate and authorize users in an application by using another service provider.
In this post, we will authenticate using GitHubs Auth2 API and build a sample node application running on the local port 8080 with a web interface.
You can get the source code from here.
You can get the source code from here.
OAuth2 flow
There are 3 parties in any OAuth flow:
1. Client - The person or user who is logging in
2. Consumer - The application that the client wants to log in to
3. Service Provider - The external application through which the user authenticates
So in our use-case, the client would be the web interface, the consumer would be the application running on localhost:8080 and the service provider would be GitHub.
Below diagram explains the flow of the application.
Once we start the application, we will be directed to a page as below.
<body> <a href="https://github.com/login/oauth/authorize?client_id=*****&redirect_uri=http://localhost:8080/oauth/redirect"> Login with github</a> </body>
The above link has three key parts
1. https://github.com/login/oauth/authorize is the OAuth Gateway for GitHub's OAuth flow. All OAuth providers have a gateway URL that you have to send the user in order to proceed.
2. client_id=***** this specifies the client id of the application. This ID will tell GitHub about the identity of the consumer who is trying to use their OAuth service. OAuth service providers have a portal where you can register your consumer. I registered my sample node application using the GitHub registration portal found here https://github.com/settings/applications/new.
3. redirect_uri=http://localhost:8080/oauth/redirect specifies the URL to redirect to with the request token once the user has been authenticated by the service provider. This URL has also been set when registering the application at GitHub Registration portal (see above screenshot).
Once you click the "Login with GitHub" link, you will be redirected to the familiar OAuth Page to register with GitHub.
We need the request token and client secret to get the access token , which is the token that is actually used to get the information about the user. We get this access token by making a POST HTTP call to https://github.com/login/oauth/access_token?client_id=${CLIENTID}&client_secret=${CLIENTSECRET}&code=${REQTOKEN}
Once the redirect URL execute a POST request to get the access token as explained above, if the access token is received, the user will be redirected to the welcome page. The welcome page is the page we show after the user has logged in. Now that we have the users access token, we can obtain their account information on their behalf as authorized GitHub users.
There are many API's available in GitHub's API Documentation, however we will be using the /user API to get basic information about the user. In the welcome page, first we extract the access token from the browser's query param since we redirected to welcome page with the access token (http://localhost:8080/welcome.html?access_token=<accessToken>), then we call https://api.github.com/user and include the access token as a header.
The response from the above GET request will have many fields which is shown below through Postman.
Finally, the welcome page will display a greeting which includes the login username extracted from the above JSON payload as ${ res.login }.
Ashen Jayasinghe
Full Stack Developer
DMS
