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?
Google oauth login and iFrame
- axew3
- w3all User
- Posts: 2887
- Joined: Fri Jan 22, 2016 5:15 pm
- Location: Italy
- Contact:
Re: Google login and iFrame
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 ...
need to setup and check/test it ...
let you know asap
p.s
v4 iframe code will be out soon ...
- axew3
- w3all User
- Posts: 2887
- Joined: Fri Jan 22, 2016 5:15 pm
- Location: Italy
- Contact:
Re: Google login and iFrame
ok, tested out:
the problem is that the flow do not allow an url request like this
inside an iframe.
The answer will be like this:
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)
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
add this
(note: .button2 selector is the css class assigned to the google login button into prosilver theme, may change to fit your)
change on this the URL to fit your
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:
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
with this
Tested here:
https://www.axew3.com/www/wordpress-rc/forum/
[EDITED]
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
The answer will be like this:
so, why to not resolve with pure javascript, that will try to load the google flow into a separated opened window and then redirect?Refused to display 'https://accounts.google.com/o/oauth2/au ... client_id=.....' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
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
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">
(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();
});
Code: Select all
("https://www.axew3.com/www/phpBB3/ucp.php?mode=login&login=external&oauth_service=google")
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 change
Code: Select all
document.location.replace(href0);
Code: Select all
let urlck = new URLSearchParams(window.location.search);
let urlckoauth = urlck.get('login');
if(urlckoauth != 'external'){
document.location.replace(href0);
}
https://www.axew3.com/www/wordpress-rc/forum/
[EDITED]