I have built a relatively simple website which is using ASP.NET Core Web App, Razor Page with .NET version 7. I’m just using my own authentication system (no Identity service). I was adding Google Authentication to the project using this guide.
Problem
When I click my button to sign-in with Google, I get a popup asking me to login (so far, so good).
But when I click “Next” on that popup, it says it cannot log me in.
I am having different problems with different browsers but I’m trying to get it working with one (Chrome) first, then I will sort out the others.
Code involved
Program.cs for Content Security Policy, and Cross Origin Opener Policy
builder.Services.AddAuthentication(options =>
{
options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = GoogleDefaults.AuthenticationScheme;
})
.AddCookie()
.AddGoogle(options =>
{
options.ClientId = builder.Configuration["Authentication:Google:ClientId"];
options.ClientSecret = builder.Configuration["Authentication:Google:ClientSecret"];
});
app.Use(async (context, next) =>
{
context.Response.Headers.Add("Content-Security-Policy-Report-Only", "script-src 'self' https://accounts.google.com/gsi/client;" +
" frame-src 'self' https://accounts.google.com/gsi/;" +
" connect-src 'self' https://accounts.google.com/gsi/");
context.Response.Headers.Add("Cross-Origin-Opener-Policy", "same-origin-allow-popups");
await next();
});
appsettings.json
"Authentication": {
"Google": {
"ClientId": "<CLIENT-ID>",
"ClientSecret": "<CLIENT-SECRET>"
}
}
_Layout.cshtml, including the Google authentication html:
<head>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<div id="g_id_onload"
data-client_id="<CLIENT-ID>"
data-login_uri="http://localhost:5250"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
I think my Google settings are setup fine.
and
Any ideas on how to resolve this would be greatly appreciated.