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) - Course curator of the SecAppDev course (https://secappdev.org) Pragmatic Web Security High-quality security training for developers and managers Custom courses covering web security, API security, Angular security, … Consulting services on security, OAuth 2.0, OpenID Connect, … @P HILIPPE D E R YCK @PhilippeDeRyck 2 HTTPS ://P RAGMATIC W EB S ECURITY . COM
@PhilippeDeRyck 3
@PhilippeDeRyck 4
@PhilippeDeRyck 5
3 Who that? 4 It's me, Philippe! 2 Follows the redirect to Github 1 Open Github for authentication @PhilippeDeRyck 6
3 Who that? 4 It's me, Philippe! 2 Follows the redirect to Github 1 Open Github for authentication @PhilippeDeRyck 7
3 Who that? 4 It's me, Philippe! 2 Follows the redirect to Github 1 Open Github for authentication @PhilippeDeRyck 8
3 Who that? 4 It's me, Philippe! 2 Follows the redirect to Github 1 Open Github for authentication @PhilippeDeRyck 9
3 Who that? 4 It's me, Philippe! 2 Follows the redirect to Github Redirect back to Netlify 5 with information about Philippe 1 Open Github for authentication 6 Follows redirect to Netlify 7 Github says it's Philippe. Hi Philippe! @PhilippeDeRyck 10
3 Who that? 4 It's me, Philippe! 2 Follows the redirect to Github Redirect back to Netlify 5 with information about Philippe 1 Open Github for authentication 6 Follows redirect to Netlify 7 Github says it's Philippe. Hi Philippe! @PhilippeDeRyck 11
3 Who that? 4 It's me, Philippe! 2 Follows the redirect to Github Redirect back to Netlify 5 with information about Philippe 1 Open Github for authentication 6 Follows redirect to Netlify 7 Github says it's Philippe. Hi Philippe! @PhilippeDeRyck 12
Not part of the OIDC spec 3 Who that? 4 It's me, Philippe! 2 Follows the redirect to Github Redirect back to Netlify 5 with information about Philippe OpenID Connect 1 Open Github for authentication 6 Follows redirect to Netlify 7 Github says it's Philippe. Hi Philippe! @PhilippeDeRyck 13
@PhilippeDeRyck 14
@PhilippeDeRyck 15
@PhilippeDeRyck 16
@PhilippeDeRyck 17
3 Who that? On-premise or cloud-based 4 It's me, Philippe! 2 Follows the redirect to the identity provider Redirect back 5 with information about Philippe 1 Authenticate with my provider 6 Follows redirect 7 My provider says it's Philippe. Hi Philippe! @PhilippeDeRyck 18
D ELEGATE AUTHENTICATION WITH O PEN ID C ONNECT 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 @PhilippeDeRyck 19
Obtain an authorization code User authentication Session Exchange code for identity token @PhilippeDeRyck 20
Obtain an authorization code Obtain an authorization code Session Exchange code Exchange code for identity token for identity token @PhilippeDeRyck 21
Obtain an authorization code Obtain an authorization code Call API with an OAuth 2.0 Session access token Exchange code Exchange code for identity token for identity token and access token @PhilippeDeRyck 22
Obtain an authorization code Obtain an authorization code Call API with an OAuth 2.0 Session access token Exchange code for identity token Exchange code for identity token and access token Call API with and access token an OAuth 2.0 access token @PhilippeDeRyck 23
@PhilippeDeRyck 24
R EDIRECT FROM N ETLIFY TO G ITHUB 1 2 GitHub's OIDC endpoint https://github.com/openid-connect/auth Indicates the OIDC hybrid flow ?response_type=id_token code &client_id=NetlifyClient Requests access to user's identity information &scope=openid email profile &redirect_uri=https://netlify.com/codeCallback &state=s0wzojm2w8c23xzprkk6 &nonce=Bh91lG2QLb1jAiaha372 Redirect to Github 2 for authentication 1 Sign in with Github @PhilippeDeRyck 25
5 Request client authorization 3 Authenticate yourself 4 Login credentials 6 Authorize client Redirect to Github 2 for authentication 1 Sign in with Github @PhilippeDeRyck 26
R EDIRECT FROM G ITHUB TO N ETLIFY 7 8 Approved redirect URI https://netlify.com/codeCallback Authorization code 5 ?code=q3AKQ...0X4UeQ Request client authorization JWT containing authentication information &id_token= eyJhbGciO...du6TY9w 3 Authenticate yourself &state=s0wzojm2w8c23xzprkk6 4 Login credentials 6 Authorize client Redirect to Github 2 for authentication Redirect with authorization code 7 and identity token 1 Sign in with Github 8 Authorization code and identity token @PhilippeDeRyck 27
T HE IDENTITY TOKEN CONTAINS INFORMATION ABOUT THE USER ' S AUTHENTICATION 8 { Profile information about the user "name": "Philippe De Ryck", 5 Request client authorization "email": "philippe@pragmaticwebsecurity.com", 3 Authenticate yourself "email_verified": true, The identifier of the issuer of the token "iss": "https://github.com", "aud": "NetlifyClient", The intended audience for this token 4 Login credentials "iat": "1550400912", 6 Authorize client "exp": "1550422512", The unique ID of the user within the issuer "sub": "github|bBFd87uO9PDaVpOjZRB7", } Redirect to Github 2 for authentication Redirect with authorization code 7 and identity token 1 Sign in with Github 8 Authorization code and identity token @PhilippeDeRyck 28
5 Request client authorization 3 Authenticate yourself 4 Login credentials 6 Authorize client Authorization code 9 10 access token / refresh token Redirect to Github with client credentials 2 for authentication Redirect with authorization code 7 and identity token 1 Sign in with Github 11 Github repo 8 API Authorization code 12 Data to deploy and identity token @PhilippeDeRyck 29
@PhilippeDeRyck 30
3 Authenticate yourself Frontends are no 4 Login credentials place to keep a secret. Authorization code 8 7 access token Redirect for with client credentials 2 authentication Redirect with authorization code 5 and identity token 1 Sign in 9 Github repo 6 API Authorization code 10 Data to deploy and identity token @PhilippeDeRyck 31
4 Store code challenge 10 Match code challenge to verifier 5 Authenticate yourself 6 PKCE replaces client Login credentials credentials with a "one-time password" Authorization code 11 Redirect for 9 access token with code verifier 3 authentication with code challenge Redirect with authorization code 7 and identity token 2 Sign in URL with code challenge 12 Github repo 8 API Authorization code 13 Data to deploy and identity token 1 Generate code verifier @PhilippeDeRyck 32
@PhilippeDeRyck 33
npm install angular-oauth2-oidc this.oauthService.initCodeFlow(); @PhilippeDeRyck 34
npm install @auth0/auth0-spa-js this.auth0Client$.subscribe((client: Auth0Client) => { client.loginWithRedirect() }); @PhilippeDeRyck 35
npm install keycloak-js keycloak.init({ flow: 'hybrid', promiseType: 'native', }) @PhilippeDeRyck 36
U SE 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 @PhilippeDeRyck 37
@PhilippeDeRyck 38
Authenticate with preferred provider 3 Redirect to Github 2 for authentication Redirect with authorization code 4 and identity token 1 Sign in with Github 5 Authorization code and identity token @PhilippeDeRyck 39
Users Employees Allowing employees to be normal users as well 2 Identity brokering 1 Sign in Employee-only applications A public application available to all users @PhilippeDeRyck 40
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 @PhilippeDeRyck 41
F REE REE SE SECU CURITY CH CHEAT SH SHEETS FO FOR MO MODERN APPL APPLICATIONS https://cheatsheets.pragmaticwebsecurity.com/ @PhilippeDeRyck 42
March 9 th – 13 th , 2020 Leuven, Belgium 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 A yearly initiative from the SecAppDev.org non-profit, since 2005 @PhilippeDeRyck 43
T HANK YOU ! Follow me on Twitter to stay up to date on web security best practices @PhilippeDeRyck
Recommend
More recommend
