<\/div>\n

Merhaba,
\n

Ba\u015fl\u0131klar<\/p>\nToggle<\/span>

Browser Flow Authentication Nedir?<\/a>
- Single Sign-On (SSO) nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/a><\/li>
- SSO’nun avantajlar\u0131 ve dezavantajlar\u0131 nelerdir?<\/a><\/li><\/ul><\/li>
- Browser Flow \u0130\u00e7 Yap\u0131s\u0131<\/a><\/li>
- 6 Kritik Soru \/ 6 Kritik Cevap<\/a><\/li>
- Asp.NET Core | Keycloak | Browser Flow \u00d6rnek Uygulama<\/a><\/li>
- Login Ekran\u0131n\u0131 \u00d6zelle\u015ftirme<\/a><\/li>
- SPA (Angular) + Asp.NET Core Web API + Keycloak Browser Flow (OTP Dahil)<\/a><\/li>
- Browser Flow’da En \u00c7ok Yap\u0131lan Hatalar<\/a><\/li><\/ul><\/nav><\/div>\n
  \nBu i\u00e7eri\u011fimizde Asp.NET Core ile birlikte Keycloak’da Browser Flow Authentication<\/em> konusunu hem teorik hem de pratik bir \u015fekilde netle\u015ftirebilece\u011fimiz bir incelemede bulunuyor olaca\u011f\u0131z.<\/p>\n
  <\/span>Browser Flow Authentication Nedir?<\/span><\/h4>\n
  Browser Flow, Keycloak’un taray\u0131c\u0131 tabanl\u0131 (interactive) kimlik do\u011frulama senaryolar\u0131 i\u00e7in kulland\u0131\u011f\u0131 authentication flow t\u00fcr\u00fcd\u00fcr. Normalde bir web sitesine girildi\u011finde g\u00f6r\u00fclen login ekran\u0131, MFA ekran\u0131, hat\u0131rlatma cookie’si kontrol\u00fc vs. hepsi bu flow i\u00e7erisinde tan\u0131mlanmaktad\u0131r.<\/p>\n
  Browser flow mant\u0131\u011f\u0131nda, uygulamalar kendi login ekranlar\u0131n\u0131 tasarlamamakta, oturum a\u00e7\u0131lmas\u0131 gerekti\u011fi taktirde uygulamalar kullan\u0131c\u0131lar\u0131 Keycloak’un login sayfas\u0131na y\u00f6nlendirerek gerekli oturum a\u00e7ma i\u015flemlerini orada sa\u011flamaktad\u0131r. B\u00f6ylece kullan\u0131c\u0131 \u015fifreleri, OTP de\u011ferleri vs. gibi kritik veriler client’lar taraf\u0131ndan eri\u015filemeyecek ve yaln\u0131zca Keycloak’un kendi ekran\u0131nda i\u015flenecektir. Bunlar\u0131n yan\u0131nda brute-force korumas\u0131 da sa\u011flanm\u0131\u015f olacakt\u0131r. B\u00f6ylece yap\u0131sal olarak merkezi bir do\u011frulama sistemi kurgulanm\u0131\u015f, g\u00fcvenlik a\u00e7\u0131s\u0131ndan da g\u00fc\u00e7lendirici hamleler sa\u011flanm\u0131\u015f olacakt\u0131r ve bir yandan da uygulamalardan da b\u00fcy\u00fck bir sorumluluk k\u00fclfeti kald\u0131r\u0131lm\u0131\u015f olacakt\u0131r.<\/p>\n
  Ayr\u0131ca browser flow authentication sayesinde, Tek Oturum A\u00e7ma<\/em> (veya \u00c7oklu Oturum A\u00e7ma<\/em>) olarak bilinen Single Sign-On (SSO)<\/strong><\/em> do\u011frulama y\u00f6ntemi de otomatik sa\u011flanm\u0131\u015f olacakt\u0131r. Single Sign-On ile ayn\u0131 e-Devlet, Google yahut kurumsal ortamlarda oldu\u011fu gibi davran\u0131\u015f sergilenecek ve nas\u0131l ki bu ortamlarda oturum a\u00e7\u0131ld\u0131\u011f\u0131 taktirde, bunlarla ili\u015fkili (yani bunlarla merkezi kimlik kontrol\u00fc sa\u011flayan) di\u011fer sistemlere giri\u015f yap\u0131ld\u0131\u011f\u0131nda o oturum otomatik tan\u0131nacak ve do\u011frulanm\u0131\u015f olacakt\u0131r.<\/p>\n
  <\/span>Single Sign-On (SSO) nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/em><\/span><\/h5>\n
  1. \u015eifre sormadan kullan\u0131c\u0131 do\u011frulanacak ve y uygulamas\u0131na da otomatik giri\u015f yap\u0131lm\u0131\u015f olacakt\u0131r.<\/li>\n<\/ol>\n
    <\/span>SSO’nun avantajlar\u0131 ve dezavantajlar\u0131 nelerdir?<\/em><\/span><\/h5>\n
    Browser flow’un SSO davran\u0131\u015f\u0131 sayesinde birden fazla uygulama i\u00e7in kullan\u0131c\u0131 konforu olduk\u00e7a y\u00fckseltilmi\u015f olacakt\u0131r. Neden mi?<\/em> \u00c7\u00fcnk\u00fc ne kadar uygulama o kadar \u015fifre y\u00f6netimi ve haf\u0131zas\u0131 gerektirecektir. Ki illaki bu \u015fifreler unutulacakt\u0131r… Ee bu da \u015fifre yorgunlu\u011fu<\/em> anlam\u0131na gelen password fatigue<\/u> durumuna sebebiyet verecektir (Malumunuz \u00f6zellikle bankalar\u0131n sa\u00e7ma \u015fifre politikalar\u0131ndan dolay\u0131 ikrah etmi\u015f vaziyetteyiz)<\/span> Merkezi kimlik do\u011frulay\u0131c\u0131s\u0131ndan tek kullan\u0131c\u0131 ad\u0131 ve \u015fifre ile yap\u0131lan giri\u015flerin birden fazla uygulamay\u0131 kapsamas\u0131 olduk\u00e7a de\u011ferli bir konfor sa\u011flayacakt\u0131r. Ancak bu durumun getirisi oldu\u011fu kadar ciddi g\u00f6t\u00fcr\u00fcs\u00fc olabilecek bir riski de mevcuttur. O da; t\u00fcm sistemlere eri\u015fim ihtimalinin, o tek hesab\u0131n ele ge\u00e7irilmesine indirgenerek olas\u0131 riskin olduk\u00e7a artmas\u0131d\u0131r.<\/p>\n
    <\/span>Browser Flow \u0130\u00e7 Yap\u0131s\u0131<\/span><\/h4>\n
    \u015eimdi bizler i\u00e7in olduk\u00e7a \u00f6nemli olan browser flow i\u00e7 yap\u0131s\u0131n\u0131 de\u011ferlendirmeye ba\u015flayal\u0131m. Tabi bunu Keycloak inceleme serimizin 5. i\u00e7eri\u011fi olan Keycloak\u2019da Authentication, Identity, Identity Provider \u0130le Birlikte Authentication Flow\u2019lar\u0131 Teorik Olarak \u0130nceleyelim<\/a> ba\u015fl\u0131kl\u0131 makalemizin “Browser Authentication Flow’u Execution’lar\u0131na B\u00f6lelim”<\/em> ba\u015fl\u0131kl\u0131 b\u00f6l\u00fcm\u00fcnde (ki linke t\u0131kland\u0131\u011f\u0131nda direkt ilgili ba\u015fl\u0131\u011fa gidecektir)<\/span> detayl\u0131ca teorik olarak inceledi\u011fimizi hat\u0131rlatmak isterim. Bundan kaynakl\u0131 ilgili ak\u0131\u015ftaki execution’lar\u0131 bir daha tek tek a\u00e7\u0131klama gere\u011fi g\u00f6rmemekteyim.<\/p>\n
    Peki biz ne yapaca\u011f\u0131z?<\/em> diye sorarsan\u0131z, Keycloak’dan s\u00fcreci inceleyip bu ba\u015fl\u0131\u011f\u0131 biraz h\u0131zl\u0131 ge\u00e7ece\u011fiz. \u015eimdi bunun i\u00e7in; $\"Keycloak$ <\/a>Keycloak \u00fczerinden Authentication sekmesine gelip, browser<\/code> flow’a t\u0131klayal\u0131m ve ard\u0131ndan a\u00e7\u0131lan sayfada ak\u0131\u015fla ilgili t\u00fcm s\u00fcreci\/ad\u0131mlar\u0131 g\u00f6zlemleyelim.
    <\/a>Keycloak’da Browser Flow Authentication ad\u0131mlar\u0131…<\/p><\/div><\/p>\n<\/span>6 Kritik Soru \/ 6 Kritik Cevap<\/span><\/h4>\n\u015eimdi browser flow ile ilgili kritikleri soru cevap format\u0131nda ilerleyerek yapal\u0131m. B\u00f6ylece hem daha verimli bir yakla\u015f\u0131m sergilemi\u015f hem de ak\u0131llarda olabilecek sorular\u0131n cevaplar\u0131n\u0131 da pe\u015finen vermi\u015f olaca\u011f\u0131z…<\/p>\n\nSoru 1 | Browser flow ne zaman tetiklenir?<\/span><\/summary>\nTaray\u0131c\u0131dan gelen, redirect tabanl\u0131 ve etkile\u015fim gerektiren OIDC isteklerinde. \n<\/details>\n\nSoru 2 | Browser flow ba\u015far\u0131s\u0131z olursa ne olur?<\/span><\/summary>\nKeycloak authorization code \u00fcretmez ve uygulamada da kullan\u0131c\u0131 authenticate edilemez! \n<\/details>\n\nSoru 3 | Browser flow token \u00fcretir mi?<\/span><\/summary>\nHay\u0131r. \u00c7\u00fcnk\u00fc, token \u00fcretimi flow’dan ayr\u0131 bir i\u015ftir! Flow, kimlik do\u011frulama s\u00fcrecidir ve bu s\u00fcre\u00e7 ba\u015far\u0131l\u0131ysa e\u011fer token \u00fcretilir. Yani browser flow’dan ba\u011f\u0131ms\u0131z olarak hangi ak\u0131\u015f olursa olsun dolayl\u0131 olarak evet, token \u00fcretimini flow tetikleyebilir. \n<\/details>\n\nSoru 4 | Ayn\u0131 realm’de farkl\u0131 browser flow kullan\u0131labilir mi?<\/span><\/summary>\nClient bazl\u0131 authentication flow override y\u00f6ntemi ile evet. \n<\/details>\n \nSoru 5 | Cookie authenticator neden \u00f6nemlidir?<\/span><\/summary>\nHer iste\u011fin login ekran\u0131na gitmemesi i\u00e7in Single Sign-On (SSO) sa\u011flar. \n<\/details>\n \nSoru 6 | SPA’lar i\u00e7in browser flow tavsiye ediliyor mu?<\/span><\/summary>\nEvet, hatta tek do\u011fru yol olarak. \n<\/details>\n <\/span>Asp.NET Core | Keycloak | Browser Flow \u00d6rnek Uygulama<\/span><\/h4>\n\u015eimdi Keycloak’daki browser flow’u Asp.NET Core MVC ile g\u00fczel bir \u015fekilde \u00f6rnek \u00fczerinden ele almaya ba\u015flayabiliriz. Bunun i\u00e7in bir Asp.NET Core MVC uygulamas\u0131 olu\u015ftural\u0131m ve i\u00e7erisine a\u015fa\u011f\u0131daki k\u00fct\u00fcphaneyi y\u00fckleyelim.<\/p>\n \n Gerekli K\u00fct\u00fcphaneler<\/strong> \nMicrosoft.AspNetCore.Authentication.OpenIdConnect<\/a>\n<\/div>\nBu paket, Asp.NET Core’un Keycloak (yahut ba\u015fka bir Identity Provider)<\/span> ile OpenID Connect (OIDC)<\/em> \u00fczerinden konu\u015fabilmesine yaramaktad\u0131r. Yani birazdan s\u00fcre\u00e7te g\u00f6rece\u011fimiz \u00fczere; taray\u0131c\u0131y\u0131 Keycloak’a y\u00f6nlendiren, authorization code<\/code> edinen ve token endpoint’ine gidip token’\u0131 \u00e7eken esas\u0131nda bu k\u00fct\u00fcphanenin sa\u011flad\u0131\u011f\u0131 i\u015flevsellikler olacakt\u0131r.<\/p>\n Hoca ekstradan paket kullanmadan i\u015f y\u00fcr\u00fctemez miyiz?<\/em> \nHay\u0131r, y\u00fcr\u00fctemezsiniz. Bu paket olmaks\u0131z\u0131n browser flow’u ba\u015flatamaz, authorization code’u alamaz, token endpoint’ten token edinemez ve external login yapamazs\u0131n\u0131z.<\/p>\n \u015eimdi i\u015fin mant\u0131\u011f\u0131n\u0131 kavrayak ilerleyelim ve bu \u00e7er\u00e7evede yap\u0131land\u0131rmalar\u0131 ad\u0131m ad\u0131m ger\u00e7ekle\u015ftirelim.<\/p>\nTabi ilk olarak olu\u015fturdu\u011fumuz uygulamay\u0131 Keycloak’ta temsil edecek olan client’\u0131 tasarlayal\u0131m…<\/a>Dikkat ederseniz, application-client<\/em> ad\u0131n\u0131 vermi\u015f oldu\u011fumuz bir confidential client olu\u015fturmu\u015f bulunuyoruz. Bu client’\u0131n browser flow’u destekleyebilmesi i\u00e7in \u00f6zellikle Standard flow<\/em>‘un i\u015faretlenmesi ve ekran al\u0131nt\u0131s\u0131nda vurgulanm\u0131\u015f olan url’lerin do\u011fru bir \u015fekilde girilmesi gerekmektedir.<\/p>\n Ard\u0131ndan uygulaman\u0131n Program.cs<\/em> dosyas\u0131nda a\u015fa\u011f\u0131daki yap\u0131land\u0131rmay\u0131 sa\u011flayal\u0131m:<\/p>\n \n\r\nbuilder.Services.AddAuthentication(options =>\r\n {\r\n \/\/Varsay\u0131lan kimlik do\u011frulama \u015femas\u0131 olarak Cookie tabanl\u0131 kimlik do\u011frulama kullan\u0131lmaktad\u0131r.\r\n \/\/Yani kullan\u0131c\u0131 oturum bilgileri cookie'de saklan\u0131r.\r\n options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;\r\n \/\/Kullan\u0131c\u0131, yetkisiz olarak kimlik do\u011frulama gerektiren bir sayfaya eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131nda\r\n \/\/OpenID Connect protokol\u00fc kullan\u0131larak kimlik do\u011frulama i\u015flemi ba\u015flat\u0131l\u0131r ve Keycloak'a y\u00f6nlendirme sa\u011flan\u0131r.\r\n options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;\r\n })\r\n .AddCookie(options =>\r\n {\r\n \/\/Kullan\u0131c\u0131 giri\u015f yapmad\u0131\u011f\u0131nda y\u00f6nlendirilece\u011fi sayfa.\r\n options.LoginPath = "\/login";\r\n \/\/Kullan\u0131c\u0131 \u00e7\u0131k\u0131\u015f yapt\u0131\u011f\u0131nda y\u00f6nlendirilece\u011fi sayfa.\r\n options.LogoutPath = "\/logout";\r\n })\r\n \/\/OpenID Connect protokol\u00fc kullan\u0131larak Keycloak ile entegrasyon sa\u011flan\u0131lmaktad\u0131r.\r\n .AddOpenIdConnect(options =>\r\n {\r\n options.Authority = "http:\/\/127.0.0.1:8080\/realms\/master";\r\n options.ClientId = "application-client";\r\n options.ClientSecret = "xgVgEbqi5jxpZ0QvQDSVQMIlmsw2gbZv";\r\n options.ResponseType = "code";\r\n\r\n options.SaveTokens = true;\r\n options.GetClaimsFromUserInfoEndpoint = true;\r\n options.RequireHttpsMetadata = false;\r\n\r\n options.Scope.Clear();\r\n options.Scope.Add("openid");\r\n options.Scope.Add("profile");\r\n options.Scope.Add("email");\r\n\r\n options.CallbackPath = "\/signin-oidc";\r\n\r\n options.TokenValidationParameters = new()\r\n {\r\n NameClaimType = "preferred_username",\r\n RoleClaimType = "roles"\r\n };\r\n });\r\n<\/pre>\n<\/div>\nBurada yap\u0131lan \u00e7al\u0131\u015fmay\u0131 izah etmemiz gerekirse e\u011fer;<\/p>\n\n5 – 8. sat\u0131r aral\u0131\u011f\u0131;<\/strong> Burada Asp.NET Core’un bu request s\u00fcrecinde hangi authentication mekanizmas\u0131n\u0131 kullanaca\u011f\u0131n\u0131 ifade ediyoruz. Dikkat ederseniz, iki yap\u0131land\u0131rma da farkl\u0131 zamanlarda, farkl\u0131 ama\u00e7larla kullan\u0131lmaktad\u0131rlar. \n1\ufe0f\u20e3DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme<\/code> \nBu \u015fema yap\u0131land\u0131rmas\u0131, gelen request’te kullan\u0131c\u0131 authenticate mi diye kontrol edilecekse nereden edilece\u011fini belirtmektedir. Cookie’den \ud83d\ude42<\/p>\n\n Challenge nedir?<\/em><\/strong> Challenge, kimlik do\u011frulama s\u00fcrecinde -kullan\u0131c\u0131 do\u011frulanmam\u0131\u015f, \u015fimdi onu login olmaya y\u00f6nlendiriyorum-<\/em> anlam\u0131na gelen bir mekanizmad\u0131r. Asp.NET Core mimarisi, bir kullan\u0131c\u0131 herhangi bir korumal\u0131 kayna\u011fa sistemde onun kimli\u011fini do\u011frulayacak ge\u00e7erli bir bilgi (cookie veya token) olmadan eri\u015fmeye \u00e7al\u0131\u015f\u0131rsa, bu iste\u011fi reddetmek yerine Challenge’\u0131 tetikler ve \u00f6nceden tan\u0131mlanm\u0131\u015f Challenge Scheme<\/em> \u00fczerinden login s\u00fcrecini ba\u015flat\u0131r. SPA’larda da Challenge mant\u0131\u011f\u0131 mevcuttur.\n<\/div>\nNe zaman devreye girer?<\/em> \n[Authorize]<\/code> attribute’u \u00e7al\u0131\u015ft\u0131\u011f\u0131nda ve HttpContext.User<\/code> doldurulurken…<\/p>\n 2\ufe0f\u20e3DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme<\/code><\/p>\n Bu \u015fema yap\u0131land\u0131rmas\u0131 ise kullan\u0131c\u0131n\u0131n authenticate olmad\u0131\u011f\u0131 durumda, onu nas\u0131l login’e y\u00f6nlendirece\u011finin cevab\u0131n\u0131 verir. Burada verilen cevap ‘OpenIdConnect<\/em>‘ \u015feklindedir.<\/p>\n Ne zaman devreye girer?<\/em> \n[Authorize]<\/code> attribute’u \u00e7al\u0131\u015ft\u0131\u011f\u0131nda ve kullan\u0131c\u0131n\u0131n authenticated olmad\u0131\u011f\u0131 anla\u015f\u0131l\u0131nca.<\/p>\n Bu yap\u0131land\u0131rma sayesinde Asp.NET Core kullan\u0131c\u0131y\u0131 Keycloak login’e y\u00f6nlendirecektir. Bu faaliyete Challenge<\/em><\/strong> denmektedir! <\/p>\n\n Authorization Code nedir?<\/em><\/strong> Authorization Code, -kullan\u0131c\u0131n\u0131n ba\u015far\u0131yla kimli\u011fi do\u011fruland\u0131- bilgisini temsil eden k\u0131sa \u00f6m\u00fcrl\u00fc, tek kullan\u0131ml\u0131, ge\u00e7ici bir koddur.<\/p>\nBizler; kullan\u0131c\u0131 yetkisini ifade eden ger\u00e7ek token’\u0131 taray\u0131c\u0131ya vermek veya url’de ta\u015f\u0131mak istemedi\u011fimiz i\u00e7in token yerine de\u011fersiz ve bir anlam\u0131 olmayan Authorization Code’u kullan\u0131yoruz. Bundan kaynakl\u0131 Authorization Code; \n\u2192Token de\u011fildir! \n\u2192Yetki vermemektedir! \n\u2192API \u00e7a\u011fr\u0131s\u0131nda kullan\u0131lmamaktad\u0131r!<\/span> \nYaln\u0131zca token almak i\u00e7in kullan\u0131lan \u00f6zel bir koddur. Bu kod ile uygulama, arka planda Keycloak’dan ger\u00e7ek token’\u0131 elde edebilmektedir.\n<\/div>\nChallenge, Asp.NET Core’un \u015funu demesidir; \u015fimdi bu kullan\u0131c\u0131y\u0131 do\u011frulanabilece\u011fi bir yere y\u00f6nlendiriyorum…<\/em><\/p><\/blockquote>\n<\/li>\n23. sat\u0131r;<\/strong> options.ResponseType = \"code\"<\/code> Bu yap\u0131land\u0131rmayla login’in ba\u015far\u0131l\u0131 olmas\u0131 durumunda Keycloak’un bize ne d\u00f6nd\u00fcrece\u011fini yap\u0131land\u0131rm\u0131\u015f oluyoruz.\ncode<\/code> diyerek Authorization Code Flow<\/em>‘u ifade etmi\u015f oluyoruz.<\/p>\ncode, bir token talebi de\u011fil, token’a giden g\u00fcvenli biletin(authorization code) ta kendisidir!<\/em><\/p><\/blockquote>\n<\/li>\n 25. sat\u0131r;<\/strong>options.SaveTokens = true<\/code> OIDC ile al\u0131nan token’lar\u0131n (access, id, refresh) Asp.NET Core authentication ticket’\u0131na kaydedilmesini sa\u011flar. Yani, normal \u015fartlarda token al\u0131nd\u0131\u011f\u0131 taktirde herhangi bir yerde saklanmamaktad\u0131r. Ancak SaveTokens = true<\/code> dendi\u011finde token’lar, o anki login i\u015flemiyle ilgili ek bilgileri bar\u0131nd\u0131ran AuthenticationProperties<\/code> i\u00e7erisine eklenecektir ve Cookie’ye \u015fifreli \u015fekilde g\u00f6m\u00fclecektir. B\u00f6ylece bizler request s\u00fcrecinde istedi\u011fimiz noktada HttpContext.GetTokenAsync(\"access_token\")<\/code> \u015feklinde token’a eri\u015fim g\u00f6sterebiliyor olaca\u011f\u0131z. \nSaveTokens = true<\/code>, -ald\u0131\u011f\u0131m token’lar\u0131 sakla ki sonra kullanabileyim- demektir.<\/em><\/p><\/blockquote>\n Burada AuthenticationProperties<\/code>‘i claim’ler yahut User.Identity<\/code> ile kar\u0131\u015ft\u0131rmamak laz\u0131md\u0131r. Bu, sadece authentication ticket’\u0131n bir par\u00e7as\u0131d\u0131r…\n<\/li>\n 26. sat\u0131r;<\/strong>options.GetClaimsFromUserInfoEndpoint = true<\/code> Bu, kullan\u0131c\u0131 oturumu ba\u015far\u0131yla a\u00e7t\u0131ktan yani do\u011fruland\u0131ktan sonra Asp.NET Core uygulamas\u0131na Keycloak’un \/userinfo endpoint’ine ekstra bir \u00e7a\u011fr\u0131 yapmas\u0131n\u0131 ve kullan\u0131c\u0131 bilgilerini oradan almas\u0131n\u0131 s\u00f6yleyen bir yap\u0131land\u0131rmad\u0131r.<\/li>\n 29 – 32. sat\u0131r aral\u0131\u011f\u0131;<\/strong> Login olurken belirtilen kapsamlar (scopes) dahilinde bilgi istendi\u011fi ifade edilmektedir. Normalde, varsay\u0131lan olarak AddOpenIdConnect<\/code> yap\u0131land\u0131rmas\u0131nda openid<\/code> ve profile<\/code> scope’lar\u0131 otomatik eklenmektedir.<\/li>\n 34. sat\u0131r;<\/strong>options.CallbackPath = \"\/signin-oidc\"<\/code> Keycloak’un login bitti\u011fi taktirde taray\u0131c\u0131y\u0131 geri d\u00f6nd\u00fcrece\u011fi callback adresini ifade etmektedir. Bu adres \u00fczerinden \u00fcretilen token e\u015fli\u011finde kullan\u0131c\u0131 uygulamaya geri d\u00f6nd\u00fcr\u00fclm\u00fc\u015f olur.<\/li>\n<\/ul>\nEvet, olmas\u0131 gereken altyap\u0131y\u0131 art\u0131k yap\u0131land\u0131rd\u0131\u011f\u0131m\u0131z\u0131 s\u00f6yleyebilirim. Bundan sonras\u0131 hafif ince i\u015f\u00e7ilik. Haliyle gelin \u015fimdi login ve logout action’lar\u0131n\u0131 halledelim:<\/p>\n \n\r\n public class AccountController : Controller\r\n {\r\n [HttpGet("\/login")]\r\n public IActionResult Login(string returnUrl = "\/")\r\n => Challenge(new AuthenticationProperties { RedirectUri = returnUrl }, OpenIdConnectDefaults.AuthenticationScheme);\r\n\r\n [Authorize]\r\n [HttpGet("\/logout")]\r\n public IActionResult Logout()\r\n {\r\n return SignOut(new AuthenticationProperties { RedirectUri = "\/" }, CookieAuthenticationDefaults.AuthenticationScheme, OpenIdConnectDefaults.AuthenticationScheme);\r\n }\r\n }\r\n<\/pre>\n<\/div>\nUygulamada login ve logout talepleri oldu\u011fu taktirde bu action’lar tetiklenecektir. Burada dikkat ederseniz AuthenticationProperties<\/code> yap\u0131land\u0131rmas\u0131 e\u015fli\u011finde Challenge<\/code> ve SignOut<\/code> metotlar\u0131ndan istifade edilmektedir.<\/p>\n Challenge<\/code> metodu, [Authorize]<\/code> olan bir endpoint’e login olmam\u0131\u015f kullan\u0131c\u0131dan gelen request neticesinde otomatik tetiklenece\u011fi gibi, buradaki \u00f6rnekte oldu\u011fu gibi manuel de tetiklenebilmektedir. Bu tetikleme ger\u00e7ekle\u015fti\u011fi taktirde OpenIdConnect<\/code> \u015femas\u0131ndaki yap\u0131land\u0131rmalar devreye girecek ve kullan\u0131c\u0131 Keycloak’a login s\u00fcrecinin ba\u015flamas\u0131 i\u00e7in y\u00f6nlendirilecektir.<\/p>\n SignOut<\/code> metodu ise -mevcut kimli\u011fi art\u0131k ge\u00e7ersiz say-<\/em> demektir. Yani bu metot ile Asp.NET Core cookie’si silinecek ve kullan\u0131c\u0131 uygulamadan \u00e7\u0131kar\u0131lacakt\u0131r. Ama unutulmamal\u0131d\u0131r ki, SSO a\u00e7\u0131k kalacakt\u0131r!<\/u> Burada, Program.cs<\/em>‘de yap\u0131land\u0131r\u0131lm\u0131\u015f her iki \u015feman\u0131n \u00f6zellikle belirtildi\u011fini g\u00f6r\u00fcyoruz. Bunun nedeni, hem Asp.NET Core’da sadece uygulamay\u0131 ilgilendirecek \u015fekilde i\u00e7 logout’u ger\u00e7ekle\u015ftirmek hem de Keycloak’a kullan\u0131c\u0131yla ilgili logout olundu\u011funun bilgisini vermektir. OpenIdConnectDefaults.AuthenticationScheme<\/code>, bu ikinci eylemi ger\u00e7ekle\u015ftirecektir ve Keycloak’\u0131n \/protocol\/openid-connect\/logout<\/code> endpoint’ine giderek, ilgili kullan\u0131c\u0131n\u0131n session’\u0131n\u0131 d\u00fc\u015f\u00fcrecektir. Evet, bu eylem sonunda kullan\u0131c\u0131n\u0131n aktif session’lar\u0131 listesinin g\u00fcncellendi\u011fi g\u00f6zlemlenebilecektir. Haliyle burada her iki \u015feman\u0131n da verilmesine kesinlikle \u00f6zen g\u00f6sterilmelidir.<\/p>\n \n\n Sadece Cookie verirsen<\/span><\/p>\nUygulamadan \u00e7\u0131k\u0131l\u0131r, Keycloak hala login kal\u0131r. Kullan\u0131c\u0131 uygulamaya geldi\u011fi an \u015fifresiz otomatik giri\u015f sa\u011flan\u0131r.<\/p>\n<\/p><\/div>\n \n Sadece OIDC verirsen<\/span><\/p>\nKeycloak logout olur ama uygulama cookie’si tutulur. Haliyle uygulama hala login olarak yoluna devam eder.<\/p>\n<\/p><\/div>\n<\/div>\n Evet, art\u0131k uygulamay\u0131 test edebiliriz. Tabi bunun i\u00e7in a\u015fa\u011f\u0131daki gibi iki adet action tasarlamam\u0131z yeterli olacakt\u0131r:<\/p>\n \n\r\n public class HomeController : Controller\r\n {\r\n public IActionResult Index()\r\n {\r\n ViewBag.Title = "Index";\r\n return View();\r\n }\r\n\r\n [Authorize]\r\n public IActionResult Detail()\r\n {\r\n ViewBag.Title = "Detail";\r\n return View();\r\n }\r\n }\r\n<\/pre>\n<\/div>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere bu action’lardan birine direkt eri\u015fim sa\u011flanabilirken bir di\u011feri ise yetkilendirme beklemektedir.<\/p>\n Son olarak Program.cs<\/em> dosyas\u0131na a\u015fa\u011f\u0131daki middleware’lerini ekleyelim ve uygulamay\u0131 derleyip, aya\u011fa kald\u0131ral\u0131m…<\/p>\n \n\r\napp.UseAuthentication();\r\napp.UseAuthorization();\r\n<\/pre>\n<\/div>\n<\/a><\/p>\n <\/span>Login Ekran\u0131n\u0131 \u00d6zelle\u015ftirme<\/span><\/h4>\nKeycloak’ta \u00f6nceden tasarlanm\u0131\u015f haz\u0131r temalar mevcuttur. Bunlar;<\/p>\n\nkeycloak\/ \n \u2514\u2500\u2500 themes\/ \n \u2514\u2500\u2500 base\/ \n \u2514\u2500\u2500 keycloak\/ \n \u2514\u2500\u2500 keycloak.v2\/\n<\/div>\ntemalar\u0131d\u0131r. Her \u015feyden \u00f6nce \u00f6zelle\u015ftirme niyetiyle base<\/em> ve keycloak<\/em> temalar\u0131n\u0131n asla de\u011fi\u015ftirilmemesini \u00f6nermekteyim. E\u011fer varsa yeni bir tasar\u0131ma ihtiya\u00e7, bunun s\u0131f\u0131rdan bir tema tasarlayarak giderilmesi en do\u011frusu olacakt\u0131r.<\/p>\n Nas\u0131l m\u0131?<\/em> \nKeycloak’da login ekranlar\u0131 FreeMarker (.ftl) template’leri ile \u00fcretilmektedir. Haliyle bu davran\u0131\u015fta bir tema olu\u015fturulmas\u0131 yeterli olacakt\u0131r. Bunun i\u00e7in a\u015fa\u011f\u0131daki gibi bir klas\u00f6r dizinine ve dosya yap\u0131lanmas\u0131na ihtiya\u00e7 vard\u0131r;<\/p>\n\nthemes\/ \n \u2514\u2500\u2500 my-login-theme\/ \n \u2514\u2500\u2500 login\/ \n \u251c\u2500\u2500 login.ftl \n \u251c\u2500\u2500 login-reset-password.ftl \n \u251c\u2500\u2500 login-otp.ftl \n \u251c\u2500\u2500 theme.properties \n \u2514\u2500\u2500 resources\/ \n \u251c\u2500\u2500 css\/ \n \u2502 \u2514\u2500\u2500 style.css \n \u2514\u2500\u2500 img\/\n<\/div>\nBurada ben sizler i\u00e7in g\u00fczel bir template tasarlam\u0131\u015f bulunuyorum.<\/a>Evet… G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere egzotik havas\u0131yla, kayan y\u0131ld\u0131zlar e\u015fli\u011finde gayet ferah ve estetik bir tasar\u0131m ortaya koymu\u015f bulunuyorum (tasar\u0131m hafif bi i*nems* olmad\u0131 de\u011fil de neyse)<\/span> Bu template’i indirebilmek i\u00e7in i\u00e7eri\u011fimizin sonundaki GitHub reposuna gitmeniz yeterli olacakt\u0131r. Ha yaz\u0131y\u0131 b\u00f6lmeden direkt indirmek istiyorsan\u0131z buradaki<\/a> linkten eri\u015febilirsiniz.<\/p>\n Peki bu template’i Keycloak’a nas\u0131l y\u00fckleyece\u011fiz?<\/em><\/strong> \nKeycloak’da template’ler \/opt\/keycloak\/themes\/<\/code> dizininde tutulmaktad\u0131rlar. Dolay\u0131s\u0131yla ana klas\u00f6r\u00fc bu dizine at\u0131p, Keycloak Admin Dashboard’undan da \nRealm settings<\/code> \u2192 Themes<\/code> \u2192 Login theme<\/code><\/span> kombinasyonunu takip ederek ilgili temay\u0131 se\u00e7erseniz hem y\u00fcklemi\u015f hem de flow s\u00fcrecinde tasar\u0131m\u0131 aktifle\u015ftirmi\u015f olacaks\u0131n\u0131z.<\/p>\n \n<\/div>\nDocker container’da aya\u011fa kald\u0131r\u0131lan Keycloak’a custom template’i y\u00fckleyebilmek i\u00e7in a\u015fa\u011f\u0131daki talimat\u0131 kullanabilirsiniz.<\/div>\n docker cp {keycloak_custom_template_path}<\/span> {keycloak_container_name}<\/span>:\/opt\/keycloak\/themes\/keycloak-custom-login-theme<\/span>\n<\/div>\n<\/a><\/p>\n <\/span>SPA (Angular) + Asp.NET Core Web API + Keycloak Browser Flow (OTP Dahil)<\/span><\/h4>\nEvet, art\u0131k i\u00e7eri\u011fimizde pratiksel olarak son dokunu\u015fu en \u00e7ok merak edilen ve kritik olan bir noktaya temas ederek ger\u00e7ekle\u015ftirelim istiyorum. SPA (Single Page Application) kullanan projelerde browser flow tam olarak nas\u0131l ger\u00e7ekle\u015ftiriliyor?<\/em> Bu ba\u015fl\u0131k alt\u0131nda bu soruya net bir cevap vermeye ve hatta basit ama a\u00e7\u0131klay\u0131c\u0131 bir \u00f6rnek \u00e7al\u0131\u015fmayla konuyu peki\u015ftirerek cevab\u0131 ta\u00e7land\u0131rmaya \u00e7al\u0131\u015faca\u011f\u0131z.<\/p>\n Cookie mi, JWT mi?<\/strong><\/em> \n\u00d6ncelikle \u015funu bilmekte fayda vard\u0131r ki; SPA, yap\u0131s\u0131 gere\u011fi cookie’ye pek de uygun de\u011fildir. Neden mi?<\/em> \u00c7\u00fcnk\u00fc; HttpOnly cookie, JavaScript ile okunamamaktad\u0131r. Ee bu g\u00fcvenli bir durum de\u011fil mi?<\/em> diye sorarsan\u0131z, evet, belki g\u00fcvenlidir ancak SPA tamamen JavaScript temelli oldu\u011fu i\u00e7in bu durumda token’\u0131 cookie’den okuyup kullanamayacakt\u0131r.<\/p>\n Ayr\u0131ca SPA yap\u0131sal olarak ayn\u0131 backend’i mobil gibi, masa\u00fcst\u00fc ya da IoT gibi farkl\u0131 uygulamalarla payla\u015ft\u0131\u011f\u0131ndan dolay\u0131, haliyle cookie, sadece browser’a \u00f6zg\u00fc bir yap\u0131ya sahiptir. Oysaki JWT her yerde kullan\u0131labilmektedir.<\/p>\n Bundan kaynakl\u0131 bizler SPA ile \u00e7al\u0131\u015f\u0131rken genellikle JWT’yi tercih etmekte ve ona g\u00f6re davran\u0131\u015f\u0131m\u0131z\u0131 \u015fekillendirmekteyiz. Haliyle buradaki \u00e7al\u0131\u015fmada da JWT ile browser flow’a e\u015flik edece\u011fiz. <\/p>\n \u015eimdi bir Angular projesi e\u015fli\u011finde, Asp.NET Core Web API projesi olu\u015ftural\u0131m ve yapaca\u011f\u0131m\u0131z \u00e7al\u0131\u015fmalar\u0131 a\u015fa\u011f\u0131da gibi ad\u0131m ad\u0131m ger\u00e7ekle\u015ftirelim.<\/p>\n\nAd\u0131m 1<\/strong> (Keycloak’da SPA Client’\u0131 Olu\u015fturma)<\/span><\/em> \nHer \u015feyden \u00f6nce SPA uygulamas\u0131n\u0131 Keycloak’da temsil edecek bir client olu\u015fturarak i\u015fe ba\u015flamam\u0131z gerekmektedir. Bunun i\u00e7in angular-client<\/code> ad\u0131nda ve a\u015fa\u011f\u0131daki \u00f6zelliklerde bir client olu\u015ftural\u0131m.<\/p>\n\nStandard Flow Enabled: \u2705 \nImplicit Flow: \u274c \nDirect Access Grants: \u274c \nClient Authentication: \u274c (KAPALI) – (Client authentication, client secret de\u011ferini gerektirece\u011fi ve SPA’da da bu de\u011fer g\u00fcvenli bir \u015fekilde tutulamayaca\u011f\u0131 (tutulsa da gizlenemeyece\u011fi) i\u00e7in SPA’da kullan\u0131lmamaktad\u0131r.)<\/span>\n<\/div>\n\nRedirect URI: http:\/\/localhost:4200\/* \nWeb Origins: http:\/\/localhost:4200\n<\/div>\nEe hoca, signin-oidc’yi tan\u0131mlamayacak m\u0131y\u0131z?<\/em><\/strong> \nsignin-oidc<\/code>, Asp.NET Core OpenIdConnect middleware’i taraf\u0131ndan otomatik olu\u015fturulmaktad\u0131r ve server-side web app, cookie authentication ve AddOpenIdConnect senaryolar\u0131nda kullan\u0131lmaktad\u0131r. SPA’da ise signin-oidc<\/code> diye bir endpoint mevcut olmayaca\u011f\u0131 i\u00e7in callback, root route’a ya da herhangi bir client-side route’a y\u00f6nlendirilebilir.\n<\/li>\n Ad\u0131m 2<\/strong> (Keycloak’da Backend Client’\u0131 Olu\u015fturma)<\/span><\/em> \n\u015eimdi de Asp.NET Core Web API uygulamas\u0131 i\u00e7in angular-api-client<\/code> ad\u0131nda Keycloak’da bir client olu\u015ftural\u0131m. Bu client, SPA’dan gelen token’\u0131 do\u011frulay\u0131p onu besleyen backend g\u00f6revi g\u00f6rece\u011finden t\u00fcm flow’lar\u0131 kapal\u0131 olacakt\u0131r ve root url’i felan da olmayacakt\u0131r.\n<\/li>\n Ad\u0131m 3<\/strong> (Browser Flow’u Kopyalama ve SPA’da Uygun Hale Getirme)<\/span><\/em> \nSPA ile Asp.NET Core senaryosu i\u00e7in mevcut browser flow’u spa_browser<\/code> ad\u0131nda kopyalay\u0131p i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi \u00f6zelle\u015ftirelim.<\/p>\n\nBrowser \n \u251c\u2500\u2500 Cookie (ALTERNATIVE) \n \u251c\u2500\u2500 Identity Provider Redirector (ALTERNATIVE) \n \u251c\u2500\u2500 Username Password Form (REQUIRED) \n \u2514\u2500\u2500 Conditional OTP (REQUIRED) \n \u251c\u2500\u2500 Condition – User Configured (REQUIRED) \n \u2514\u2500\u2500 OTP Form (REQUIRED)\n<\/div>\nEvet, b\u00f6ylece bir SPA i\u00e7in olduk\u00e7a ideal flow tasarlam\u0131\u015f bulunuyoruz. Ard\u0131ndan bu flow’u bind ederek, Keycloak’da aktifle\u015ftirelim.\n<\/li>\nAd\u0131m 4<\/strong> (Angular’da Keycloak JS Adapter’\u0131 Y\u00fckleme ve Temel Servisi \u0130n\u015fa Etme)<\/span><\/em> \nKeycloak\u2019un SPA\u2019ler i\u00e7in resmi olarak sundu\u011fu keycloak-js<\/a> JavaScript client k\u00fct\u00fcphanesini kullanarak login, logout, token alma ve token yenileme i\u015flemlerini Keycloak\u2019a devredece\u011fiz. Haliyle \u00f6ncelikle bu paketi uygulamaya y\u00fckleyelim;<\/p>\n\n<\/div>\nkeycloak-js<\/div>\n npm install keycloak-js<\/span>\n<\/div>\n Ard\u0131ndan a\u015fa\u011f\u0131daki servisi olu\u015fturarak Angular ile Keycloak aras\u0131ndaki k\u00f6pr\u00fcy\u00fc olu\u015fturak temel ileti\u015fim servisini in\u015fa edelim:<\/p>\n\n\r\nimport { Injectable } from '@angular\/core';\r\nimport Keycloak from 'keycloak-js';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class KeycloakService {\r\n static keycloak: Keycloak = new Keycloak({\r\n url: 'http:\/\/127.0.0.1:8080\/',\r\n realm: 'master',\r\n clientId: 'angular-client',\r\n });\r\n}\r\n<\/pre>\n<\/div>\nArd\u0131ndan Angular uygulamas\u0131nda kullan\u0131c\u0131y\u0131 g\u00fcvenli \u015fekilde do\u011frulamak ve ge\u00e7erli bir JWT \u00fcretebilmek i\u00e7in app.config.ts<\/em> dosyas\u0131nda a\u015fa\u011f\u0131daki yap\u0131land\u0131rmada bulunmam\u0131z gerekmektedir:<\/p>\n\n\r\nimport { KeycloakService } from '.\/services\/keycloak.service.';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n providers: [\r\n provideBrowserGlobalErrorListeners(),\r\n provideRouter(routes),\r\n provideAppInitializer(() => {\r\n KeycloakService.keycloak.init({\r\n onLoad: 'login-required',\r\n pkceMethod: 'S256',\r\n checkLoginIframe: false\r\n })\r\n }),\r\n provideHttpClient()\r\n ]\r\n};\r\n<\/pre>\n<\/div>\n8<\/em> ile 12.<\/em> sat\u0131r aral\u0131\u011f\u0131ndaki yap\u0131land\u0131rma ile, SPA’n\u0131n Keycloak \u00fczerinden g\u00fcvenli \u015fekilde login olup JWT almas\u0131n\u0131 ve uygulaman\u0131n ancak bu kimlik do\u011fruland\u0131ktan sonra \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamaktay\u0131z.<\/p>\n Burada;<\/p>\n\n1\ufe0f\u20e3onLoad: 'login-required'<\/code> ile login durumunu zorunlu k\u0131lmakta ve e\u011fer kullan\u0131c\u0131 login de\u011filse hi\u00e7 bekletmeksizin direkt Keycloak’a y\u00f6nlendirmenin ger\u00e7ekle\u015ftirilmesi gerekti\u011fini ifade etmekteyiz.\nB\u00f6ylece uygulama a\u00e7\u0131s\u0131ndan en ba\u015ftan kimlik garanti alt\u0131na al\u0131nmaktad\u0131r.<\/p>\n Buna alternatif olarak onLoad: 'check-sso'<\/code> de\u011ferini verebilir ve login olunmad\u0131\u011f\u0131 taktirde sessiz kal\u0131nmas\u0131n\u0131 sa\u011flayabiliriz. \u00d6zellikle bu ayar public sayfalar i\u00e7in uygundur.\n<\/li>\n 2\ufe0f\u20e3pkceMethod: 'S256'<\/code> ile bu SPA’n\u0131n authorization code flow’u PKCE ile kullanaca\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtmekte ve PKCE’nin hangi y\u00f6ntemle hash’lenece\u011fini ifade etmekteyiz.\n<\/li>\n 3\ufe0f\u20e3checkLoginIframe: false<\/code> ile de \u00f6nemli bir davran\u0131\u015f\u0131 yap\u0131land\u0131r\u0131yoruz. \u015e\u00f6yle ki; Keycloak belirli periyotlarda arka planda bir iframe a\u00e7makta ve bunun \u00fczerinden kullan\u0131c\u0131n\u0131n hala login olup olmad\u0131\u011f\u0131n\u0131 kontrol etmektedir. Bunu bizler g\u00f6remesek de browser g\u00f6rebilmektedir. Bizler bu yap\u0131land\u0131rma ile bu davran\u0131\u015f\u0131 y\u00f6netebilmekteyiz.\nfalse<\/em> olarak ayarlayarak Keycloak’a o gizli iframe i\u015fini b\u0131rakmas\u0131 ve token s\u00fcresine bak\u0131laca\u011f\u0131n\u0131 ifade etmi\u015f oluyoruz.<\/li>\n<\/ul>\n Evet, bu \u00e7al\u0131\u015fmalar sayesinde Angular uygulamas\u0131nda \/authorize<\/code> endpoint’ine redirect i\u015flemini ger\u00e7ekle\u015ftirebilmekte, authorization code + PKCE ak\u0131\u015f\u0131n\u0131 y\u00f6netebilmekte, d\u00f6nen JWT’leri memory’de tutabilmekte, token s\u00fcresi dolunca sessizce refresh i\u015flemini ger\u00e7ekle\u015ftirebilmekte ve logout’ta \/logout<\/code>‘a y\u00f6nlendirmeyi sa\u011flayabilmekteyiz.\n<\/li>\n Ad\u0131m 5<\/strong> (Token Alma)<\/span><\/em> \nBir \u00f6nceki ad\u0131mda onLoad: 'login-required'<\/code> yap\u0131land\u0131rmas\u0131 ile uygulamada login s\u00f6z konusu de\u011filse Keycloak’a y\u00f6nlendirmesi gerekti\u011fi \u015feklinde bir konfig\u00fcrasyonda bulunmu\u015ftuk. Haliyle bu vaziyette uygulamay\u0131 derleyip aya\u011fa kald\u0131r\u0131rsak direkt Keycloak’a y\u00f6nlendirildi\u011fimizi g\u00f6receksiniz. Herhangi bir kullan\u0131c\u0131yla giri\u015f yap\u0131ld\u0131\u011f\u0131 taktirde art\u0131k token al\u0131nm\u0131\u015f ve login ger\u00e7ekle\u015ftirilmi\u015f olacakt\u0131r.<\/p>\nTabi burada dikkat edilmesi gereken noktalar vard\u0131r. \u015e\u00f6yle ki; elde edilen token keycloak-js<\/em> taraf\u0131ndan ne localStorage’da, ne sessionStorage’da ne de cookie’de tutulmakta, yaln\u0131z SPA’n\u0131n JS memory’sinde tutulmaktad\u0131r. Ancak giri\u015f yap\u0131ld\u0131ktan sonra taray\u0131c\u0131n\u0131n cookie’lerine g\u00f6z atarsak orada baz\u0131 yap\u0131land\u0131rmalar\u0131 g\u00f6r\u00fcyor olaca\u011f\u0131z.<\/a>Bu yap\u0131land\u0131rmalar token ile alakal\u0131 de\u011fildir. Bizzat Keycloak server cookie’leridir. Bunlar\u0131n SPA’da da g\u00f6z\u00fckmesinin sebebi kafan\u0131z\u0131 kar\u0131\u015ft\u0131rmas\u0131n… Hem SPA hem de Keycloak localhost’ta aya\u011fa kald\u0131r\u0131ld\u0131\u011f\u0131 i\u00e7in her ne kadar portlar\u0131 de\u011fi\u015fiyor olsa da bu domain’deki cookie’ler her iki tarafta da karman \u00e7orman g\u00f6z\u00fckmektedir.<\/p>\n Ayr\u0131ca Browser Flow Authentication Nedir?<\/a> ba\u015fl\u0131\u011f\u0131nda ele ald\u0131\u011f\u0131m\u0131z MVC y\u00f6ntemindeki gibi token, SPA \u00e7al\u0131\u015fmas\u0131nda cookie’e g\u00f6m\u00fclmemektedir.<\/p>\n Velhas\u0131l…<\/p>\n Evet, giri\u015f yap\u0131ld\u0131ktan ve token elde edildikten sonra a\u015fa\u011f\u0131daki gibi ula\u015f\u0131labilmektedir:<\/p>\n \n\r\n KeycloakService.keycloak.token\r\n KeycloakService.keycloak.refreshToken\r\n<\/pre>\n<\/div>\n<\/li>\nAd\u0131m 6<\/strong> (Asp.NET Core’da JWT Do\u011frulama ve \u00d6rnek Authorize \u0130\u015flemleri)<\/span><\/em> \nArt\u0131k Asp.NET Core’da JWT do\u011frulamay\u0131 sa\u011flayabilir ve Authorize edilmi\u015f bir endpoint \u00fczerinden testimizi ger\u00e7ekle\u015ftirebiliriz.<\/p>\n\n Gerekli K\u00fct\u00fcphaneler<\/strong> \nMicrosoft.AspNetCore.Authentication.OpenIdConnect<\/a>\n<\/div>\n\n\r\nvar builder = WebApplication.CreateBuilder(args);\r\nbuilder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)\r\n .AddJwtBearer(options =>\r\n {\r\n options.Authority = "http:\/\/127.0.0.1:8080\/realms\/master";\r\n\r\n options.Audience = "account";\r\n\r\n options.RequireHttpsMetadata = false;\r\n\r\n options.TokenValidationParameters = new TokenValidationParameters\r\n {\r\n ValidateIssuer = true,\r\n ValidateAudience = true,\r\n ValidateLifetime = true,\r\n ValidateIssuerSigningKey = true,\r\n NameClaimType = JwtRegisteredClaimNames.PreferredUsername\r\n };\r\n });\r\n\r\nbuilder.Services.AddAuthorization();\r\n\r\nbuilder.Services.AddCors(options => options.AddDefaultPolicy(policy => policy.AllowAnyHeader()\r\n .AllowAnyMethod()\r\n .AllowAnyOrigin()));\r\n\r\n\r\nvar app = builder.Build();\r\n\r\napp.UseCors();\r\n\r\napp.UseAuthentication()\r\n .UseAuthorization();\r\n\r\napp.MapGet("\/", () => TypedResults.Ok("Hello World!")).\r\n RequireAuthorization();\r\n\r\napp.Run();\r\n<\/pre>\n<\/div>\n<\/li>\nAd\u0131m 7<\/strong> (Test Etme)<\/span><\/em> \nEvet, s\u0131ra t\u00fcm yapt\u0131\u011f\u0131m\u0131z \u00e7al\u0131\u015fmalar\u0131 test etmeye geldi diyebiliriz. Bunun i\u00e7in a\u015fa\u011f\u0131daki gibi basit bir component tasarlayal\u0131m ve testimizi ger\u00e7ekle\u015ftirelim:<\/p>\n\n\r\n@Component({\r\n selector: 'app-root',\r\n imports: [RouterOutlet],\r\n template: `\r\n <h1>{{ hi() }}<\/h1>\r\n\r\n <button (click)="getHelloWord()">getHelloWord()<\/button>\r\n `\r\n})\r\nexport class App {\r\n httpClient: HttpClient = inject(HttpClient);\r\n\r\n hi = signal("");\r\n getHelloWord() {\r\n this.httpClient.get("https:\/\/localhost:7297\/", {\r\n headers: {\r\n Authorization: `Bearer ${KeycloakService.keycloak.token}`\r\n }\r\n }).subscribe((res) => this.hi.set(res.toString()));\r\n }\r\n}\r\n<\/pre>\n<\/div>\n<\/a>\n<\/li>\n<\/ul>\n \u0130\u015fte bu kadar \ud83d\ude42 \u00c7al\u0131\u015ft\u0131\u011f\u0131n\u0131z proje ister basit ister kurumsal \u00f6l\u00e7ekte olsun fark etmeksizin SPA’da Keycloak ile browser flow’u uygulamak sade ve sadece bu ad\u0131mlardan ibarettir.<\/p>\n <\/span>Browser Flow’da En \u00c7ok Yap\u0131lan Hatalar<\/span><\/h4>\nSon olarak browser flow’da dikkat edilmesi gereken hususlara “hata” orijinli bir bak\u0131\u015fla g\u00f6z atarak i\u00e7eri\u011fimizi nihayetlendirelim…<\/p>\n\nOTP’yi REQUIRED<\/code> yapmak<\/em><\/strong> \nKeycloak’da browser flow’da -herkes 2FA kullans\u0131n ve g\u00fcvenlik arts\u0131n-<\/em> gerek\u00e7esiyle OTP Form<\/em> REQUIRED<\/code> olarak ayarlan\u0131rsa e\u011fer OTP’si olmayan kullan\u0131c\u0131lar login olamayacakt\u0131rlar!<\/p>\nNeden mi?<\/em> \nOTP, kullan\u0131c\u0131n\u0131n Keycloak’ta tan\u0131ml\u0131 bir credential’\u0131d\u0131r. Haliyle browser flow’da OTP’nin REQUIRED<\/code> olmas\u0131 durumunda, eski kullan\u0131c\u0131da OTP yoksa yahut yeni kullan\u0131c\u0131da OTP setup yap\u0131lmad\u0131ysa bu kullan\u0131c\u0131lar sistemin d\u0131\u015f\u0131nda b\u0131rak\u0131lacaklar\u0131ndan dolay\u0131 hi\u00e7bir zaman giri\u015f yapamayacakt\u0131rlar!<\/p>\n Peki ne yap\u0131lmal\u0131?<\/em> \nOTP i\u00e7in do\u011fru model CONDITIONAL<\/code> olarak tasarlanmas\u0131d\u0131r. Bu sayede, OTP’si olmayan ilk login s\u00fcrecinde OTP setup’a y\u00f6nlendirilecek, yok e\u011fer OTP’si varsa e\u011fer direkt OTP do\u011frulamaya y\u00f6nlendirilecektir. B\u00f6ylece ne eski kullan\u0131c\u0131 kilitlenecek, ne de yeni kullan\u0131c\u0131 zorla OTP’ye ge\u00e7irilecektir.\n<\/li>\n Cookie Authenticator’\u0131 silmek<\/em><\/strong> \n-Zaten login oluyoruz, cookie’ye ne gerek var?-<\/em> d\u00fc\u015f\u00fcncesiyle Cookie authenticator’\u0131 silmeye \u00e7al\u0131\u015fmay\u0131n\u0131z. Cookie, ilgili taray\u0131c\u0131n\u0131n daha \u00f6nce login olup olmad\u0131\u011f\u0131n\u0131 kontrol etmektedir. B\u00f6ylece SSO ve session reuse gibi durumlar\u0131 y\u00fcr\u00fctmektedir.<\/p>\nE\u011fer ki, cookie’yi silerseniz ayn\u0131 taray\u0131c\u0131da olsa dahi her request’te tekrar tekrar username \/ password isteyecektir ve SSO davran\u0131\u015f\u0131 sergilenemeyecektir. Bu da son kullan\u0131c\u0131 a\u00e7\u0131s\u0131ndan s\u00fcrekli redirect loop<\/em> hissiyat\u0131 e\u015fli\u011finde -niye her refresh’te login istiyor!-<\/em> isyan\u0131 do\u011furacakt\u0131r.<\/p>\n<\/li>\n Browser flow’u kopyalay\u0131p ba\u011flamamak<\/em><\/strong> \nBrowser flow’u duplicate edip kendinize g\u00f6re d\u00fczenleyebilirsiniz. Ama unutulmamal\u0131d\u0131r ki Keycloak’da default olan ak\u0131\u015f browser flow’dur. Haliyle sizlerin d\u00fczenledi\u011fi custom flow bind edilmedi\u011fi s\u00fcrece i\u015flevsellik g\u00f6stermeyecektir. Evet… flow olu\u015fturmak, kullanmak demek de\u011fildir. Bind edilmelidir.\n<\/li>\nClient Flow Override’\u0131 unutmak<\/em><\/strong> \nKeycloak’ta Authentication Flow’lar realm ve client olmak \u00fczere iki seviyede uygulan\u0131rlar. Varsay\u0131lan olarak realm seviyesi ge\u00e7erlidir. Yani aksi s\u00f6ylenmedi\u011fi s\u00fcrece ilgili realm \u00fczerinden login olan herkes o realm’deki kabul edilen flow’a g\u00f6re do\u011frulan\u0131p, yetkilendirilir.<\/p>\nAncak ger\u00e7ek hayatta \u015f\u00f6yle bir ihtiya\u00e7 s\u00f6z konusu olabilmektedir: \n\u2192 Web uygulamas\u0131nda OTP olsun \n\u2192 SPA’da OTP olmas\u0131n \n\u2192 Admin UI’da farkl\u0131 kurallar olsun…<\/p>\n Bu durumda realm seviyesinde tek bir browser flow’un olmas\u0131 s\u00fcre\u00e7 a\u00e7\u0131s\u0131ndan bir kriz gibi g\u00f6z\u00fckebilir. \u0130\u015fte bu taktirde bizler client seviyesinde flow override ger\u00e7ekle\u015ftirmeliyiz.<\/p>\nClient flow override ile genel kural\u0131 bozarak client seviyesinde \u00f6zelle\u015ftirme yapabilmekteyiz.<\/a>Bunun i\u00e7in yukar\u0131daki ekran al\u0131nt\u0131s\u0131nda g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Clients \u2192 {Client} \u2192 Advanced \u2192 Authentication flow overrides<\/em> kombinasyonu takip edilmelidir.<\/p>\n<\/li>\n Authorization Code ile Direct Grant’i kar\u0131\u015ft\u0131rmak<\/em><\/strong> \nAuthorization Code ile Direct Grant’i kar\u0131\u015ft\u0131rmak olabilecek en kritik zihinsel hatalardan birisidir. Bu iki farkl\u0131 davran\u0131\u015f\u0131n do\u011fas\u0131nda a\u015fa\u011f\u0131daki mekanizmalar s\u00f6z konusudur.<\/p>\nAuthorization Code Low’da<\/p>\nKullan\u0131c\u0131 taray\u0131c\u0131dan gelir, Keycloak sayfas\u0131na y\u00f6nlendirilir ve orada login olur.<\/em><\/p><\/blockquote>\n Bu y\u00fczden \u015funlar m\u00fcmk\u00fcnd\u00fcr : \n\u2192 Browser \n\u2192 Redirect \n\u2192 \/authorize \n\u2192 \/signin-oidc \n\u2192 Cookie \n\u2192 SSO \n\u2192 MFA<\/p>\n Direct Grant – Resource Owner Password Credential Flow (ROPC)’da ise<\/p>\nBir uygulama username & password’\u00fc Keycloak’a REST API ile g\u00f6nderir ve \u00f6yle login sa\u011flar.<\/em><\/p><\/blockquote>\n Dolay\u0131s\u0131yla burada \n\u2192 Browser yok \n\u2192 Redirect yok \n\u2192 Cookie yok \n\u2192 MFA s\u0131n\u0131rl\u0131 \n\u2192 ve kullan\u0131c\u0131 etkile\u015fimi yoktur!<\/p>\n Sadece \n\u2192 Username \/ Password \n\u2192 API call \nmevcuttur.<\/p>\n Hata \u015furadad\u0131r ki, -ben zaten token al\u0131yorum, her ikisinde de flow ayn\u0131-<\/em> diye d\u00fc\u015f\u00fcn\u00fclebilir.\n<\/li>\n<\/ul>\n Nihai olarak; \nBu i\u00e7erik boyunca, g\u00fcn\u00fcm\u00fczde en yayg\u0131n kimlik do\u011frulama yakla\u015f\u0131mlar\u0131ndan biri olan Keycloak Browser Flow yap\u0131s\u0131n\u0131 hem teorik arka plan\u0131yla ele ald\u0131k hem de pratikte s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan server-side web uygulamalar\u0131 (Asp.NET Core MVC) ve SPA tabanl\u0131 istemciler \u00fczerinden ger\u00e7ek kullan\u0131m senaryolar\u0131yla de\u011ferlendirdik. S\u00fcre\u00e7 i\u00e7erisinde Single Sign-On (SSO) mant\u0131\u011f\u0131n\u0131 anlamland\u0131rd\u0131k ve \u00e7oklu istemci bar\u0131nd\u0131ran mimarilerde kimlik do\u011frulama ak\u0131\u015flar\u0131 planlan\u0131rken nelere dikkat edilmesi gerekti\u011fine \u00f6zellikle odakland\u0131k. Bununla birlikte, Keycloak’un varsay\u0131lan olarak sundu\u011fu login ekran\u0131n\u0131n nas\u0131l \u00f6zelle\u015ftirilebilece\u011fini inceleyerek, hem kullan\u0131c\u0131 deneyimi hem de kurumsal ihtiya\u00e7lar a\u00e7\u0131s\u0131ndan nas\u0131l daha esnek \u00e7\u00f6z\u00fcmler \u00fcretilebilece\u011fini de ortaya koymu\u015f olduk.<\/p>\n \u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle… \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere… \n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n\n\n \nRepo Ad\u0131 Buraya<\/div>\nhttps:\/\/github.com\/gncyyldz\/Keycloak.Examples<\/div>\n<\/p><\/div>\n<\/p><\/div>\n\n Bu repository, ilgili projenin kaynak kodlar\u0131n\u0131 ve mimari yap\u0131s\u0131n\u0131 i\u00e7ermektedir. Detaylar i\u00e7in GitHub \u00fczerinden inceleyebilirsiniz.\n <\/div>\n \n GitHub\u2019da G\u00f6r\u00fcnt\u00fcle \u2192 \n <\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Merhaba, Bu i\u00e7eri\u011fimizde Asp.NET Core ile birlikte Keycloak’da Browser Flow Authentication konusunu hem teorik hem de pratik bir \u015fekilde netle\u015ftirebilece\u011fimiz bir incelemede bulunuyor olaca\u011f\u0131z. Browser Flow Authentication Nedir? Browser Flow, Keycloak’un taray\u0131c\u0131 tabanl\u0131 (interactive)...<\/p>\n","protected":false},"author":1,"featured_media":28235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5206,5554],"tags":[5657,2679,5646,3874,3872,5645,5644,5640,5648,5655,5656,5555,5658,5651,3833,5650,3959,5653,5654,5649,5652,5561,5562,5647],"class_list":["post-28401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-net","category-keycloak","tag-ftl","tag-asp-net-core","tag-asp-net-core-browser-flow","tag-authorization-code","tag-authorization-code-flow","tag-browser-authentication","tag-browser-flow-authentication","tag-challenge","tag-coklu-oturum-acma","tag-direct-grant","tag-freemarker","tag-keycloak","tag-keycloak-js","tag-oidc","tag-openid-connect","tag-password-fatigue","tag-pkce","tag-resource-owner-password-credential-flow","tag-ropc","tag-sifre-yorgunlugu","tag-signout","tag-single-sign-on","tag-sso","tag-tek-oturum-acma"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/28401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=28401"}],"version-history":[{"count":14,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/28401\/revisions"}],"predecessor-version":[{"id":28433,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/28401\/revisions\/28433"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/28235"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=28401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=28401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=28401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}