From f2ba27ca428f6a5560148f82691fd7f0c22caaa8 Mon Sep 17 00:00:00 2001 From: konarfil Date: Mon, 25 Sep 2023 09:17:00 +0200 Subject: [PATCH] Code Flow 1 cleanup --- src/css/style.css | 11 ++++++++++- src/flow/code-1.html | 28 ++++++++++++++++------------ 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 9dd210c..2a0a410 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -193,4 +193,13 @@ pre { .centered { text-align: center; width: 100%; -} \ No newline at end of file +} + +.full-width { + width: 100%; +} + +.flow-submit-container { + margin-top: 25px; + padding: 0 10px; +} diff --git a/src/flow/code-1.html b/src/flow/code-1.html index a89a80a..bc5b1bf 100644 --- a/src/flow/code-1.html +++ b/src/flow/code-1.html @@ -4,7 +4,7 @@ - OAuth 2.0 Playground + OAuth 2.0 Playground - Authorization Code Flow (1/3) @@ -55,23 +55,24 @@
1. Build the Authorization URL
+

+ In order to initiate the Authorization Code Flow, we need to build the authorization URL + and redirect the user to the authorization server. The URL is constructed as follows: +

-
Let's break it down...
+

Let's break it down...

  • URL of the authorization endpoint on the server. How is this path constructed will - differ between OAuth providers (such as Keycloak or Okta). to - find out the proper URL, there always exists - /.well-known/openid-configuration endpoint that contains all the necessary - information. + differ between OAuth providers (such as Keycloak, Okta, etc.).

  • response_type=

    OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so - we are requesting the authorization code.

    + we are requesting the authorization code.

  • client_id=

    @@ -89,20 +90,23 @@

  • scope=

    Scopes requested by the client. Scopes are used to limit the access of the access - token. In this case, we are requesting the offline_access scope, + token. In this case, we are requesting the offline_access scope, which allows the client to obtain a refresh token.

  • state=

    -

    State parameter. This is an optional parameter that the client can use to maintain +

    State parameter. This is an optional parameter that the client can use to maintain state between the request and callback. The authorization server includes this parameter when redirecting the user back to the client, allowing the client to verify that the response is coming from the - server and not a malicious third party.

    + server and not a malicious third party (CSRF attack).

-
- All that we now need to do is click the button below and login with our credentials. + For the purposes of this + playground we already took the liberty to create user with password user for you. After your credentials are successfully verified, you will be redirected back to this playground, to the URL we have specified in the redirect_uri query parameter of the request.

+
+ Authenticate