How can I integrate Google and Microsoft authentication with JWT Token in Blazor Webassembly? - asp.net-core

I have a Blazor Webassembly app (Asp Net Core hosted).
I secured my app using JWT Token. Client makes a request to Server and if the request is valid, server sends JWT Token to client and token is saved in local storage. Client reads the token in storage and this way authentication is handled.
I followed the following practice from Chris Sainty :
https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-webapi-aspnet-core-identity/
Now I want to enable users to login app with their Google or Microsoft accounts. What would be the best approach for this?
I tried Google and Microsoft authentication on server-side but I couldn't pass the token to client. (because there is no request from client..)

Your response exist in these links:
Google Authentication by OIDC
Microsoft Account using MSAL
But the details requires studying related Service and js files.
You can study sources of Remote Authentication Service in Github for both oidc and msal in following sites:
Web Assembly Authentication Service
Personally I suggest you to use Microsoft Account which also allow authentication through Google and other providers too. Altough oidc provider is more oidc than msal approach. Microsot implemented Code Authorization flow in msal while Google uses implicit token flow (do not forget that these happen in client side). There is two different js files for implementing the underlying requests so I do not think even the combining them work in this way. May be it is better you code it your self by implementing an authentication state provider which uses JS Interop.
You also can see following example which may help you by DotNet guys:
Example of Web Assembly

Related

How to send a JWT from my back-end server to my front-end after Google OAuth2 Authorization flow

I am creating an application with a React front-end and a Java Spring Boot back-end.
My login flow looks like this:
A user clicks on login on the front end
User is redirected to the Google Oauth authorization endpoint on my server
OAuth 2.0 Authorization flow happens: User is redirected to Google and logs in. Google interacts with my server first exchanging an authorization code and then a JWT access token. My server now has the JWT access token for the user.
ISSUE: I now need to redirect the JWT token to my React front-end so that the token can be saved and used every time the user wants to request access to a protected resource on my server.
Is there now an industry standard/best practice for redirecting the token to my React front-end from the server?
There are similar questions on this subject on Stack Overflow, however they are at least 3 years old, e.g. How to provide frontend with JSON web token after server authentication?
Since then the implicit flow has been deprecated, storing JWTs in local storage is no longer recommended, and https://datatracker.ietf.org/doc/html/rfc6750 explicitly discourages passing bearer tokens to the front end in a redirect URL.
I was wondering if anyone knows of an up to date solution for this problem.
There's a draft IETF BCP for OAuth 2.0 for Browser-Based Apps - see here. Basically, it's very similar to native mobile apps using authorization code with PKCE (proof key for code exchange).
FWIW I agree implicit flow shouldn't be used, but IMO you shouldn't be using authorization code flow without PKCE, as this flow is for server side rendered web apps.
EDIT - Auth0 (one of the most popular CIAM solutions on the market) docs say the same thing - see here.
If the Client is a Single-Page App (SPA), an application running in a
browser using a scripting language like JavaScript, there are two
grant options: the Authorization Code Flow with Proof Key for Code
Exchange (PKCE) and the Implicit Flow with Form Post. For most cases,
we recommend using the Authorization Code Flow with PKCE...
Don't.
You seem to mix 2 issues here.
First, you would like to use OIDC for authentication in your SPA. For this you would use OIDC Implicit Flow or Authorization Code Flow with PKCE.
Second, you would like to delegate authentication to google instead of doing it yourself. Basically this is known as federation - you trust external Identity Provider.
The full-blown version would be to setup your own Identity-Provider server (like e.g. keycloak) and configure federation to google there. Your SPA would initiate OIDC against your Identity Provider and wouldn't even know that google did the authentication. You could also easily add further Identity Providers (e.g. facebook) if necessary.
An easier workaround would be to initiate OIDC login from your SPA directly to Google. This way your SPA would receive token directly from google and you would need to protect your own backend as a resource-server accepting and validating those tokens. Adding further Identity-Providers like facebook would be a challenge.

As a client how do I request an access token from the Identity Server using client ID & secret then use the token to gain access to the API?

Hello new to stack overflow and programming.
I have a simple ASP.NET Core web app and am using ngrok to host my app, and I want to be able to call to a company's identity server so that I have an access token to be able to access their API and create Webhooks to receive notifications for different events.
I already have a
clientID
Secret
URL (given by ngrok)
for the request body to receive the response.
How do I go about doing this?
You need to use Microsoft authentication libraries to achieve this.which is very easy to implement.
MSAL Library is just an implementation for enabling developers to acquire tokens from the Microsoft identity platform endpoint.
Since you already have ClientID, Secret and Redirect URL you can get a token as Acquire a token and call Microsoft Graph API.
However, I think what you really want is to integrate AAD. You can easily enable AAD authentication for your .NET web application. It uses OWIN middleware.

Using Spotify authentication with Blazor WASM

I want to login an user optional with Spotify (only) as identity provider in asp.net core from an Blazor WASM page.
I use that example to configure the server. I also searched in the Microsoft Docs, but I didn't found an example to start an authentication request. Currently I'm not redirected to Spotify OAuth login page.
I don't know how I start the login flow. Is there a "default" route to start the ASP.NET Core login flow? Or is there any good tutorial to start that?
The Application should have an login button and I need the token on server side and on client side. I would prefer to do the authentication on the server side, because i don't want to have the client secret on the client side.
Are there any best practices to solve this problem?
From you server controller you can call the ChallengeAsync method to start the configured authentication schema.
If you are requesting a token from a SPA application (like Blazor WASM), then use Authorization Code With PKCE. PKCE does not require a client secret so it is safe to request if from the client side application.
Otherwise I would use Authorization Code Flow and exchange the code for the token on the server application. Basically the sample you linked does this by utilizing a AspNet.Security.OAuth.Spotify nuget packege.
(Spotify uses oauth 2. I would recommend to pick the authentication flow that suits your use case. For example the client secret should not be in any SPA application.)
There is a good summary table on Spotify docs.

