Oauth2 and Oidc for JavaScript SPAs | via Google and GitLab

We'll explore details of oauth2 and open id protocols for JavaScript Single Page Applications (SPAs).
We'll see what problems do they solve and what is their purpose.
We'll explain different types of tokens exchanged in the protocols, access, id, refresh tokes and explore their format.
Specifically we'll go into detail about JWT JSON web token format for id tokens (and sometimes access tokens).
We'll see different flows used to request and exchange tokens, including implicit and authorization code flows and explain their shortcomings.
We'll explain how PKCS extension is solving some problems original flows.
We'll explain the role of Scopes in oauth2 and oidc and how they differ from roles and permissions.

As a practical example, we'll build Angular application that we'll host on free GitHub pages static site hosting solution.
App will enable our users to log in via Google and GitLab, manage their Gmail labels (CRUD) and fetch their detail account information.

Example app:
https://kanezi.github.io/angular-oauth2-oidc/

GitHub repository URL:
https://github.com/kanezi/angular-oauth2-oidc

00:00:00 - intro
00:00:49 - oauth2
00:04:17 - oidc
00:05:12 - oauth2 vs oidc
00:05:54 - access vs id token
00:07:44 - jwt
00:09:01 - refresh token
00:10:00 - scopes
00:12:10 - application identity
00:13:12 - public vs confidential clients
00:14:40 - front vs back channel
00:15:36 - SPA
00:16:17 - authorization code flow
00:18:06 - implicit flow
00:18:51 - pkce extension
00:20:34 - spa - xss problem
00:22:37 - bearer
00:23:18 - example app
00:25:20 - github pages hosting
00:32:27 - application registration
00:32:46 - google registration
00:36:05 - gitlab registration
00:37:05 - angular-auth-oidc-client
00:39:44 - gitlab config
00:40:59 - authority url
00:42:01 - authorization code flow vs implicit flow
00:42:41 - structure of the app
00:46:11 - authorization
00:54:14 - protocol network calls
00:56:51 - id jwt token
00:59:11 - gitlab login network calls
01:01:58 - oauth2 api requests
01:07:07 - refresh token

Тэги:

#oauth2 #oidc #authorization #javascript #authentication #spa #single_page_apps #implicit_flow #authorization_code_flow #jwt_token #jwt #access_token #id_token #scopes #bearer #google #gmail #gitlab #gihub #github_actions #github_pages #angular #gmail_labels #pkce_extension

Скачать видео