@PhilippeDeRyck 3 @PhilippeDeRyck 4 @PhilippeDeRyck 5 3 Who - - PowerPoint PPT Presentation

▶
philippederyck
SMART_READER_LITE
LIVE PREVIEW

@PhilippeDeRyck 3 @PhilippeDeRyck 4 @PhilippeDeRyck 5 3 Who - - PowerPoint PPT Presentation

Jul 04, 2023 773 likes •1.23k views

A UTHENTICATION WITH O PEN ID C ONNECT IN A NGULAR D R . P HILIPPE D E R YCK https://Pragmatic Web Security.com D R . P HILIPPE D E R YCK - Deep understanding of the web security landscape - Google Developer Expert (not employed by Google) -

slide-1
SLIDE 1

https://Pragmatic Web Security.com

  • DR. PHILIPPE DE RYCK

AUTHENTICATION WITH OPENID CONNECT IN ANGULAR

slide-2
SLIDE 2

@PhilippeDeRyck

2

Pragmatic Web Security

High-quality security training for developers and managers

  • Deep understanding of the web security landscape
  • Google Developer Expert (not employed by Google)
  • DR. PHILIPPE DE RYCK

Custom courses covering web security, API security, Angular security, …

  • Course curator of the SecAppDev course

(https://secappdev.org) @PHILIPPEDERYCK

HTTPS://PRAGMATICWEBSECURITY.COM

Consulting services on security, OAuth 2.0, OpenID Connect, …

slide-3
SLIDE 3

@PhilippeDeRyck

3

slide-4
SLIDE 4

@PhilippeDeRyck

4

slide-5
SLIDE 5

@PhilippeDeRyck

5

slide-6
SLIDE 6

@PhilippeDeRyck

6

1

Open Github for authentication

2

Follows the redirect to Github

3

Who that?

4

It's me, Philippe!

slide-7
SLIDE 7

@PhilippeDeRyck

7

1

Open Github for authentication

2

Follows the redirect to Github

3

Who that?

4

It's me, Philippe!

slide-8
SLIDE 8

@PhilippeDeRyck

8

1

Open Github for authentication

2

Follows the redirect to Github

3

Who that?

4

It's me, Philippe!

slide-9
SLIDE 9

@PhilippeDeRyck

9

1

Open Github for authentication

2

Follows the redirect to Github

3

Who that?

4

It's me, Philippe!

slide-10
SLIDE 10

@PhilippeDeRyck

10

1

Open Github for authentication

2

Follows the redirect to Github

3

Who that?

4

It's me, Philippe!

5

Redirect back to Netlify with information about Philippe

6

Follows redirect to Netlify

7

Github says it's Philippe. Hi Philippe!

slide-11
SLIDE 11

@PhilippeDeRyck

11

1

Open Github for authentication

2

Follows the redirect to Github

3

Who that?

4

It's me, Philippe!

5

Redirect back to Netlify with information about Philippe

6

Follows redirect to Netlify

7

Github says it's Philippe. Hi Philippe!

slide-12
SLIDE 12

@PhilippeDeRyck

12

1

Open Github for authentication

2

Follows the redirect to Github

3

Who that?

4

It's me, Philippe!

5

Redirect back to Netlify with information about Philippe

6

Follows redirect to Netlify

7

Github says it's Philippe. Hi Philippe!

slide-13
SLIDE 13

@PhilippeDeRyck

13

1

Open Github for authentication

2

Follows the redirect to Github

3

Who that?

4

It's me, Philippe!

5

Redirect back to Netlify with information about Philippe

6

Follows redirect to Netlify

7

Github says it's Philippe. Hi Philippe!

OpenID Connect Not part of the OIDC spec

slide-14
SLIDE 14

@PhilippeDeRyck

14

slide-15
SLIDE 15

@PhilippeDeRyck

15

slide-16
SLIDE 16

@PhilippeDeRyck

16

slide-17
SLIDE 17

@PhilippeDeRyck

17

slide-18
SLIDE 18

@PhilippeDeRyck

18

1

Authenticate with my provider

2

Follows the redirect to the identity provider

3

Who that?

4

It's me, Philippe!

5

Redirect back with information about Philippe

6

Follows redirect

7

My provider says it's Philippe. Hi Philippe!

On-premise or cloud-based

slide-19
SLIDE 19

@PhilippeDeRyck

19

DELEGATE AUTHENTICATION WITH OPENID CONNECT

Building a secure custom authentication mechanism is hard Identity providers are specialized in managing & authenticating users Offloading authentication makes sense, even in a non-SSO scenario

slide-20
SLIDE 20

@PhilippeDeRyck

20

User authentication Exchange code for identity token Obtain an authorization code Session

slide-21
SLIDE 21

@PhilippeDeRyck

21

Exchange code for identity token Exchange code for identity token Obtain an authorization code Obtain an authorization code Session

slide-22
SLIDE 22

@PhilippeDeRyck

22

Exchange code for identity token Exchange code for identity token and access token Obtain an authorization code Call API with an OAuth 2.0 access token Obtain an authorization code Session

slide-23
SLIDE 23

@PhilippeDeRyck

23

Exchange code for identity token and access token Exchange code for identity token and access token Obtain an authorization code Call API with an OAuth 2.0 access token Call API with an OAuth 2.0 access token Obtain an authorization code Session

slide-24
SLIDE 24

@PhilippeDeRyck

24

slide-25
SLIDE 25

@PhilippeDeRyck

25

1

Sign in with Github

2

Redirect to Github for authentication

REDIRECT FROM NETLIFY TO GITHUB

https://github.com/openid-connect/auth ?response_type=id_token code &client_id=NetlifyClient &scope=openid email profile &redirect_uri=https://netlify.com/codeCallback &state=s0wzojm2w8c23xzprkk6 &nonce=Bh91lG2QLb1jAiaha372

2 1 Indicates the OIDC hybrid flow GitHub's OIDC endpoint Requests access to user's identity information

slide-26
SLIDE 26

@PhilippeDeRyck

26

1

Sign in with Github

2

Redirect to Github for authentication

3

Authenticate yourself

4

Login credentials

5

Request client authorization

6

Authorize client

slide-27
SLIDE 27

@PhilippeDeRyck

27

1

Sign in with Github

2

Redirect to Github for authentication

3

Authenticate yourself

4

Login credentials

8

Authorization code and identity token

7

Redirect with authorization code and identity token

5

Request client authorization

6

Authorize client

REDIRECT FROM GITHUB TO NETLIFY

https://netlify.com/codeCallback ?code=q3AKQ...0X4UeQ &id_token=eyJhbGciO...du6TY9w &state=s0wzojm2w8c23xzprkk6

8 7 Authorization code Approved redirect URI JWT containing authentication information

slide-28
SLIDE 28

@PhilippeDeRyck

28

1

Sign in with Github

2

Redirect to Github for authentication

3

Authenticate yourself

4

Login credentials

8

Authorization code and identity token

7

Redirect with authorization code and identity token

5

Request client authorization

6

Authorize client

THE IDENTITY TOKEN CONTAINS INFORMATION ABOUT THE USER'S AUTHENTICATION

{ "name": "Philippe De Ryck", "email": "philippe@pragmaticwebsecurity.com", "email_verified": true, "iss": "https://github.com", "aud": "NetlifyClient", "iat": "1550400912", "exp": "1550422512", "sub": "github|bBFd87uO9PDaVpOjZRB7", }

8 Profile information about the user The identifier of the issuer of the token The intended audience for this token The unique ID of the user within the issuer

slide-29
SLIDE 29

@PhilippeDeRyck

29

1

Sign in with Github

2

Redirect to Github for authentication

3

Authenticate yourself

4

Login credentials

8

Authorization code and identity token

7

Redirect with authorization code and identity token

10

access token / refresh token

9

Authorization code with client credentials

11

Github repo

12

Data to deploy

5

Request client authorization

6

Authorize client

API

slide-30
SLIDE 30

@PhilippeDeRyck

30

slide-31
SLIDE 31

@PhilippeDeRyck

31

1

Sign in

2

Redirect for authentication

3

Authenticate yourself

4

Login credentials

6

Authorization code and identity token

5

Redirect with authorization code and identity token

8

access token

7

Authorization code with client credentials

9

Github repo

10

Data to deploy

API Frontends are no place to keep a secret.

slide-32
SLIDE 32

@PhilippeDeRyck

32

2

Sign in URL with code challenge

3

Redirect for authentication with code challenge

5

Authenticate yourself

6

Login credentials

8

Authorization code and identity token

7

Redirect with authorization code and identity token

11

access token

9

Authorization code with code verifier

12

Github repo

13

Data to deploy

API

1

Generate code verifier

4

Store code challenge

10 Match code challenge to verifier

PKCE replaces client credentials with a "one-time password"

slide-33
SLIDE 33

@PhilippeDeRyck

33

slide-34
SLIDE 34

@PhilippeDeRyck

34

this.oauthService.initCodeFlow();

npm install angular-oauth2-oidc

slide-35
SLIDE 35

@PhilippeDeRyck

35

this.auth0Client$.subscribe((client: Auth0Client) => { client.loginWithRedirect() });

npm install @auth0/auth0-spa-js

slide-36
SLIDE 36

@PhilippeDeRyck

36

keycloak.init({ flow: 'hybrid', promiseType: 'native', })

npm install keycloak-js

slide-37
SLIDE 37

@PhilippeDeRyck

37

USE THE RIGHT OIDC FLOW FOR YOUR APPLICATION

Both a backend and a frontend can use the OIDC hybrid flow Backends require client authentication & frontends require PKCE OIDC is typically used along with OAuth 2.0 to enable API access

slide-38
SLIDE 38

@PhilippeDeRyck

38

slide-39
SLIDE 39

@PhilippeDeRyck

39

1

Sign in with Github

2

Redirect to Github for authentication

5

Authorization code and identity token

4

Redirect with authorization code and identity token

3

Authenticate with preferred provider

slide-40
SLIDE 40

@PhilippeDeRyck

40

2

Identity brokering

1

Sign in

Employees Users

A public application available to all users Employee-only applications Allowing employees to be normal users as well

slide-41
SLIDE 41

@PhilippeDeRyck

41

OIDC IS MORE THAN AUTHENTICATION ALONE

OIDC also includes support for session management and logout Identity brokering enables the chaining of multiple identity providers Identity brokering is a crucial concept in enterprise architectures

slide-42
SLIDE 42

@PhilippeDeRyck

42

https://cheatsheets.pragmaticwebsecurity.com/

FREE

REE SE SECU CURITY CH CHEAT SH SHEETS FO FOR MO MODERN APPL APPLICATIONS

slide-43
SLIDE 43

@PhilippeDeRyck

43

March 9th – 13th, 2020 Leuven, Belgium

A yearly initiative from the SecAppDev.org non-profit, since 2005

A week-long course on Secure Application Development Taught by experts from around the world 38 in-depth lectures and 3 one-day workshops https://secappdev.org

slide-44
SLIDE 44

@PhilippeDeRyck

THANK YOU!

Follow me on Twitter to stay up to date

  • n web security best practices