问题
After lot of googling didn't find solution how to catch error of window popup blocker for google auth2
getting an error in console error: "popup_blocked_by_browser". all I want is to do is tell user that pop up should be enabled for auth.
samples using window.open() are not good, since they open useless window. As I see a lot of people searching for this.
Any advice?
回答1:
Was having same problem. Seems browser(s) (or at least chrome) will block any "window.open" call which it was invoked not as part of a user interaction.
Refer to here for a deeper explanation.
__
I used to have this next code inside click event listener:
gapi.load('auth2', function() {
var auth2 = gapi.auth2.init({
client_id: '.apps.googleusercontent.com',
fetch_basic_profile: true,
scope: 'profile'
});
auth2.signIn()
.then(function() {
var profile = auth2.currentUser.get().getBasicProfile();
...
})
.catch(function(err) { ... });
});
Note the asynchronous way of loading 'auth2', which is how google docu says.
I changed it to:
// way earlier, before click event can happen
// we call the gapi.load method.
gapi.load('auth2', function() {});
Then, inside click event handler, we can do:
var auth2 = gapi.auth2.init({
client_id: '.apps.googleusercontent.com',
fetch_basic_profile: true,
scope: 'profile'
});
auth2.signIn()
.then(function() { ... })
.catch(function(err) { ... });
... so browser does not block google login popup
回答2:
In your constructor (service) or ngOnInit (for component) do the following:
googleAuthService.getAuth().subscribe(
(auth) => {
this.googleAuth = auth;
});
Then, in your login function, call:
this.googleAuth.signIn()
.then((user) => {
this.signInSuccessHandler(user as GoogleUser);
},
(error) => console.error(error));
回答3:
Finally!! signIn() method uses JS Promise. So code can be used is:
gapi.auth2.getAuthInstance().signIn().then(function(){}, function(error){ if (error) alert('please allow popup for this app')})
Hope this will help!
回答4:
Update:
Now you need to use Firebase auth
https://firebase.google.com/docs/auth/
Answer:
For me I changed init method to have a callback function (empty one)... Here's how:
Wrong (popup blocked by browser) (no call back function):
.init({ client_id: main.clientId })
Correct working like charm:
.init({ client_id: main.clientId, () => { } })
来源:https://stackoverflow.com/questions/45624572/detect-error-popup-blocked-by-browser-for-google-auth2-in-javascript