From 3d4b87311d4dbe7d38f8e6d06ea1d7c8b7781c49 Mon Sep 17 00:00:00 2001 From: konarfil Date: Mon, 18 Sep 2023 16:06:26 +0200 Subject: [PATCH] Authorization code flow first proto --- src/css/style.css | 72 +++++++++++++++++++ src/favicon.ico | Bin 0 -> 83654 bytes src/index.html | 3 +- src/pages/authorization-code-flow.html | 94 ++++++++++++++++++++++++- 4 files changed, 167 insertions(+), 2 deletions(-) create mode 100644 src/favicon.ico 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 0000000000000000000000000000000000000000..db57e09c6d778d93ccf73280787da1e58fd31e53 GIT binary patch literal 83654 zcmeI5ZD<_F8OKMms9H>LY+OsXdqs9=8ix=Xhd?Q5D-(i?sVnJrWr8UU#WeIo!8n0p z0tGF0AjFiAwwRIIBmE z?epUg?NaLTJBHMO13~;ArG7Cnr1s++h>%22j_k_buIooz>(oa|0xn4Xyn|FGxFY}L=fY`L2y{psF4|q1-+$pWs1We2QLA9Oh z#nDeV(QAE~f4l_bxexb%TlH)nrsLW#jL*1xw@36KB@ zkN^pgK+6Q~yZX8G)b%fmPai&@lYaj{|4W1~Nq^tS=--*P`y1?^LtpT$Y2|-v*tuh= zsilW@PyOqTmh(@~j{-6=e6OP|URvfwVW5 zN1un?Z#HY=$j8HfDD8$h<37+xAAa8j0ta6ok+xc%;Un8HnDf)_@t8+)C6#flE|ij4 zY#`ta<6i!K_-{UJ*N*LI^VCRZ2d(1dJT$1 zJkw{~7wWL9caQbcExjOqAf=q)ZqOLFa^DI3!kg<=!`Fni;B2?_>;{WC@(A9^YvEq6 zZyU4vR8Qt?!S{%|`Xua`Z??|joIiD@jf%q>-IXElT%yk<<1|fOOX359&;Rc3YP&Hv zWBSuCp`ZBY=Jn5C-Rkd~NX?r-T&@xRt}FR0TLhq5+DH*AOR8}0TLhq5+DH*AOR8} z0TLhq5+DH*AOR8}0TLhq5+DH*AOR8}0TLhq5+DH*AOR8}0TLhq5+DH*AOR8}0TLhq z5+DH*AOR8}0TLhq5+DH*AOR8}0TLhq5+DH*AOR8}0TLhq5+DH*AOR8}0TLhq5+DH* zAOR8}0TLhq5+DH*NCtr-KP1q70)@%SJoS#s`26VR@$9zB@7s+x%5P<&GQW0XN>xbE zN>u>JDpg*5uMm)xc$ol4;zR4lOH`@3FrnbbC&M_z&mqf+Fs?;b zc3nencV#^TM|3HyXW;8v(s<4P#tAblD9^a_VF^}z$vVt1*a?!0MeU!s7Al|v6s34j zGABT&gOX>%cu<$-gZN5NurMt0LjqfszSY zb>&|jJ9G_}Xzhb@_h5~wpSLO_Wx3zN8m2E`jjlgnUA|wBV=c?5n)qvcxtDNm4%@E` z%XP30=FcD}kM*w3H_|D6WZCrBOw_N+n#$$*?wMK~3)auNx|tkVL(;U}r|Pa1FYB>k zEoyc6-=pR7xt~k|#iD~-f919|=_uI>6OPiOj{4+^qZSq_k10P#+Pi(&9>Es2cOz&3 z+1@47=G2M=NMJAtn3j7I_useBH<;>G2}^6SVqN;)>45%`t#76*{i9y#(5rl9&0E9H z9W!k76=4He3l=QifL&fOXa9FZ9ef>6Bc1v05~Z9y*=HHF4VSFT0ndZiL66-+N)RK5sKR%G&gh{aGM;Rr=`l)?b!BxU5rK zrpNnZ_M$vCw)_#hL*A;$6g>1+4P`n{eW!mhemzX*f$a@dgEE`q|~QI$MSm;AOR8}0TO6LKz!m34vH;Y zoAl*XhhaW?)c-!a%@5(m@$%m`KPTbZj+IF-oGAF=qe(l)v?SoPlpUs-HDU zWd;8~mY2bt)kl-0Uld)8Ozs=->EH6oVd)R=oN@1ra$eGo5kK?zOzyB;8%fh`ko7TV z+y_!t?rDr!T*UT%SzWq?@sN+a^o)BviSZNa@T$iEa^SDQxk?}v&qi1E# zAJSjLexbUoQpe&Ne~hBL93$*Xbv-D9H~xn)uSU9f^9U_{4(0I18N>3(ICHz>m(ldc z7_+6H!?qUY?S~uZH8zqbc7&ZisFITdADPb9p^vBkg~~khtKN8Ji#dwTz~ki_GGiZO z7Zua9?!ofBPCO8-)N39;Qy|9&8-8$MPWJI*3=Z~@r;CT6pL3RTqxoXq4!Bn_ - 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