Remember that time where setting up a login page was easy? It seems like nowadays, it take many weeks to start a project just to create a signup form, a login form and a forget password screen. During this presentation, the attendees will be introduced to OpenID and OAuth. They will also learn how to leverage these technologies to create more secure application. Most importantly, they will learn how to delegate authorization and authentication so they can focus on their real work and forget about all that security stuff.

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.get("/login", function(req, res) {
// GET for login
});
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.get("/login", function(req, res) {
// GET for login
});
app.post("/login", function(req, res) {
// POST for login
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

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

62. Auth Server
app.get("/login", function(req, res) {
// GET for login
var loginForm = "<form method=‘post'>
<input type=hidden name=cb value='" + req.query.callback + “'>
<input type=text name=username />
<input type=text name=password />
<input type=submit>
</form>";
res.status(200).send(loginForm);
});

63. Auth Server
app.get("/login", function(req, res) {
// GET for login
var loginForm = "<form method=‘post'>
<input type=hidden name=cb value='" + req.query.callback + “'>
<input type=text name=username />
<input type=text name=password />
<input type=submit>
</form>";
res.status(200).send(loginForm);
});

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
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);
});

66. 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);
});

67. 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);
});

68. Auth Server
// Requires ...
var users = [...];
app.use(bodyParser.urlencoded());
app.get("/login", function(req, res) {
// GET for login
});
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"));}

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
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

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

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

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

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
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);
});

77. 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);
});

78. 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);
});

79. 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"));

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

81. Live Demo
github.com/joellord/idontcare

82. Delegation!

90. Introducing OpenID Connect

91. @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

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

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

94. @joel__lord
#CPL18
Authentication Flows
Authorization Code

95. @joel__lord
#CPL18
Authentication Flows
Authorization Code

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

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

98. Delegation!

99. I Don’t Care About Security
CodePaLOUsa, March 2018
@joel__lord
joellord