Get third party loggedin user data in Blazor WebAssembly - blazor-webassembly

Question

I'm developing an app and successfully made the login with Google. The problem is that I have no idea on how to get the user email at least.
What I have done previously:
First I experimented with the default user login "framework" which can be selected on project creation and then I added the third party login. The problem is that too many tables are created with that method and i only need one table for the user data. I also want to be me to decide which columns there will be in the user table. Also, with that login method I get redirected to a razor page to make the login, and then I'm redirected back to the blazor app again. Which is not very pretty since I only want to make the login with google.
Situation now:
I'm replicating the login of this repo so I don't get redirected to a razor page to make the login:
https://github.com/dotnet-presentations/blazor-workshop
I changed the startup to add Google to options:
services
.AddAuthentication(options =>
{
options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
})
.AddCookie()
.AddTwitter(twitterOptions =>
{
twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey"];
twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];
twitterOptions.Events.OnRemoteFailure = (context) =>
{
context.HandleResponse();
return context.Response.WriteAsync("<script>window.close();</script>");
};
})
.AddGoogle(googleOptions =>
{
googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];
googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];
googleOptions.Events.OnRemoteFailure = (context) =>
{
context.HandleResponse();
return context.Response.WriteAsync("<script>window.close();</script>");
};
});
In blazor app I have the link to login in:
<a class="sign-in" href="user/signin">Sign in</a>
In the server I have:
[HttpGet("user/signin")]
public async Task SignIn(string redirectUri)
{
if (string.IsNullOrEmpty(redirectUri) || !Url.IsLocalUrl(redirectUri))
{
redirectUri = "/";
}
await HttpContext.ChallengeAsync(
Microsoft.AspNetCore.Authentication.Google
.GoogleDefaults.AuthenticationScheme,
new AuthenticationProperties { RedirectUri = redirectUri });
}
So, how do I get the user data from this point in the server?

Answer 1

Got it.
When accessing a protected recource on the server, usually an API to get data from, we somehow will have the autenticated user data under "User" variable by defining #using Microsoft.AspnetCore.Authorization.
Here is an example with the email captured on the bottom:
[Route("orders")]
[ApiController]
[Authorize]
// [Authorize]
public class OrdersController : Controller
{
private readonly PizzaStoreContext _db;
public OrdersController(PizzaStoreContext db)
{
_db = db;
}
[HttpGet]
public async Task<ActionResult<List<OrderWithStatus>>> GetOrders()
{
string g = User.Identity.Name;
string email = User.FindFirstValue(ClaimTypes.Email);
With that i can get the user id on the users table and get any kind of that that i want from the database.
I also would like que get the profile picture from google...
################################
Edited:
To do so just add this option on startup file inside the google service
googleOptions.ClaimActions.MapJsonKey("profilepic", "picture");
And then we can gab the email like so in a protected resource in the server
string pic = User.FindFirstValue("profilepic");
Now i would like to know how to grab the profile picture on the client side....