diff --git a/src/css/style.css b/src/css/style.css index 0aa92c5..14f4411 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -86,4 +86,76 @@ body { .btn-small:not(.disabled):hover { background-color: #FF6600; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.circle-container { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 70%; + margin: 0 auto; + margin-top: 40px; +} + +.circle { + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background-color: #FF6600; + color: white; + font-weight: bold; + margin: 0; + /* Adjust the margin to reduce the gap */ + position: relative; + /* Added for z-index to work */ + z-index: 1; + /* Ensures the circle is on top of the line */ +} + +.circle-inactive { + background-color: #333333; +} + +.line { + height: 2px; + background-color: #FF6600; + flex: 1; + position: relative; +} + +.line-inactive { + background-color: #333333; +} + +.circle-text { + text-align: center; + margin-top: 10px; +} + +.code-block { + background-color: #f4f4f4; + /* light grey background */ + border-radius: 5px; + /* rounded corners */ + padding: 20px; + /* space inside the block */ + overflow-x: auto; + /* allow horizontal scrolling if code is too wide */ +} + +.code-block code { + color: #333; + /* dark text color for code */ + font-family: "Courier New", Courier, monospace; + /* monospace font */ + white-space: pre; + /* keep whitespace as is */ +} + +.emphasis { + color: #FF6600; } \ No newline at end of file diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 0000000..db57e09 Binary files /dev/null and b/src/favicon.ico differ diff --git a/src/index.html b/src/index.html index b24f1d4..e741c48 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,8 @@ - OAuth Playground + OAuth 2.0 Playground + diff --git a/src/pages/authorization-code-flow.html b/src/pages/authorization-code-flow.html index d488b3c..e718e6e 100644 --- a/src/pages/authorization-code-flow.html +++ b/src/pages/authorization-code-flow.html @@ -1 +1,93 @@ -Authorization Code flow \ No newline at end of file +
+
+

Authorization Code Flow

+
+ +
+ 1 +
+ +
+ +
+ 2 +
+ +
+ +
+ 3 +
+
+ + +
+
+ Build the authorization URL and redirect the user to the authorization server +
+
+ After the user is redirected back to the client, verify the state matches +
+
+ Exchange the authorization code for an access token +
+
+
+
+
+
+
+
+
1. Build the Authorization URL
+ + 
https://sso.rumbuddy.cz/realms/OAuthPlayground/protocol/openid-connect/auth?
+    response_type=code
+    &client_id=oauth-playground
+    &redirect_uri=http://localhost:5555/
+    &scope=offline_access
+    &state=9igSQpeGo2ua52bU
+
+
Let's break it down, line by line...
+
    +
  • +

    https://sso.rumbuddy.cz/realms/OAuthPlayground/protocol/openid-connect/auth?

    +

    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. +

    +
    • +
  • +

    response_type=code

    +

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

    +
    • +
  • +

    client_id=oauth-playground

    +

    Client ID of the application. This is a public identifier for the client, and it is used by the authorization server to identify the application + when redirecting the user back to the client.

    +
    • +
  • +

    redirect_uri=http://localhost:5555/

    +

    Redirect URI of the client. This is the URL that the authorization server will redirect the user back to after the user has logged in and + granted permissions. The redirect URI must match one of the URIs registered for the client ID.

    +
    • +
  • +

    scope=offline_access

    +

    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, + which allows the client to obtain a refresh token.

    +
    • +
  • +

    state=9igSQpeGo2ua52bU

    +

    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.

    +
    • +
+
+ Send request +
+
+
+
+
+
+
\ No newline at end of file