This document discusses OAuth and OpenID Connect for authentication and authorization. It begins with an introduction to traditional authentication and its limitations. OAuth is then introduced as a solution, with descriptions of the authorization code and implicit flows. JSON Web Tokens and their structure are explained. Code samples are provided for building an OAuth authorization server and API with Express, JWT, and other packages. Finally, OpenID Connect is discussed as an identity layer that builds on OAuth 2.0, with descriptions of its scopes and flows.

1. I Don’t Care About Security
And Neither Should You

2. @joel__lord
#confoo
About Me
@joel__lord
joellord

6. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

7. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

8. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

9. That reminds me of OAuth!

10. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

11. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

12. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

13. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

14. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

15. @joel__lord
#CPL18
OAuth - Flows
Authorization Code

16. But Why?

17. Delegation!

18. Traditional
Applications
! Browser requests a
login page

19. Traditional
Applications
! Browser requests a
login page

20. Traditional
Applications
! Browser requests a
login page

21. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database

22. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
👍

23. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
! It creates a session
and provides a
cookie identifier

24. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application

25. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled

26. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled
! Sharing credentials
to connect to another
API

27. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled
! Sharing credentials
to connect to another
API
! Users have a
gazillion passwords
to remember, which
increases security
risks

28. OAuth

29. OAuth - The Flows
Authorization Code

30. @joel__lord
#CPL18
Authentication Flows
Authorization Code

31. @joel__lord
#CPL18
Authentication Flows
Authorization Code

32. @joel__lord
#CPL18
Authentication Flows
Authorization Code

33. @joel__lord
#CPL18
Authentication Flows
Authorization Code

34. @joel__lord
#CPL18
Authentication Flows
Authorization Code

35. @joel__lord
#CPL18
Authentication Flows
Authorization Code

36. OAuth - The Flows
Implicit Flow

37. @joel__lord
#CPL18
Authentication Flows
Implicit Flow

38. @joel__lord
#CPL18
Authentication Flows
Implicit Flow

39. @joel__lord
#CPL18
Authentication Flows
Implicit Flow

40. @joel__lord
#CPL18
Authentication Flows
Implicit Flow

41. @joel__lord
#CPL18
Authentication Flows
Implicit Flow

42. @joel__lord
#CPL18
Authentication Flows
Implicit Flow

43. Tokens 101

44. @joel__lord
#CPL18
OAuth
Tokens
Access Token Refresh Token
! Give you access to a resource
! Controls access to your API
! Short lived
! Enables you to get a new token
! Longed lived
! Can be revoked

45. @joel__lord
#CPL18
OAuth
Tokens
Refresh Token
! Enables you to get a new token
! Longed lived
! Can be revoked

46. @joel__lord
#CPL18
OAuth
Tokens
Refresh Token
! Enables you to get a new token
! Longed lived
! Can be revoked

47. @joel__lord
#CPL18
OAuth
Tokens
! WS-Federated
! SAML
! JWT
! Custom stuff
! More…

48. JSON Web Token
! Header
! Payload
! Signature
Header
{
"alg": "HS256",
"typ": "JWT"
}
Payload
{
"sub": "1234567890",
"name": "Joel Lord",
"scope": "posts:read posts:write"
}
Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload), secret)

49. JSON Web Token
! Header
! Payload
! Signature
Header
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
Payload
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG
9yZCIsImFkbWluIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlY
WQgcG9zdHM6d3JpdGUifQ
Signature
XesR-pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg

50. JSON Web Token
! Header
! Payload
! Signature eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMj
M0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG9yZCIsImFkbWl
uIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlYWQgcG9zdHM6d
3JpdGUifQ.XesR-
pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg

51. JSON Web Token
! Header
! Payload
! Signature
Image: https://jwt.io

52. Codiiiing Time!

