Creating an OAuth login request

Keyboard Shortcuts

We want to create the OAuth authentication flow in our application. This video shows how to generate a request token, send users to Twitter to sign in, and get authenticated users back to our application.

- [Saleh] In the previous video,we looked at an overview of OAuth.In this video, we are going to take a lookat setting up the Express JS routerto handle the OAuth authentication flow.You will add our Twitter keys and secrets to a config file,then, you will store the stateon the client using HTTP cookies.Finally, we will code our application toget the request token, send the user to Twitter,and take the authenticated users back to our application.Let's first look at the files that we'll be using.We have four files.

Index dot JS is the entry point to our application.It tells the Express JS router configuration.Authenticator dot JS has the handers forthe URLs used by OAuth.Config dot JSON has our application's keys, URLs and port.And package dot JSON has the application's meta data.Let's open package dot JSON.We can see that we have three dependencies.Cookie parser is an express JS middlewarefor parsing cookies.Express is the web framework,and OAuth is an amazing no JS modulefor communicating with OAuth servers.

To install the dependencies, let's run npm install.Now, let's go to Index dot JS.Here, we create our express app.Then, we let our app use the cookie parser middleware.Then we define two routes.The first route is used when the user clickson the sign in using Twitter button.It generates a request tokenand redirects the user to Twitter.The second route handles OAuth as callback.

This function gets the URL path from a full URL.The handler calls the authenticators' authenticate method.There was an error in the authentication,you will respond with a 401 status code,which corresponds to unauthorized.If the authentication was successful,we send the authentication successful messagein the response.Finally, we listen for requests onthe port defining the config file.Let's now take a look at our config file.In this file, the port and callback are defined by us.

We should get everything else from Twitter.Let's do that.We'll go to apps dot Twitter dot com,and select the app that we created in section one.Here, we can find the request token URL,the authorize URL, and the access token URL.These values are already included in the config file.The consumer key should also be copied.To get the consumer secret, we'll clickon manage keys and access tokens.Here we can find a secret that we needto add to our config file.

The next two fields, Oauth version and OAuth signature,can be found on Twitter as API docs.These values should be the same for all users.Finally, we need to give Twitter a callback URL.If you have publicly accessible server,use the domain name or IP address of the serveras the hosting of the URL.If you are like me and do not havea publicly accessible server, use ngrok.Ngrok is a very useful tool that lets us exposethe server sitting behind a net or a firewall.When you download ngrok, run ngrok HTTP 8080.

This creates an HTTP tunnel on port 8080.Let's copy this URL and use itin all OAuth underscore callback.The last part of our application is the authenticator.The authenticator handles everythingthat has to do with Oauth.We require the OAuth module,initialize the Oauth objectwith Twitter as API configuration.And finally, we export two functionsthat are used by their router.The first function calls through its OAuth Server,and requests a request token.

When it gets the request token,it stores them in the HTTP cookies,and sends them to the client.We do that because res servers wants to be stateless.The HTTP only option marks that the cookiesshould not be accessible using JavaScript.This acts as a protection in case our appwas vulnerable to cross-site scripting.We then redirect the user to Twitter as authorize URLso that the user can log in to Twitter.The next function is called after Twitterredirects the users back to our app.In this function, we can access the cookiesthat we set earlier using direct dot cookies object.

Twitter includes an all OAuth ready firewith the request.This is the temporary credential.We will use that very fire in the next videoto get an access token.Then, we clear the request token cookiesand finally, we hand the control back to our router.Let's try to run the app.We can use the URL that ngrok gives us.We'll go to slash OAuth slash Twitter.As we can see, we were redirected to Twitter to sign in.Let's authorize our app.

Authentication successful.Let's go to slash OAuth slash Twitter again.Instead of authorizing the app this time,we will refuse to authorize it.We'll click on cancel and return to our app.As we can see here, the server returned a 401 unauthorized.In this video, we have learnedhow to set up OAuth for Twitter and node JS.We learned about the cookie parser middlewareand how to use it to store data on the client.In the next video, we will performthe last step needed to access protected resources.

Resume Transcript Auto-Scroll

Author

Released

9/8/2016

Note: RESTful Web API Design with Node.js was created by Packt Publishing. It was originally released on 4/29/16. We are pleased to host this training in our library.

RESTful web APIs allow developers to create unprecedented applications by leveraging big data on the Internet. Since JavaScript is the language of the web, building APIs using Node.js (a JavaScript framework) provides a seamless development experience on both the front end and the back end.

This Node.js training course gives you an overview of a RESTful API and the logical steps of building one. It explores three different APIs, focusing on their similarities and differences to effectively implement one. Author Saleh Hamadeh starts off by defining APIs, showing how they can be built on top of HTTP and listing the properties that make an API RESTful. Then learn how to develop Twitter Notes, a sample web application that lets its users leave notes for their Twitter friends. You'll use Twitter's API to implement a login flow and then design a web API. In addition, you'll get a closer look at two other real-world APIs—Facebook API and GitHub API. Finally, learn some best practices to keep APIs secure, maintainable, and efficient.