Authorization server, Oauth2 and auth0

I have some questions because I don't understand well how implement authentication flow.
Reading some docs I found image below
Now, I understand the access token and refresh token, but I don't think I understand how to implement it.
I have a project where frontend is angular and backend is node.js koa with microservices architecture and gateways in front of them.
I can use auth0 like oauth2 authorization server with users stored inside?
How? In auth0 docs there are tons of instructions and I cannot understand which is right for me.
I have to intercept login, logout and sign up by gateway and redirect to auth0 or I have to do this inside my user microservice?
Does a user table make sense in my project(s) where there are also personal info table and company table?
Is in this way the authorization server sso for all my company projects?
Can I add external company's SSO?
Can I add Google sign in?
You can follow Auth0 Angular Quickstarts to implement your scenario. It exactly shows step by step implementation. https://auth0.com/docs/quickstart/spa/angular2/01-login
From architecture level, you are doing following:
Frontend application (angular) uses auth0-spa-js to implement Authorization Code flow + PKCE to implement login flow. It simply performs user authentication and obtain a token which request API scope as well. To request API permission, add the audience parameter when initiating the login flow.
Once you obtain the token, access token can be used to call your backend API.
In the backend server , you should implement API authorization (It validates the access token and check token have necessary scopes/ permission). https://auth0.com/docs/quickstart/backend/nodejs/01-authorization
Above API authoriazatio quickstart uses express middleware. This blog post explains how to do the same in koa . https://auth0.com/blog/building-and-securing-a-koa-and-angular2-app-with-jwt/
you have a very broad architectural implementation question for your specific organization case.
I would recommend you follow the below user management model which takes care of
Simple API for Authentication, Registration and User Management using NodeJS + Koa + Passport combination.
You can deploy the API to Heroku and test the API using Postman.
You can use the NodeJS Global Error Handler Middleware and you do not have to implement any reduntant local error handler.
As a best practice, use the node JWT middleware that checks the JWT token received in the http request from the client is valid before allowing access to the API, if the token is invalid a "401 Unauthorized" response is sent to the client. This JWT API authorization can be done at your gateway level itself before your microservices.
Finally the Koa + Passport user service contains the core business logic for user authentication and uses Koa-Redis for session management in the node api, it encapsulates all interaction with the mongoose user model and exposes a simple set of methods which are used by the users controller.
Moroever Koa + Passport supports Single sign-on with OpenID and OAuth which answers your other question related to SSO.
Here too you can find that KOA is best suited for microservices as you have already chosen the same. Overlaying authentication + user management using the same infrastructure will prove to be very versatile and extensible.
https://mherman.org/blog/user-authentication-with-passport-and-koa/
In order to connect to an external SSO provider, you could use the nodejs oauth2 client api as follows which allows you to connect your node backend to connect to an external SSO server.
https://www.npmjs.com/package/client-oauth2
For SSO using Google/Gmail, it is best to use SAML based SSO provided by google.
Security Assertion Markup Language (SAML) is an XML-based framework for authentication and authorization between two entities: a Service Provider and an Identity Provider. The Service Provider agrees to trust the Identity Provider to authenticate users. In return, the Identity provider generates an authentication assertion, which indicates that a user has been authenticated.
SAML is a standard single sign-on (SSO) format. Authentication information is exchanged through digitally signed XML documents. It's a complex single sign-on (SSO) implementation that enables seamless authentication, mostly between businesses and enterprises.
below link provides details of how to setup a SAML/SSO service into google from your application.
https://support.google.com/a/answer/6087519?hl=en

Integrating federated OAuth2 login into an API service?

We're building a public API and clients using this API will need to authenticate, and we proposed to expose an OAuth2 API for this purpose.
However, we also have a need for authentication to be federated, so we see clients talking OAuth 2 with our API, and our API talking OAuth1/2 or SAML2 to the identity provider in the background.
The full flow being:
Client talks OAuth2 to our API.
At the start of this flow, our API redirects the client to a "Choose Your Federated Provider" HTML page.
On choosing a provider, our API talks OAauth1/2 with the provider, passing any redirects back to the client, so the user can provide login details.
Our API exchanges the access code for a access token and refresh token (API keeps these private, and uses them even if the client is off-line).
Our API generates an access code and passes this to the client.
Client exchanges the access code for access token.
The provider supplied access token/refresh token is use by the API in the background, for example to keep a Google calendar up to date, and not passed to the client.
I've not found any examples of this being done with an API. So, what is the established model for providing federated authentication for an API service?
Check out some of the info that Ping Identity provides on their OAuth Essentials page. Specifically, there is a White Paper entitled, "A Standards-based Mobile App IdM Architecture White Paper" (free w/Registration) that you should look at that talks about how you would use SAML + OAuth to secure Native Mobile Apps that require Federation. [Note: I do work for Ping]. It lays out the info flows and token exchanges that need to happen to solve this use case as well as other OAuth related cases.
HTH - Ian