<\/div>\n

Merhaba,<\/p>\n

Klasik web uygulamalar\u0131nda oldu\u011fu gibi SignalR mimarisiyle real time \u00e7al\u0131\u015fan uygulamalarda da kullan\u0131c\u0131 do\u011frulama ve yetkilendirme ihtiyac\u0131 hissedebilir ve e\u015fzamanl\u0131 veri ak\u0131\u015f\u0131 esnas\u0131nda tan\u0131ml\u0131 kullan\u0131c\u0131lar d\u0131\u015f\u0131nda etkile\u015fime m\u00fcdahale olunmas\u0131n\u0131 istemeyebiliriz. Bu i\u00e7eri\u011fimizde, bu ihtiyaca istinaden t\u00fcm detaylar\u0131yla bir izahatte bulunacak ve SignalR mimarisinde Authentication<\/em> ve Authorization<\/em> i\u015flemlerini ele alaca\u011f\u0131z.<\/p>\n

Ba\u015flarken<\/h3>\n
\u0130\u00e7eri\u011fimizin derinliklerine girmeden \u00f6nce izleyece\u011fimiz yolu genel hatlar\u0131yla g\u00f6sterebilmek i\u00e7in klavuz niteli\u011finde a\u00e7\u0131klama yapmakta fayda var. SignalR ile authentication ve authorization yap\u0131lanmas\u0131n\u0131 inceleyebilmek i\u00e7in JWT’den faydalanacak ve t\u00fcm detaylar\u0131yla bir Asp.NET Core Web API uygulamas\u0131na JWT entegrasyonunun nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 inceleyece\u011fiz. Ard\u0131ndan SignalR’\u0131n bildi\u011fimiz yap\u0131lanmas\u0131 ile basit bir uygulama geli\u015ftirecek ve bunun yan\u0131nda kullan\u0131c\u0131 ekleme ve login olma gibi i\u015flemleri Hub’lar \u00fczerinden ger\u00e7ekle\u015ftirece\u011fiz. Kullan\u0131c\u0131 do\u011frulama ard\u0131ndan yetkilendirme(authorization) konusuna de\u011finece\u011fiz. S\u00fcreci daha da efektif bir hale getirebilmek i\u00e7in Refresh Token stratejisinden faydalanaca\u011f\u0131z. T\u00fcm s\u00fcre\u00e7; real time bir \u015fekilde, gerekli kritikleri gerekti\u011fi noktalarda yaparak ad\u0131m ad\u0131m bir \u015fekilde tasarlanacakt\u0131r.<\/p>\n
\u015eimdi bir Asp.NET Core Web API uygulamas\u0131 olu\u015fturup, hali haz\u0131rda i\u00e7eri\u011fe devam edebiliriz.<\/p>\n
JWT Mekanizmas\u0131n\u0131n \u0130n\u015fas\u0131<\/h3>\n
Konumuz her ne kadar SignalR’da olsa JWT ile authentication ve authorization i\u015flemleri ger\u00e7ekle\u015ftireceksek e\u011fer illaki \u00f6ncelikle JWT \u00fcretebilecek mekanizmay\u0131 in\u015fa etmemiz gerekmektedir. Normalde bu mekanizmay\u0131 Asp.NET Core 3.1 ile Token Bazl\u0131 Kimlik Do\u011frulamas\u0131 ve Refresh Token Kullan\u0131m\u0131(JWT)<\/a> ba\u015fl\u0131kl\u0131 makaleyi referans ederek, in\u015fa edildi\u011fini varsay\u0131p ge\u00e7ebilirdik. Lakin sizlerin ilgili konuyu peki\u015ftirmeniz ve daha da hakim olabilmeniz i\u00e7in burada da tekrardan entegrasyon s\u00fcrecine de\u011finmeyi ve ele almay\u0131 uygun g\u00f6rmekteyim.<\/p>\n
Hadi ba\u015flayal\u0131m \ud83d\ude42<\/p>\n
\n
Ad\u0131m 1<\/strong>
\nHer \u015feyden \u00f6nce uygulamada kullan\u0131c\u0131lara kar\u015f\u0131l\u0131k gelecek olan ‘User’ modelini ve context nesnesini olu\u015fturarak ba\u015flayal\u0131m.<\/p>\n
\r\n public class User\r\n {\r\n public int Id { get; set; }\r\n public string Username { get; set; }\r\n public string Password { get; set; }\r\n public string RefreshToken { get; set; }\r\n public DateTime RefreshTokenEndDate { get; set; }\r\n }\r\n<\/pre>\n
Burada dikkat ederseniz e\u011fer kullan\u0131c\u0131 oturumunun s\u00fcreklili\u011fine dair refresh token stratejisini uygulayaca\u011f\u0131m\u0131zdan dolay\u0131 ‘RefrestToken’ ve ‘RefreshTokenEndDate’ propertyleri tan\u0131mlanm\u0131\u015ft\u0131r. Konuya dair daha detayl\u0131 bilgi i\u00e7in bknz : Asp.NET Core 3.1 ile Token Bazl\u0131 Kimlik Do\u011frulamas\u0131 ve Refresh Token Kullan\u0131m\u0131(JWT)<\/a><\/p>\n
Tasarlayaca\u011f\u0131n\u0131z context nesnesi \u00fczerinden olu\u015fturdu\u011fumuz ‘User’ entity’sini DbSet olarak belirtiniz ve bu i\u015flem neticesinde gerekli migration i\u015flemlerini ve migrate etmeyi ger\u00e7ekle\u015ftiriniz. Konuyu fazla da\u011f\u0131tmamak ad\u0131na bu k\u0131s\u0131mlar\u0131n icra edildi\u011fini varsay\u0131yorum. Bknz : Asp.NET Core 2 MVC\u2019de Migrations \u0130le Veritaban\u0131 \u0130\u015flemleri<\/a><\/span>\n<\/li>\n
Ad\u0131m 2<\/strong>
\n‘Startup.cs’ dosyas\u0131nda JWT konfig\u00fcrasyonunu ger\u00e7ekle\u015ftirelim. Bunun i\u00e7in a\u015fa\u011f\u0131daki gibi ‘Authentication’ ve ‘JwtBearer’ servisini uygulamaya dahil edelim.<\/p>\n
\r\n services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)\r\n .AddJwtBearer(options =>\r\n {\r\n options.TokenValidationParameters = new TokenValidationParameters\r\n {\r\n ValidateAudience = true,\r\n ValidateIssuer = true,\r\n ValidateLifetime = true,\r\n ValidateIssuerSigningKey = true,\r\n ValidIssuer = _configuration["JWT:Issuer"],\r\n ValidAudience = _configuration["JWT:Audience"],\r\n IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["JWT:SecurityKey"])),\r\n ClockSkew = TimeSpan.Zero\r\n };\r\n });\r\n<\/pre>\n
Burada JWT konfig\u00fcrasyonu i\u00e7in uygulamaya Microsoft.AspNetCore.Authentication.JwtBearer<\/a> k\u00fct\u00fcphanesinin y\u00fcklenmesi gerekmektedir. Tan\u0131mlama s\u00fcrecinde propertylerin ne oldu\u011funa dair detayl\u0131 bilgi i\u00e7in Asp.NET Core 3.1 ile Token Bazl\u0131 Kimlik Do\u011frulamas\u0131 ve Refresh Token Kullan\u0131m\u0131(JWT)<\/a> adresindeki makaleye g\u00f6z atabilirsiniz. Ayr\u0131ca ‘appsettings.json’ dosyas\u0131ndaki statik de\u011ferler i\u00e7in a\u015fa\u011f\u0131daki gibi tan\u0131mlama yapabilirsiniz.<\/p>\n
\r\n{\r\n .\r\n .\r\n .\r\n "JWT": {\r\n "Audience": "localhost",\r\n "Issuer": "www.gencayyildiz.com",\r\n "SecurityKey": "sebepsiz bo\u015f yere ayr\u0131lacaksann. ... ."\r\n }\r\n}\r\n<\/pre>\n<\/li>\n
Ad\u0131m 3<\/strong>
\nWeb taray\u0131c\u0131s\u0131 \u00fczerinden client’lar\u0131n eri\u015fimini sa\u011fl\u0131kl\u0131 bir \u015fekilde sa\u011flayabilmek i\u00e7in ‘Startup.cs’ \u00fczerinden CORS politikas\u0131n\u0131 ayarlayal\u0131m. Tabi ki de client’lar sadece web tabanl\u0131 olmak zorunda de\u011fil. Console, Windows, Mobile, Ak\u0131ll\u0131 \u00fct\u00fc vs. olabilir \ud83d\ude42 <\/span><\/p>\n
\r\n public void ConfigureServices(IServiceCollection services)\r\n {\r\n .\r\n .\r\n .\r\n services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)\r\n .AddJwtBearer(options =>\r\n {\r\n options.TokenValidationParameters = new TokenValidationParameters\r\n {\r\n ValidateAudience = true,\r\n ValidateIssuer = true,\r\n ValidateLifetime = true,\r\n ValidateIssuerSigningKey = true,\r\n ValidIssuer = _configuration["JWT:Issuer"],\r\n ValidAudience = _configuration["JWT:Audience"],\r\n IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["JWT:SecurityKey"])),\r\n ClockSkew = TimeSpan.Zero\r\n };\r\n });\r\n .\r\n .\r\n .\r\n }\r\n<\/pre>\n
‘UseCors’ middleware’ini \u00e7a\u011f\u0131ral\u0131m.<\/p>\n
\r\n .\r\n .\r\n .\r\n app.UseCors();\r\n .\r\n .\r\n .\r\n<\/pre>\n<\/li>\n
Ad\u0131m 4<\/strong>
\nUygulamada authentication ve authorization i\u015flevlerini kullanabilmek i\u00e7in ‘UseAuthentication’ ve ‘UseAuthorization’ middleware’lerini \u00e7a\u011f\u0131ral\u0131m.<\/p>\n
\r\n public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\r\n {\r\n .\r\n .\r\n .\r\n app.UseRouting();\r\n app.UseCors();\r\n\r\n app.UseAuthentication();\r\n app.UseAuthorization();\r\n\r\n app.UseEndpoints...\r\n .\r\n .\r\n .\r\n }\r\n<\/pre>\n
Bu middleware’ler sayesinde tasarlad\u0131\u011f\u0131m\u0131z uygulamaya t\u00fcm kullan\u0131c\u0131 denetimi ve rol y\u00f6netimi i\u015flevleri kazand\u0131r\u0131lmaktad\u0131r.\n<\/li>\n
Ad\u0131m 5<\/strong>
\n\u00dcretilecek token ve refresh token de\u011ferlerini ta\u015f\u0131yacak model’i tasarlayal\u0131m.<\/p>\n
\r\n public class Token\r\n {\r\n public string AccessToken { get; set; }\r\n public DateTime Expiration { get; set; }\r\n public string RefreshToken { get; set; }\r\n }\r\n<\/pre>\n<\/li>\n
Ad\u0131m 6<\/strong>
\nT\u00fcm bu in\u015falardan sonra art\u0131k token \u00fcretiminden sorumlu Token Handler s\u0131n\u0131f\u0131n\u0131 olu\u015fturabiliriz.<\/p>\n
\r\n public class TokenHandler\r\n {\r\n readonly IConfiguration _configuration;\r\n public TokenHandler(IConfiguration configuration)\r\n {\r\n _configuration = configuration;\r\n }\r\n public Token CreateAccessToken(int duration)\r\n {\r\n Token tokenInstance = new Token();\r\n SymmetricSecurityKey securityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["JWT:SecurityKey"]));\r\n SigningCredentials signingCredentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256);\r\n tokenInstance.Expiration = DateTime.Now.AddMinutes(duration);\r\n JwtSecurityToken securityToken = new JwtSecurityToken\r\n (\r\n issuer: _configuration["JWT:Issuer"],\r\n audience: _configuration["JWT:Audience"],\r\n expires: tokenInstance.Expiration,\r\n notBefore: DateTime.Now,\r\n signingCredentials: signingCredentials\r\n );\r\n JwtSecurityTokenHandler tokenHandler = new JwtSecurityTokenHandler();\r\n tokenInstance.AccessToken = tokenHandler.WriteToken(securityToken);\r\n tokenInstance.RefreshToken = CreateRefreshToken();\r\n return tokenInstance;\r\n }\r\n public string CreateRefreshToken()\r\n {\r\n byte[] number = new byte[32];\r\n using RandomNumberGenerator random = RandomNumberGenerator.Create();\r\n random.GetBytes(number);\r\n return Convert.ToBase64String(number);\r\n }\r\n }\r\n<\/pre>\n<\/li>\n<\/ul>\n
Evet, bu ad\u0131mlar neticesinde uygulamaya JWT entegrasyonunu ba\u015far\u0131yla sa\u011flam\u0131\u015f bulunmaktay\u0131z. \u015eimdi s\u0131ra SignalR mimarisi ile uygulamay\u0131 geli\u015ftirmeye geldi.<\/p>\n
SignalR Uygulamas\u0131n\u0131n Geli\u015ftirilmesi<\/h3>\n
SignalR mimarisi, server ve client olmak \u00fczere ikiye ayr\u0131ld\u0131\u011f\u0131ndan dolay\u0131 bizler \u00f6ncelikle server k\u0131sm\u0131n\u0131 in\u015fa edecek ve ard\u0131ndan client olarak web uygulamas\u0131 geli\u015ftirece\u011fiz. S\u00fcre\u00e7te programatik davran\u0131\u015f\u0131 tercih edece\u011fimizden dolay\u0131, Hub’lar\u0131 Strongly Typed Hubs<\/a> \u00f6zelli\u011fini kullanarak geli\u015ftirmeye \u00f6zen g\u00f6sterece\u011fiz.<\/p>\n
SignalR Server Side<\/strong>
\n\u0130lk olarak kullan\u0131c\u0131 kay\u0131t ve giri\u015f i\u015flemlerinin sorumlulu\u011funu \u00fcstlenen hub’u geli\u015ftirelim. Bunun i\u00e7in \u00f6ncelikle ‘ILoginHub’ aray\u00fcz\u00fcn\u00fc, ard\u0131ndan ‘LoginHub’ s\u0131n\u0131f\u0131n\u0131 a\u015fa\u011f\u0131daki gibi in\u015fa edelim.<\/p>\n
\r\n public interface ILoginHub\r\n {\r\n Task Login(Token token);\r\n Task Create(bool result);\r\n }\r\n<\/pre>\n\r\n public class LoginHub : Hub<ILoginHub>\r\n {\r\n readonly IConfiguration _configuration;\r\n readonly SignalRExampleContext _context;\r\n public LoginHub(IConfiguration configuration, SignalRExampleContext context)\r\n {\r\n _configuration = configuration;\r\n _context = context;\r\n }\r\n public async Task Create(string userName, string password)\r\n {\r\n await _context.Users.AddAsync(new User\r\n {\r\n Password = password,\r\n Username = userName\r\n });\r\n\r\n await Clients.Caller.Create(await _context.SaveChangesAsync() > 0);\r\n }\r\n public async Task Login(string userName, string password)\r\n {\r\n User user = await _context.Users.FirstOrDefaultAsync(u => u.Username == userName && u.Password == password);\r\n Token token = null;\r\n if (user != null)\r\n {\r\n TokenHandler tokenHandler = new TokenHandler(_configuration);\r\n token = tokenHandler.CreateAccessToken(5);\r\n user.RefreshToken = token.RefreshToken;\r\n user.RefreshTokenEndDate = token.Expiration.AddMinutes(3);\r\n await _context.SaveChangesAsync();\r\n }\r\n await Clients.Caller.Login(user != null ? token : null);\r\n }\r\n }\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer ilgili hub kullan\u0131c\u0131 kay\u0131t ve giri\u015f i\u015flemlerinin sorumlulu\u011funu \u00fcstlenmekte ve access token ile birlikte refresh token de\u011ferlerini \u00fcretmektedir. B\u00f6ylece i\u00e7eri\u011fimizin ilk paragraflar\u0131nda da de\u011finildi\u011fi \u00fczere authentication i\u015flemleri i\u00e7in hub’lar \u00fczerinden y\u00fcr\u00fct\u00fclecek \u015fekilde bir tasar\u0131m ger\u00e7ekle\u015ftirilmektedir.<\/p>\n
Devam\u0131nda ise mesaj iletiminden sorumlu olan ‘MessageHub’ isimli class’\u0131da yine ayn\u0131 \u015fekilde in\u015fa edelim.<\/p>\n
\r\n public interface IMessageHub\r\n {\r\n Task ReceiveMessage(string message);\r\n }\r\n<\/pre>\n
\r\n [Authorize]\r\n public class MessageHub : Hub<IMessageHub>\r\n {\r\n public async Task SendMessage(string message)\r\n {\r\n await Clients.Others.ReceiveMessage(message);\r\n }\r\n }\r\n<\/pre>\n
Burada dikkatinizi ‘Authorize’ attribute’una \u00e7ekerim. ‘Authorize’ attribute’u sayesinde, SignalR ile ‘MessageHub’a ba\u011flanabilmek i\u00e7in ge\u00e7erli bir JWT’ye ihtiya\u00e7 duyulmakta ve b\u00f6ylece kullan\u0131c\u0131 denetimi sa\u011flanm\u0131\u015f olmaktad\u0131r. Makalenin ilerleyen sat\u0131rlar\u0131nda rol y\u00f6netimininde nas\u0131l ger\u00e7ekle\u015ftirilebilece\u011fi de ele al\u0131nacakt\u0131r.<\/p>\n
Server taraf\u0131nda son olarak; SignalR servisiyle birlikte, geli\u015ftirilen bu hub’lar\u0131n endpointlerini a\u015fa\u011f\u0131daki gibi tan\u0131mlayal\u0131m.<\/p>\n
\r\n public class Startup\r\n {\r\n public void ConfigureServices(IServiceCollection services)\r\n {\r\n .\r\n .\r\n .\r\n services.AddSignalR();\r\n }\r\n\r\n public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\r\n {\r\n .\r\n .\r\n .\r\n app.UseEndpoints(endpoints =>\r\n {\r\n endpoints.MapHub<LoginHub>("\/login");\r\n endpoints.MapHub<MessageHub>("\/message");\r\n });\r\n }\r\n }\r\n<\/pre>\n
SignalR Client Side<\/strong>
\nYap\u0131sal olarak; kullan\u0131c\u0131 kay\u0131t, giri\u015f ve chat olmak \u00fczere \u00fc\u00e7 a\u015famal\u0131 olacak \u015fekilde son kullan\u0131c\u0131ya t\u00fcm detaylar\u0131yla hitap edecek \u00f6zellikte bir client \u00e7al\u0131\u015fmas\u0131 ger\u00e7ekle\u015ftirece\u011fiz. \u0130lk olarak kullan\u0131c\u0131 kay\u0131t sayfas\u0131n\u0131 geli\u015ftirerek ba\u015flayal\u0131m.
\nCreate.html;<\/u><\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n <script src="signalr.min.js"><\/script>\r\n <script src="jquery.min.js"><\/script>\r\n <script src="bootstrap.min.js"><\/script>\r\n <link rel="stylesheet" href="bootstrap.min.css">\r\n <script>\r\n $(document).ready(() => {\r\n\r\n const login = new signalR.HubConnectionBuilder()\r\n .withUrl("https:\/\/localhost:5001\/login")\r\n .build();\r\n\r\n login.start();\r\n\r\n $("#btnCreateUser").click(() => login.invoke("Create", $("#txtUsername").val(), $("#txtPassword").val()));\r\n\r\n login.on("Create", result => {\r\n if (result)\r\n alert("Kay\u0131t i\u015flemi ba\u015far\u0131yla ger\u00e7ekle\u015ftirildi.")\r\n else\r\n alert("Kay\u0131t ger\u00e7ekle\u015ftirilirken beklenmeyen bir hatayla kar\u015f\u0131la\u015f\u0131ld\u0131.")\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <ul class="nav">\r\n <li class="nav-item">\r\n <a class="nav-link active" href="create.html">Create User<\/a>\r\n <\/li>\r\n <li class="nav-item">\r\n <a class="nav-link" href="login.html">Login<\/a>\r\n <\/li>\r\n <li class="nav-item">\r\n <a class="nav-link" href="chatroom.html">Chat Room<\/a>\r\n <\/li>\r\n <\/ul>\r\n <div class="row">\r\n <div class="col-md-3"><\/div>\r\n <div class="col-md-6">\r\n <h2>Create User<\/h2>\r\n <div class="form-group">\r\n <label>User Name<\/label>\r\n <input type="text" class="form-control" id="txtUsername">\r\n <\/div>\r\n <div class="form-group">\r\n <label>Password<\/label>\r\n <input type="password" class="form-control" id="txtPassword">\r\n <\/div>\r\n <button type="submit" class="btn btn-primary" id="btnCreateUser">Create User<\/button>\r\n <\/div>\r\n <div class="col-md-3"><\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Kaynak kodu incelerseniz e\u011fer ‘\/login’ hub’\u0131na ba\u011flan\u0131lmakta ve ilgili hub \u00fczerinden a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi kullan\u0131c\u0131 kayd\u0131 ger\u00e7ekle\u015ftirilmektedir.
\n $\"Asp.NET$ <\/a>
\nVeritaban\u0131nada g\u00f6z at\u0131ld\u0131\u011f\u0131nda ise,
\n $\"Asp.NET$ <\/a>
\nkayd\u0131n ba\u015far\u0131yla ger\u00e7ekle\u015ftirildi\u011fini g\u00f6receksiniz.<\/p>\n
S\u0131ra kullan\u0131c\u0131 giri\u015f sayfas\u0131n\u0131 olu\u015fturmaya geldi.
\nLogin.html;<\/u><\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n <script src="signalr.min.js"><\/script>\r\n <script src="jquery.min.js"><\/script>\r\n <script src="bootstrap.min.js"><\/script>\r\n <link rel="stylesheet" href="bootstrap.min.css">\r\n <script>\r\n $(document).ready(() => {\r\n\r\n const login = new signalR.HubConnectionBuilder()\r\n .withUrl("https:\/\/localhost:5001\/login")\r\n .build();\r\n\r\n login.start();\r\n\r\n $("#btnLogin").click(() => login.invoke("Login", $("#txtUsername").val(), $("#txtPassword").val()));\r\n\r\n login.on("Login", token => {\r\n if (token) {\r\n localStorage.setItem("accessToken", token.accessToken);\r\n localStorage.setItem("refreshToken", token.refreshToken);\r\n alert("Giri\u015f ba\u015far\u0131l\u0131.");\r\n } else\r\n alert("L\u00fctfen kullan\u0131c\u0131 ad\u0131 ve \u015fifrenizi kontrol ediniz.");\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <ul class="nav">\r\n <li class="nav-item">\r\n <a class="nav-link active" href="create.html">Create User<\/a>\r\n <\/li>\r\n <li class="nav-item">\r\n <a class="nav-link" href="login.html">Login<\/a>\r\n <\/li>\r\n <li class="nav-item">\r\n <a class="nav-link" href="chatroom.html">Chat Room<\/a>\r\n <\/li>\r\n <\/ul>\r\n <div class="row">\r\n <div class="col-md-3"><\/div>\r\n <div class="col-md-6">\r\n <h2>Login<\/h2>\r\n <div class="form-group">\r\n <label>User Name<\/label>\r\n <input type="text" class="form-control" id="txtUsername">\r\n <\/div>\r\n <div class="form-group">\r\n <label>Password<\/label>\r\n <input type="password" class="form-control" id="txtPassword">\r\n <\/div>\r\n <button type="submit" class="btn btn-primary" id="btnLogin">Login<\/button>\r\n <\/div>\r\n <div class="col-md-3"><\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Burada ise kullan\u0131c\u0131 ad\u0131 ve \u015fifre ile bulunulan giri\u015f talebine, server’da ‘\/login’ hub’\u0131 taraf\u0131ndan kar\u015f\u0131l\u0131k verilmekte ve daha \u00f6nce olu\u015fturdu\u011fumuz ‘TokenHandler’ s\u0131n\u0131f\u0131 ile acess token ve refresh token \u00fcretilmektedir. \u00dcretilen token de\u011ferleri local storage \u00fczerinde uygun anahtarlar e\u015fli\u011finde depolanmaktad\u0131r.
\n $\"Asp.NET$ <\/a>
\nLocal storage’a g\u00f6z at\u0131ld\u0131\u011f\u0131nda ise,<\/p>\n
$\"Asp.NET$ <\/a>
\ntoken de\u011ferlerinin kaydedildi\u011fini g\u00f6receksiniz.<\/p>\n
Son olarak kullan\u0131c\u0131lar aras\u0131nda mesajla\u015fman\u0131n ger\u00e7ekle\u015ftirilebilmesi i\u00e7in s\u0131ra chat sayfas\u0131n\u0131n tasarlanmas\u0131na geldi.
\nChatroom.html;<\/u><\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n <script src="signalr.min.js"><\/script>\r\n <script src="jquery.min.js"><\/script>\r\n <link rel="stylesheet" href="bootstrap.min.css">\r\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js"><\/script>\r\n <script src="bootstrap.min.js"><\/script>\r\n <script>\r\n function connectionMessageWrite(state, message) {\r\n $("#connectionMessage").find("div")[1].removeAttribute("class");\r\n $("#connectionMessage").find("div")[1].setAttribute("class", "alert alert-" + state);\r\n $("#connectionMessage").find("div")[1].innerHTML = message;\r\n $("#connectionMessage").show(2000);\r\n }\r\n $(document).ready(() => {\r\n $("#logOut").click(() => {\r\n localStorage.removeItem("accessToken");\r\n localStorage.removeItem("refreshToken");\r\n });\r\n\r\n $(".toast").toast('show');\r\n const message = new signalR.HubConnectionBuilder()\r\n .withUrl("https:\/\/localhost:5001\/message",\r\n { accessTokenFactory: () => localStorage.getItem("accessToken") != null ? localStorage.getItem("accessToken") : "" })\r\n .withAutomaticReconnect([10])\r\n .build();\r\n\r\n message.start()\r\n .then(() => connectionMessageWrite("success", "Ba\u011flant\u0131 ba\u015far\u0131l\u0131."))\r\n .catch(err => connectionMessageWrite("danger", "Ba\u011flant\u0131 ba\u015far\u0131s\u0131z! L\u00fctfen oturum a\u00e7\u0131n\u0131z."));\r\n message.onclose((err) => $("#connectionMessage").hide(2000, () => {\r\n connectionMessageWrite("warning", "Ba\u011flant\u0131 koptu!");\r\n }));\r\n\r\n $("#btnSendMessage").click(() => {\r\n message.invoke("SendMessage", $("#txtMessage").val());\r\n $("#txtMessage").val("");\r\n });\r\n let messageCount = 0;\r\n message.on("ReceiveMessage", message => {\r\n\r\n let object = '<div style="margin-top: 10px;" class="toast" id="toast-' + ++messageCount + '" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">';\r\n object += ' <div class="toast-header">';\r\n object += ' <img src="messageicon.png" width="20px" class="rounded mr-2" alt="...">';\r\n object += ' <strong class="mr-auto">Client<\/strong>';\r\n object += ' <small class="text-muted">Biraz \u00f6nce<\/small>';\r\n object += ' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';\r\n object += ' <span aria-hidden="true">×<\/span>';\r\n object += ' <\/button>'\r\n object += ' <\/div>'\r\n object += ' <div class="toast-body">';\r\n object += message;\r\n object += ' <\/div>';\r\n object += '<\/div>';\r\n $("#divMessage").append(object);\r\n $("#toast-" + messageCount).toast('show');\r\n });\r\n\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <ul class="nav">\r\n <li class="nav-item">\r\n <a class="nav-link active" href="create.html">Create User<\/a>\r\n <\/li>\r\n <li class="nav-item">\r\n <a class="nav-link" href="login.html">Login<\/a>\r\n <\/li>\r\n <li class="nav-item">\r\n <a class="nav-link" href="chatroom.html">Chat Room<\/a>\r\n <\/li>\r\n <li class="nav-item">\r\n <a class="nav-link" style="cursor: pointer;" id="logOut">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <div class="row" id="connectionMessage" style="display: none;">\r\n <div class="col-md-3">\r\n <\/div>\r\n <div class="col-md-6">\r\n <div role="alert">\r\n\r\n <\/div>\r\n <\/div>\r\n <div class="col-md-3">\r\n <\/div>\r\n <\/div>\r\n <div class="row">\r\n <div class="col-md-3"><\/div>\r\n <div class="col-md-6">\r\n <h2>Chat Room<\/h2>\r\n <div class="form-group">\r\n <label>Message<\/label>\r\n <textarea class="form-control" id="txtMessage" placeholder="Mesaj\u0131n\u0131z\u0131 giriniz." rows="3"><\/textarea>\r\n <\/div>\r\n <button type="submit" class="btn btn-primary" id="btnSendMessage">Send Message<\/button>\r\n <\/div>\r\n <div class="col-md-3"><\/div>\r\n <div class="col-md-3"><\/div>\r\n <div class="col-md-6" id="divMessage">\r\n\r\n <\/div>\r\n <div class="col-md-3"><\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer; ‘Authorize’ attribute’u ile i\u015faretlenmi\u015f olan ‘\/message’ hub’\u0131na client’tan eri\u015fim sa\u011flayabilmek i\u00e7in 24.<\/strong><\/em> sat\u0131rda bulunan ‘withUrl’ metodunun ikinci parametresine, i\u00e7erisinde ‘accessTokenFactory’ alan\u0131n\u0131 bar\u0131nd\u0131ran bir object verilmesi ve bu alana server’dan gelen token’\u0131n set edilmesi yeterli olacakt\u0131r. B\u00f6ylece SignalR mimarisi, bahsedilen konfig\u00fcrasyon sayesinde client’tan gelecek olan token de\u011ferini elde edip do\u011frulayacak ve kullan\u0131c\u0131n\u0131n ba\u011flant\u0131 kurmas\u0131n\u0131 sa\u011flayacakt\u0131r. Tabi ki de ge\u00e7ersiz bir token de\u011ferinin kullan\u0131lmas\u0131 yahut token’\u0131n s\u00fcresinin dolmas\u0131 neticesinde hub’a ba\u011flant\u0131 sa\u011flanamayacak ve b\u00f6ylece denetim sa\u011flanm\u0131\u015f olacakt\u0131r.<\/p>\n
\u0130lgili sayfan\u0131n i\u015flevsel a\u00e7\u0131dan ekran g\u00f6r\u00fcnt\u00fcs\u00fc a\u015fa\u011f\u0131daki gibidir;
\n $\"Asp.NET$ <\/a>
\nToken ald\u0131ktan sonra client’lar aras\u0131 mesaj iletimi ise a\u015fa\u011f\u0131daki gibidir;
\n $\"Asp.NET$ <\/a><\/p>\n
SignalR \u0130le Refresh Token Kullan\u0131m\u0131<\/h3>\n
SignalR ile birlikte refresh token’\u0131 kullanabilmek i\u00e7in server’\u0131n refresh token stratejisini benimsemesi gerekmektedir. Bizler bu i\u00e7eri\u011fimizin yukar\u0131daki sat\u0131rlar\u0131nda JWT mekanizmas\u0131n\u0131n in\u015fas\u0131n\u0131 ele al\u0131rken refresh token in\u015fas\u0131n\u0131 da olu\u015fturmu\u015ftuk. Lakin ekstradan refresh token \u00fczerinden giri\u015f kodunu da geli\u015ftirmemiz gerekmektedir. Bunun i\u00e7in ‘\/login’ hub’da a\u015fa\u011f\u0131daki gibi bir geli\u015ftirme ger\u00e7ekle\u015ftirebiliriz;<\/p>\n
\r\n public class LoginHub : Hub<ILoginHub>\r\n {\r\n readonly IConfiguration _configuration;\r\n readonly SignalRExampleContext _context;\r\n .\r\n .\r\n .\r\n public async Task RefreshTokenLogin(string refreshToken)\r\n {\r\n User user = await _context.Users.FirstOrDefaultAsync(x => x.RefreshToken == refreshToken);\r\n Token token = null;\r\n if (user != null && user?.RefreshTokenEndDate > DateTime.Now)\r\n {\r\n TokenHandler tokenHandler = new TokenHandler(_configuration);\r\n token = tokenHandler.CreateAccessToken(1);\r\n\r\n user.RefreshToken = token.RefreshToken;\r\n user.RefreshTokenEndDate = token.Expiration.AddMinutes(1);\r\n await _context.SaveChangesAsync();\r\n }\r\n await Clients.Caller.Login(user != null ? token : null);\r\n }\r\n }\r\n<\/pre>\n
Ard\u0131ndan client’ta a\u015fa\u011f\u0131daki gibi geli\u015ftirme yap\u0131lmas\u0131 gerekmektedir;
\nChatroom.html<\/u>;<\/p>\n
\r\n .\r\n .\r\n .\r\n const message = new signalR.HubConnectionBuilder()\r\n .withUrl("https:\/\/localhost:5001\/message",\r\n { accessTokenFactory: () => localStorage.getItem("accessToken") != null ? localStorage.getItem("accessToken") : "" })\r\n .withAutomaticReconnect([10])\r\n .build();\r\n\r\n function start() {\r\n message.start()\r\n .then(() => connectionMessageWrite("success", "Ba\u011flant\u0131 ba\u015far\u0131l\u0131."))\r\n .catch(err => connectionMessageWrite("danger", "Ba\u011flant\u0131 ba\u015far\u0131s\u0131z! L\u00fctfen oturum a\u00e7\u0131n\u0131z."));\r\n }\r\n start();\r\n\r\n message.onclose(() => $("#connectionMessage").hide(2000, () => {\r\n const login = new signalR.HubConnectionBuilder()\r\n .withUrl("https:\/\/localhost:5001\/login")\r\n .build();\r\n connectionMessageWrite("warning", "Ba\u011flant\u0131 koptu!");\r\n login.start().then(() => {\r\n login.invoke("RefreshTokenLogin", localStorage.getItem("refreshToken"));\r\n login.on("login", token => {\r\n localStorage.setItem("accessToken", token.accessToken);\r\n localStorage.setItem("refreshToken", token.refreshToken);\r\n message.connection.accessTokenFactory = token.accessToken;\r\n start();\r\n });\r\n });\r\n }));\r\n .\r\n .\r\n .\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer ‘\/message’ hub’\u0131na olan ba\u011flant\u0131 close oldu\u011fu zaman ‘onclose’ fonksiyonu tetiklenmekte ve ilgili event i\u00e7erisinde ‘\/login’ hub’\u0131na ba\u011flant\u0131 sa\u011flanarak server’da ki ‘RefreshTokenLogin’ metoduna refresh token de\u011feri ileti olarak g\u00f6nderilmektedir. Sunucuda do\u011frulanan refresh token, kullan\u0131c\u0131ya dair yeni bir access token \u00fcretilmesini sa\u011flamakta ve bu token de\u011feri server taraf\u0131ndan tetiklenen client’ta ki ‘Login’ fonksiyonu(24.<\/strong><\/em> sat\u0131r) arac\u0131l\u0131\u011f\u0131yla g\u00f6nderilmekte ve client taraf\u0131ndan kar\u015f\u0131lanmaktad\u0131r. Ard\u0131ndan client, elde edilen bu token de\u011feri ile ‘\/message’ hub’\u0131nda ki ‘accessTokenFactory’ de\u011ferini de\u011fi\u015ftirmekte ve tekrardan ilgili hub’a ba\u011flant\u0131y\u0131 tazelemektedir. Tabi burada otomatik ba\u011flant\u0131<\/a> konfig\u00fcrasyonunun kullan\u0131ld\u0131\u011f\u0131na dikkatinizi \u00e7ekmekte fayda g\u00f6rmekteyim.<\/p>\n
En nihayetinde yap\u0131lan bu refresh token yap\u0131lanmas\u0131 a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi davran\u0131\u015f sergilemekte ve e\u015fzamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 hi\u00e7bir zaman sekteye u\u011fratmayacak \u015fekilde i\u015flevselli\u011fini g\u00f6stermektedir.
\n
$\"Asp.NET$ <\/a>
\u00d6rnek ama\u00e7l\u0131 farazi bir s\u00fcreli\u011fine olu\u015fturulmu\u015f token de\u011ferinin refresh token ile kullan\u0131c\u0131 talebi olmaks\u0131z\u0131n temsili yenilenmesi…<\/p><\/div><\/p>\n
SignalR \u0130le Rol Y\u00f6netimi<\/h3>\n
SignalR ile rol y\u00f6netimi, bildi\u011finiz Asp.NET Core MVC yahut Web API ile birebir ayn\u0131 mant\u0131kta i\u015flemektedir. \u00d6rne\u011fin; nas\u0131l ki Asp.NET Core Web API’da ‘Authorize’ olan controller’lara rol tan\u0131mlayabilmek i\u00e7in ‘Roles=”…”‘ propertysi kullan\u0131l\u0131yorsa benzer mant\u0131kla SignalR’da ki hub’lar i\u00e7inde ayn\u0131 \u00f6zelli\u011fin kullan\u0131lmas\u0131 gerekmektedir.<\/p>\n
S\u00f6zgelimi ‘\/message’ hub’\u0131n\u0131 ele al\u0131rsak;<\/p>\n
\r\n [Authorize(Roles = "Admin")]\r\n public class MessageHub : Hub<IMessageHub>\r\n {\r\n public async Task SendMessage(string message)\r\n {\r\n await Clients.Others.ReceiveMessage(message);\r\n }\r\n }\r\n<\/pre>\n
\u015feklinde tan\u0131mlanmas\u0131, bu hub’a ‘Admin’ rol\u00fcne sahip olan yetkili ki\u015filerin eri\u015febilece\u011fini ifade etmektedir.<\/p>\n
Peki kullan\u0131c\u0131n\u0131n \u00fcstlenece\u011fi rol\u00fc nereden belirleyece\u011fiz?<\/strong>
\nAsl\u0131nda bu sorununda cevab\u0131 yine bilinen klasik rol tan\u0131mlamas\u0131nda yatmaktad\u0131r. Yani claim yap\u0131lanmas\u0131nda. Kullan\u0131c\u0131 giri\u015f talebinde bulunup, do\u011fruland\u0131\u011f\u0131 vakit, token de\u011ferinin \u00fcretilebilmesi i\u00e7in yukar\u0131larda olu\u015fturdu\u011fumuz ‘TokenHandler’ s\u0131n\u0131f\u0131 kullan\u0131lmaktad\u0131r. Haliyle ilgili s\u0131n\u0131f i\u00e7erisinde ‘JwtSecurityToken’ nesnesinin ‘claims’ parametresi bu i\u015flem i\u00e7in yeterli olacakt\u0131r. \u015e\u00f6yle ki;<\/p>\n
\r\n public class TokenHandler\r\n {\r\n readonly IConfiguration _configuration;\r\n .\r\n .\r\n .\r\n public Token CreateAccessToken(int duration)\r\n {\r\n .\r\n .\r\n .\r\n JwtSecurityToken securityToken = new JwtSecurityToken\r\n (\r\n issuer: _configuration["JWT:Issuer"],\r\n .\r\n .\r\n .\r\n claims: new List<Claim>\r\n {\r\n new Claim(ClaimTypes.Role, "Admin")\r\n }\r\n );\r\n .\r\n .\r\n .\r\n }\r\n .\r\n .\r\n .\r\n }\r\n<\/pre>\n
Yukar\u0131daki kaynak kodun 20.<\/strong><\/em> sat\u0131r\u0131nda, \u00fcretilecek token’a ‘Admin’ rol\u00fc eklenmekte ve ilgili token ile yap\u0131lan isteklerde ‘Authorize(Roles = “Admin”)’ attribute’una kar\u015f\u0131l\u0131k do\u011frulama ba\u015far\u0131yla ger\u00e7ekle\u015ftirilmektedir.<\/p>\n
Client Web D\u0131\u015f\u0131nda Console App. yahut Windows Form Olursa?<\/h3>\n
Yaz\u0131 serimizin sonraki makalelerinde, SignalR ile etkile\u015fime giren client’lar\u0131n web d\u0131\u015f\u0131nda farkl\u0131 platformlardan olma durumunu ayr\u0131 bir ba\u015fl\u0131k alt\u0131nda tam teferruatl\u0131 inceleyece\u011fiz. Lakin yeri gelmi\u015fken farkl\u0131 platformlarda da authentication durumunun nas\u0131l ger\u00e7ekle\u015ftirildi\u011fine dair detaya de\u011finmekte fayda g\u00f6rmekteyim.<\/p>\n
E\u011fer ki client olarak web d\u0131\u015f\u0131nda bir Console Application yahut Windows Form’da \u00e7al\u0131\u015f\u0131yor ve bir yandan da authentication kullan\u0131yorsan\u0131z her ikisinde de a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\n
\r\n class Program\r\n {\r\n static HubConnection connection;\r\n async static Task Main(string[] args)\r\n {\r\n connection = new HubConnectionBuilder().WithUrl("https:\/\/localhost:5001\/message",\r\n options => options.AccessTokenProvider = () => Task.FromResult("...Token Value...")).Build();\r\n await connection.StartAsync();\r\n Console.WriteLine(connection.State);\r\n connection.On<string>("receiveMessage", message =>\r\n {\r\n Console.WriteLine($"--->{message}");\r\n });\r\n\r\n while (true)\r\n {\r\n Console.WriteLine("G\u00f6nderilecek mesaj\u0131 yaz\u0131n\u0131z.");\r\n await connection.InvokeAsync("SendMessage", Console.ReadLine());\r\n }\r\n }\r\n }\r\n<\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere 7.<\/strong><\/em> sat\u0131rdaki ‘AccessTokenProvider’ \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla elde edilen token de\u011feri ba\u011flant\u0131 talebine verilerek, connection ba\u015far\u0131yla sa\u011flanabilmektedir.<\/p>\n
\u0130\u015fte bu kadar…<\/p>\n
Nihai olarak, e\u015fzamanl\u0131 uygulamalarda authentication, authorization, refresh token gibi yap\u0131land\u0131rmas\u0131 zor ve a\u011f\u0131r olan i\u015flemlerin nas\u0131l efektif bir \u015fekilde in\u015fa edildi\u011fini ad\u0131m ad\u0131m irdelemi\u015f bulunmaktay\u0131z. Umar\u0131m kalemim gam teline vurmu\u015f, m\u00fcrekkebim anla\u015f\u0131labilir olmu\u015ftur. Bu noktaya kadar sabredip okuyan, \u00f6zellikle okurken makaleye e\u015flik eden siz de\u011ferli okuyucular\u0131ma te\u015fekk\u00fcr ederim…<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n
Not: \u00d6rnek server ve UI uygulamalar\u0131n\u0131 indirebilmek i\u00e7in a\u015fa\u011f\u0131daki linklere t\u0131klay\u0131n\u0131z.<\/p>\n
\n
(Server)SignalRAuthorizationExample<\/a><\/li>\n
(Client-Web-Console)SignalRAuthorizationExampleUI<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Klasik web uygulamalar\u0131nda oldu\u011fu gibi SignalR mimarisiyle real time \u00e7al\u0131\u015fan uygulamalarda da kullan\u0131c\u0131 do\u011frulama ve yetkilendirme ihtiyac\u0131 hissedebilir ve e\u015fzamanl\u0131 veri ak\u0131\u015f\u0131 esnas\u0131nda tan\u0131ml\u0131 kullan\u0131c\u0131lar d\u0131\u015f\u0131nda etkile\u015fime m\u00fcdahale olunmas\u0131n\u0131 istemeyebiliriz. Bu i\u00e7eri\u011fimizde, bu...<\/p>\n","protected":false},"author":1,"featured_media":17653,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3760],"tags":[3818,3819,3813,3814,3815,3817,3820,3822,3823,3816,3821],"class_list":["post-17985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-signalr","tag-accesstokenfactory","tag-signalr-accesstokenfactory","tag-signalr-authentication","tag-signalr-authorization","tag-signalr-jwt","tag-signalr-refresh-token","tag-signalr-refresh-token-kullanimi","tag-signalr-rol-yonetimi","tag-signalr-role-management","tag-signalr-token","tag-using-signalr-refresh-token"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/17985","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=17985"}],"version-history":[{"count":77,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/17985\/revisions"}],"predecessor-version":[{"id":18071,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/17985\/revisions\/18071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/17653"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=17985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=17985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=17985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}