53. Auth Server API
var express = require('express');
var Webtask = require('webtask-tools');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var jwt = require("jsonwebtoken");
var app = express();
var users = [
{id: 1, username: "joellord", password: "joellord"},
{id: 2, username: "guest", password: "guest"}
];
app.use(bodyParser.json());
app.post("/login", function(req, res) {
if (!req.body.username || !req.body.password) return res.status(400).send("Need
username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.status(200).send({token: token});
});
app.get('*', function (req, res) {
res.sendStatus(404);
});
module.exports = Webtask.fromExpress(app);
var express = require('express');
var Webtask = require('webtask-tools');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
var users = [
{id: 1, username: "joellord", password: "joellord"},
{id: 2, username: "guest", password: "guest"}
];
app.use(bodyParser.urlencoded());
app.get("/login", function(req, res) {
var loginForm = "<form method='post'><input type=hidden name=callback value='" +
req.query.callback + "'><input type=text name=username /><input type=text name=password /
><input type=submit></form>";
res.status(200).send(loginForm);
});
app.post("/login", function(req, res) {
if (!req.body.username || !req.body.password) return res.status(400).send("Need
username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

54. Auth Server
var express = require('express');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
// ...

55. Auth Server
var express = require('express');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
// ...

56. Auth Server
var express = require('express');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
// ...

57. Auth Server
var express = require('express');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
// ...

58. Auth Server
// Requires ...
var users = [
{id: 1, username: "joellord", password: "joellord"},
{id: 2, username: "guest", password: "guest"}
];

59. Auth Server
// Requires ...
var users = [...];
app.use(bodyParser.urlencoded());
app.post("/login", function(req, res) {
// POST for login
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

60. Auth Server
// Requires ...
var users = [...];
app.use(bodyParser.urlencoded());
app.post("/login", function(req, res) {
// POST for login
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

61. Auth Server
app.post("/login", function(req, res) {
// POST for login
if (!req.body.username || !req.body.password)
return res.status(400).send("Need username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});

62. Auth Server
app.post("/login", function(req, res) {
// POST for login
if (!req.body.username || !req.body.password)
return res.status(400).send("Need username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});

63. Auth Server
app.post("/login", function(req, res) {
// POST for login
if (!req.body.username || !req.body.password)
return res.status(400).send("Need username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});

64. Auth Server
app.post("/login", function(req, res) {
// POST for login
if (!req.body.username || !req.body.password)
return res.status(400).send("Need username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});

65. Auth Server
// Requires ...
var users = [...];
app.use(bodyParser.urlencoded());
app.post("/login", function(req, res) {
// POST for login
});
app.get('*', function (req, res) {
res.sendStatus(404);
});
app.listen(8080, () => console.log("Auth server running on 8080"));}

66. API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

67. API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

68. API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

69. API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

70. API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

71. API
// Requires ...
var jwtCheck = expressjwt({
secret: "mysupersecret"
});

72. API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
res.status(200).send(randopeep.clickbait.headline());
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
res.status(200).send(randopeep.clickbait.headline("Joel Lord"));
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

73. API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
res.status(200).send(randopeep.clickbait.headline());
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
res.status(200).send(randopeep.clickbait.headline("Joel Lord"));
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

74. API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
res.status(200).send(randopeep.clickbait.headline());
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
res.status(200).send(randopeep.clickbait.headline("Joel Lord"));
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

75. API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
res.status(200).send(randopeep.clickbait.headline());
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
res.status(200).send(randopeep.clickbait.headline("Joel Lord"));
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

76. API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
});
app.get('*', function (req, res) {
res.sendStatus(404);
});
app.listen(8888, () => console.log("API listening on 8888"));

77. @joel__lord
#CPL18
Front-End
Add the headers

78. Live Demo
github.com/joellord/idontcare

79. Delegation!

87. Introducing OpenID Connect

88. @joel__lord
#CPL18
OpenID Connect
! Built on top of OAuth 2.0
! OpenID Connect (OIDC) is to OpenID what
Javascript is to Java
! Provides Identity Tokens in JWT format
! Uses a /userinfo endpoint to provide the info

89. @joel__lord
#CPL18
OpenID Connect
Scopes
! openid
! profile
! email
! address
! phone

90. @joel__lord
#CPL18
OpenID Connect Flows
Authorization Code
scope=openid%20profile

91. @joel__lord
#CPL18
Authentication Flows
Authorization Code

92. @joel__lord
#CPL18
Authentication Flows
Authorization Code

93. @joel__lord
#CPL18
Authentication Flows
Authorization Code
/userinfo

94. @joel__lord
#CPL18
OpenID Connect
Full flow
https://openidconnect.net

95. Delegation!

96. I Don’t Care About Security
JS-Paris, April 6th 2018
@joel__lord
joellord