Git Product home page Git Product logo

express-oauth-handrolled's Introduction

Handrolled OAuth in Express

Learning Objectives

  • Identify the 3 different "legs" of OAuth
  • Use an external API to provide user authentication on an app
  • Explain the difference between a session variable and an environment variable

Big keywords

  • Request token
  • Consumer key
  • Consumer secret
  • User token
  • User secret
  • Callback URL
  • Querystring
  • Authorize
  • Authenticate

Framing

What is OAuth?

Most "Log in with X" buttons you see use OAuth. We'll be looking at "Log in with Twitter" today.

OAuth is a set of standards; not software. Developers have agreed that this set of standards is a good way to securely authenticate users.

In short: your app asks Twitter to log in your user, and if they're successful, Twitter sends your app a special "token" that's unique to that user.

You can stop there and use this as a way of logging people in and out.

You can also take this a step further as a way of letting users authorize your app to talk to Twitter's API on their behalf. Using that token, your app can get additional information about the user, make posts for them and so on.

  • What's the difference between authenticating and authorizing?

The OAuth process

There are several versions and types of OAuth. We'll be using "three-legged" OAuth.

#

Registering your app with Twitter (15 min)

To use Twitter's OAuth, we need to register our application. This lets twitter control access and let's us provide the callback endpoint that Twitter will use to speak to our app.

  1. Start registration:
  • https://apps.twitter.com/
  • Click "Create New App"
  • Fill in the information for your WhenPresident app:
    • Name: of your app (must be unique across apps registered on Twitter)
    • Description: of "your" app
    • Website: Use "http://example.com" as a fake website
    • Callback URL: "http://127.0.0.1:3001/login/twitter/callback"
    • "Name", "Description", and "Webpage" do not matter much, for an in-class exercise. They are very important for a production app.
    • we will be creating the endpoint, in our app, for the Callback URL.
    • 127.0.0.1:3001 is an alias for localhost:3001. External APIs often don't like to work with localhost, but accept 127.0.0.1 just fine.
  • Set Permissions to read-only
    • Click the "Permissions" tab, select "read only", and press "Update Settings".
  • We will need the Keys for this app
    • Click on the "Keys and Access Tokens" tab
    • We will be using the "Consumer Key" and "Consumer Secret" soon.

References

express-oauth-handrolled's People

Contributors

robertakarobin avatar jshawl avatar mattscilipoti avatar nolds9 avatar

Stargazers

don c avatar

Watchers

James Cloos avatar Jon Rojas avatar  avatar Becky Beauchamp avatar Brian Martinowich avatar

express-oauth-handrolled's Issues

∆+ Student feedback

In general, there wasn't enough time to research any unknowns. We need to free up time for research.

Recommend:

  • provide some code for copy/paste. Choose wisely.
  • work in pairs. One researches, while other types. Switch periodically.
  • explanatory comments

∆+ Review LessonPlan

Framing:

  • + looks good. Excellent diagram.

Registering:

  • ∆ Should clarify that name/desc/website are unimportant for class - very important for actual app. Maybe some "sample" data, so they don't overthink.
  • ∆ Why am I creating a twitter app? What will it do for me? Is this THE app? #pendulumswungtoofar

Walk thru:

1 Setup

  • +++ "Your goal"
  • ∆ rename "Added sessions" to "Add support for sessions"
  • ∆ How to verify goal?
    • Maybe display the/some settings on a, soon to be authenticated, about page?
  • ∆ That's a lot of setup just to make nodemon work.
    • I don't see how it aligns with my goal.
    • What functionality do I now have that I didn't have when I started?
    • I now know how (kinda), but have no idea why I need a session, secret, api key, or callback_url. Do I need all of these all the time? Will the questions provide this?

2

Looks good

3

in progress

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.