'Error with Google Login and ASP.NET Core Web API
I have a Blazor client with a Asp.net Core Web API using a custom implementation of JWT for authentication and I'm trying to implement an external identity provider (Google OAuth).
From Blazor when a user clicks the link to auth with google, is calling the following API endpoint:
public async Task<IActionResult> ExternalLogin([FromBody] string provider)
{
var redirectUrl = "/ExternalLoginCallback";
AuthenticationProperties properties = _repository.Account.ExternalLogin(provider, redirectUrl);
return Challenge(properties, provider);
}
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.Configure<AppSettings>(Configuration.GetSection(AppSettings.JWTSettings));
services.Configure<AppSettings>(Configuration.GetSection(AppSettings.EmailConfiguration));
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy",
builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
});
services.ConfigureSqliteContext(Configuration);
services.ConfigureLoggerService();
services.ConfigureDependencyInjection(Configuration);
services.AddControllers();
services.AddAutoMapper();
services.AddIdentity<User, IdentityRole>(opt =>
{
opt.Password.RequiredLength = 0;
opt.Password.RequireDigit = false;
opt.Password.RequireUppercase = false;
opt.Password.RequiredUniqueChars = 0;
opt.Password.RequireNonAlphanumeric = false;
opt.User.RequireUniqueEmail = true;
opt.SignIn.RequireConfirmedEmail = true;
})
.AddEntityFrameworkStores<RepositoryContext>()
.AddDefaultTokenProviders();
services.AddAuthentication()
.AddGoogle(GoogleDefaults.AuthenticationScheme, conf =>
{
var googleAuth = Configuration.GetSection("Google");
conf.ClientId = googleAuth["ClientId"];
conf.ClientSecret = googleAuth["ClientSecret"];
conf.SignInScheme = IdentityConstants.ExternalScheme;
});
if (Environment.IsDevelopment())
{
services.ConfigureAuthDevelopment(Configuration);
}
else
{
}
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebAssemblyDebugging();
}
else
{
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseCors("CorsPolicy");
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapFallbackToFile("index.html");
});
}
Edge Dev Console error:
Access to fetch at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=******-o1gn4lob5hcknjggl10837m3ea5om5b4.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Flocalhost%3A44313%2Fsignin-google&scope=openid%20profile%20email&state=CfDJ8Ok9DyPEKDNCp3gn7utujrjiLfNm4KnoB6RC-cf3g01gBFzNSAqo54K-GaMudVevgRKaJZbcT5_O9S-jCGixs0i5SPY_CUxvM-l_DDsckOP0iHQMgyncA_-Ce_8vgCuxeozNkRWOHDJWar174-TkOgulJpYTr7b82MtOkUs3FOmiqpJ42YU2Q74y9imEFsgk8lynBRzb8Qqvh7P5kMuIg85QNnpjeO6lFbvefLDXPIzzE2r0n5sYlo1vzUG2sRbtRNgfThR6TvF-LPuMGygVCRI' (redirected from 'https://localhost:44313/api/account/ExternalLogin?provider=Google') from origin 'https://localhost:44313' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
dotnet.5.0.2.js:1 GET https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=*******-o1gn4lob5hcknjggl10837m3ea5om5b4.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Flocalhost%3A44313%2Fsignin-google&scope=openid%20profile%20email&state=CfDJ8Ok9DyPEKDNCp3gn7utujrjiLfNm4KnoB6RC-cf3g01gBFzNSAqo54K-GaMudVevgRKaJZbcT5_O9S-jCGixs0i5SPY_CUxvM-l_DDsckOP0iHQMgyncA_-Ce_8vgCuxeozNkRWOHDJWar174-TkOgulJpYTr7b82MtOkUs3FOmiqpJ42YU2Q74y9imEFsgk8lynBRzb8Qqvh7P5kMuIg85QNnpjeO6lFbvefLDXPIzzE2r0n5sYlo1vzUG2sRbtRNgfThR6TvF-LPuMGygVCRI net::ERR_FAILED
[
]
Edge Dev Console network header
Request URL: https://localhost:44313/api/account/ExternalLogin?provider=Google
Request Method: GET
Status Code: 302
Remote Address: [::1]:44313
Referrer Policy: strict-origin-when-cross-origin
My assumption is that Challenge() produces a redirect which is then "blocked by CORS policy" from Blazor.
What would be the simplest yet more efficient way to implement it?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
