I am using Google Identity authentication without any library (using only pure JS and html). I followed step by step guide in https://developers.google.com/identity/gsi/web/guides/overview . When I click on the sign in button and the popup opens, I receive this error in the console:
client:258 Cross-Origin-Opener-Policy policy would block the window.postMessage call.
I am sure that have added my website URL into the Google authentication dashboard.
I tried adding these headers to the page using classic asp:
Response.AddHeader "Content-Security-Policy-Report-Only","script-src 'self' 'unsafe-inline' https://accounts.google.com/gsi/client; frame-src https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;"
I checked this Q/A but it is about implementation but it is using the Reactjs (which I am not using) with no accepted answer.
This is how I used the Google generated code to implement the sign in button (and replaced MY_CLIENT_ID with correct client ID.)
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload" data-client_id="MY_CLIENT_ID" data-callback="handleCredentialResponse"></div>
<div class="g_id_signin" data-type="standard"></div>
I also could successfully receive the response using this:
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.access_token);
console.log("Credential: " + responsePayload.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
But it seems I am missing some response data (specially the g_csrf_token authentication TOKEN) which is not received by handleCredentialResponse function but perhaps by a POST action to the current page which I am missing.
I have no Idea how should I solve the Cross-Origin-Opener-Policy issue. Should I use a JS code? or html header? or ASP code? or server settings? etc. Also please tell me what happens after I solve this issue? Do I receive some extra data from post rather than the current response?