Google oauth login and iFrame

[meminc]

Hi, using the sync between WP and the forum with great pleasure.

However, I am trying to integrate the ability to login with a Google account on my forum. On the direct page of the forum (without integration and without being iFramed in the WP site) it is working. So, I can check the procedure ith Google is actually set up right. When I go to the WP site with the integrated forum, and I go to the Google login button, I get the error "Refused to display 'https://accounts.google.com/o/oauth2/…' in a frame because it set 'X-Frame-Options' to 'sameorigin'."

Is there a way to fix this for this URL?

[axew3]

nice one! Yes surely there is:
need to setup and check/test it ...
let you know asap

p.s
v4 iframe code will be out soon ...

[axew3]

ok, tested out:
the problem is that the flow do not allow an url request like this

Code: Select all

https://www.axew3.com/www/phpBB3/ucp.php?mode=login&login=external&oauth_service=google

inside an iframe.
The answer will be like this:

Refused to display 'https://accounts.google.com/o/oauth2/au ... client_id=.....' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

so, why to not resolve with pure javascript, that will try to load the google flow into a separated opened window and then redirect?
Finally, the google oauth flow will redirect to correct URL (setup Authorized redirect URIs on google oauth API to be as my example (of course change to fit your url)

Code: Select all

https://www.axew3.com/www/phpBB3/ucp.php?mode=login&login=external&oauth_service=google

It work fine, and after first registration/authentication then login, you'll see that at next login, the login is done by phpBB behind the scene, and the login done in iframe, so the above do not happen and do not apply anymore. So nice.
Test it out: use google flow, register, then login ... then logout, then login again

this is the solution that work for any flow i assume, not only google:
into overall_footer.html
may just before the code you added where js code start, so just after

Code: Select all

<script type="text/javascript">

add this
(note: .button2 selector is the css class assigned to the google login button into prosilver theme, may change to fit your)

Code: Select all

$(".button2").on("click", function(event) {
var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
  windowObjectReference = window.open("https://www.axew3.com/www/phpBB3/ucp.php?mode=login&login=external&oauth_service=google", "phpBBOauthFlow", strWindowFeatures);
event.preventDefault();
});

change on this the URL to fit your

Code: Select all

("https://www.axew3.com/www/phpBB3/ucp.php?mode=login&login=external&oauth_service=google")

note that i used window.open on above example but you would may like to load the page into same tab instead, using so this code and not the above:

Code: Select all

$(".button2").on("click", function(event) {
parent.location.replace('https://www.axew3.com/www/phpBB3/ucp.php?mode=login&login=external&oauth_service=google');
event.preventDefault();
});

then, if you also added to force requests to direct phpBB urls to be redirected to the wp iframed page adding the overall_header.html code, so you need to prevent to reload/redirect the page like this (substantially exclude this url to be reloaded as encoded when the request is for the phpBB oauth flow page),
then change

Code: Select all

document.location.replace(href0);

with this

Code: Select all

let urlck = new URLSearchParams(window.location.search);
  let urlckoauth = urlck.get('login');
  if(urlckoauth != 'external'){
   document.location.replace(href0);
  }

Tested here:
https://www.axew3.com/www/wordpress-rc/forum/

[EDITED]