Creating a chat application using React and ASP.​NET Core - Part 4

[JuergenGutsch]

Written on 01.03.2018 20:55:09

URL: http://asp.net-hacker.rocks/2018/03/01/react-chat-part4.html

[JuergenGutsch]

Comment written by J Khalaf on 02.10.2018 15:45:24

Thanks for the article Jürgen. I'm slightly confused. Shouldn't there be a login button pointing to the login UI of Identity Server 4? I had a look at the React code and I couldn't see the login button that would take me to the login page on Identity Server!

[JuergenGutsch]

Comment written by Jürgen Gutsch on 02.10.2018 16:07:05

Hi @Ciwan1859:disqus,
Thanks for the comment :)
The React app is hosted on /Home/Index/ and the HomeController is marked with the authorize attribute. If the user isn't authorized, he gets redirected to the IdentityServer. Only Authorized users can access the React app. In this simple and basic demo authentication isn't done in react.

[JuergenGutsch]

Comment written by J Khalaf on 03.10.2018 14:45:50

ah that makes sense now, thank you Jürgen :)

[hyunoosung]

Hi, thanks for the valuable article. I was looking for this sample for weeks :D Two things I found difficulty applying to my project.

1. "SPA logon using React and IdentityServer4"

   • It seems that the sample uses oidc mvc client where I am trying to setup sginalR hub for WebAPI using GrantTypes.Implicit. In your sample, AddAuthentication starts with...

     services.AddAuthentication(options =>
             {
                 options.DefaultScheme = "Cookies";
                 options.DefaultChallengeScheme = "oidc";
             })
             .AddCookie("Cookies")
             .AddOpenIdConnect("oidc", options =>
             {
                 options.SignInScheme = "Cookies";
     
                 options.Authority = "http://localhost:5002";
                 options.RequireHttpsMetadata = false;
     
                 options.TokenValidationParameters.NameClaimType = "name";
     
                 options.ClientId = "reactchat";
                 options.SaveTokens = true;
             });

     where I want to change this as below...

     services.AddAuthentication("Bearer")
             .AddIdentityServerAuthentication(options =>
             {
                 options.Authority = "http://localhost:5002";
                 options.RequireHttpsMetadata = false;
     
                 options.ApiName = "chatapi";
             });
     
         services.AddCors(options =>
         {
             // this defines a CORS policy called "default"
             options.AddPolicy("default", policy =>
             {
                 policy.WithOrigins("http://localhost:8080")
                     .AllowAnyHeader()
                     .AllowAnyMethod();
             });
         });

     so I can logon to IdentityServer from javascript client either react / vue.js, then connect to signalR hub that is served from separate api say http://localhost:5003.

2. UserTracker gets exception when another browser enters the application with differenct identity. The exception is as follow. Cannot access a disposed object. Object name: 'ChatHub'.

[JuergenGutsch]

Hi @hyounoo Thanks for your comment. I'll have a look and hope I'm able to help you. Thinks change fast theses days and I anyway need to update this blog posts.

[hyunoosung]

wow thanks for your quick response!! I was also looking at this framework called dotnetify. It uses SignalR hub and MVVM pattern that makes implementing apps really easy. Just not able to get it working with IdentityServer though... http://dotnetify.net/core/examples/securepage

[JuergenGutsch]

It seems dotnetify doesn't cover security at all. Will have a look at it as well