popup_blocked_by_browser on first attempt to sign in

[rubencodeforges]

popup_blocked_by_browser on first attempt to sign in

[john-lieb]

@rubenCodeforges I was able to get it working without the browser blocking the popup.

in my component.ts

import GoogleUser = gapi.auth2.GoogleUser;
import GoogleAuth = gapi.auth2.GoogleAuth;
import { GoogleAuthService } from "ng-gapi";

...

export class GoogleAuthComponent implements OnInit {
 googleAuth: gapi.auth2.GoogleAuth;

ngOnInit() {
        this.googleAuthService.getAuth().subscribe(
            (auth) => {
                this.googleAuth = auth;
            });
    }

 public signIn(): void {
         this.googleAuth.signIn()
         .then((user) => {
                  this.signInSuccessHandler(user as GoogleUser);
                },
                (error) => console.error(error));
    }

component template...
<button (click)="signIn()">Authorise</button>

[hans-friedrich]

The problem is, that the gapi-calls are outside the angular's zone. A (maybe not perfect) solution can be to inject an NgZone at the component/service/etc. where you call the gapi and put the gapi-call inside angular's zone:

import {NgZone} from '@angular/core';
import { GoogleAuthService } from 'ng-gapi';
import GoogleUser = gapi.auth2.GoogleUser;
[...]
constructor(private gAuthService: GoogleAuthService, private zone: NgZone) { }

public signIn(): void {
   this.authSubscription = this.gAuthService.getAuth().subscribe(
      (auth) => {
         Observable.fromPromise(auth.signIn())
         .subscribe(
            (user) => {
               this.zone.run(() => {
                  this.signInSuccessHandler(user as GoogleUser);
                  console.log('is in angular zone? : ', NgZone.isInAngularZone());
               });
               console.log('is in angular zone? : ', NgZone.isInAngularZone());
            },
            (error) => console.error(error),
            () => { console.log('finish<-----------') }
         );
      },
      (error) => { console.error(error); },
      () => { }
   );
}

[rubenCodeforges]

@jasonburrows thanks for the input , ill think about it, but first i guess ill change the api endpoint. might be the issue

[rubenCodeforges]

@josbell what browser ?

[rubenCodeforges]

@josbell BTW try to use a button for calling the signin

[rubenCodeforges]

@hans-friedrich the real problem is that @josbell is calling it from controller and browsers by default are blocking such popups, but if he will call it from a button , the problem will be solved.
Btw here is a example app of my http://codeforges.com/google-tasks/ click the button , the browser shouldnt block the popup.

In this case the most optimal way is to use button instead of <a> remeber <a> is a link and shouldnt behave like a button in ideal world

[rubenCodeforges]

I guess this can be closed now , the issue is not about lib , its about markup

[bxboxer219]

Hi @rubenCodeforges, I've been trying to remove the popup_blocked_by_browser warning from my MEAN project, but have had no success. I tried to model it after your most recent example, but am still having problems.

I'm using a button to trigger the grantOffline() function in my integrations component, which then calls my grantOffline method in the gapi-user-service. I'm attempting to do this using GoogleAuth.grantOfflineAccess instead of GoogleAuth.signIn.

Here are some of my files for the project:

integrations.component.ts

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import {GapiUserService} from "../../gapi-services/gapi-user-service.service";

@Component({
  selector: 'app-integrations',
  templateUrl: './integrations.component.html',
  styleUrls: ['./integrations.component.scss'],
})
export class IntegrationsComponent implements OnInit {
  pageTitle = 'Integrations';
  constructor(private title: Title, public gapiUserService: GapiUserService) {}
  
  public grantOffline() {
    this.gapiUserService.grantOffline();
  }
  
  ngOnInit() {
    this.title.setTitle(this.pageTitle);
  }
}

integrations.component.html

<h1 class="text-center">{{pageTitle}}</h1>
<button type="button" (click)="grantOffline()">Authorize Google</button>

gapi-user-service.service.ts

import { Injectable, NgZone } from '@angular/core';
import { GoogleAuthService } from 'ng-gapi/lib/GoogleAuthService';
import {Observable} from "rxjs";
import GoogleUser = gapi.auth2.GoogleUser;
import GoogleAuth = gapi.auth2.GoogleAuth;
import * as _ from 'lodash';

@Injectable()
export class GapiUserService {
  
  constructor(private googleAuthService: GoogleAuthService, private ngZone: NgZone) { }
    public signIn(): void {
        console.log('sign in performed');
        this.googleAuthService.getAuth().subscribe((auth) => {
            auth.signIn().then(res => this.signInSuccessHandler(res), err => this.signInErrorHandler(err));
        });
    }
    
    public grantOffline() {
        this.googleAuthService.getAuth().subscribe((auth) => {
            auth.grantOfflineAccess().then(res => this.signInSuccessHandler(res), err => this.signInErrorHandler(err));
        });
    }
    
    private signInSuccessHandler(authResult) {
        this.ngZone.run(() => {
            console.log('signinSuccess');
            if (authResult['code']) {
                let token = authResult['code'];
                let JSONdata = JSON.stringify({
                code: token,
                });
            } else {
                // There was an error.
            }
        });
    }
    private signInErrorHandler(err) {
        console.warn(err);
    }
}

Any insight into why I'm still getting this warning message would be a huge help.

Sincerely,

Blaine H.

[rubenCodeforges]

@bxboxer219 hi im currently traveling, ill be available after 6 September , if you can wait for that long , ping me please near to that date via skype eldar2ndpara

[bxboxer219]

Thanks @rubenCodeforges, I'll be sure to reach out via skype sometime after the 6th.

[inspironen]

I think I'm also experiencing this problem. It only happens the FIRST time auth.signIn() is called (on a user button click), if you click a second time the popup appears just as it should.

If you found a soultion, I'm very interested.

[rubenCodeforges]

@inspironen whats your markup ?

[inspironen]

app.module.ts:

...
import {GoogleApiModule, NG_GAPI_CONFIG, NgGapiClientConfig} from "ng-gapi";
...
let gapiClientConfig: NgGapiClientConfig = {
  client_id: '<id>.apps.googleusercontent.com',
  discoveryDocs: ['https://analyticsreporting.googleapis.com/$discovery/rest?version=v4'],
  scope: 'profile'
};
....
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    GoogleApiModule.forRoot({
      provide: NG_GAPI_CONFIG,
      useValue: gapiClientConfig
    }),
    RouterModule.forRoot(ROUTES, {
      useHash: Boolean(history.pushState) === false,
      preloadingStrategy: PreloadAllModules
    })
  ],

app.component.ts:

  // The login function
  public logIn(event) {
    this.googleAuth.getAuth().subscribe((auth) => {
      console.log(auth);
      auth.signIn().then(() => {
        console.log("logged in")
        this.loggedIn = true;
      },(response) => {
        console.log(response.error)
      }  );
    });
  };
...

// The button in the template that calls the logIn function 
...
        <button (click)="logIn()">Log in</button>
...

[rubenCodeforges]

@inspironen do you have adblock ?

[rubenCodeforges]

Here is a example of a project im working on http://iservice.codeforges.com/
the code from repo https://github.com/rubenCodeforges/iService/blob/development/src/app/common/navbar/NavbarComponent.ts

It works without any issues

[inspironen]

No adblock. Only non-standard extension is JetBrains IDE support for debugging with WebStorm IDE, but disabling that has no effect.

I' using:
Google Chrome 62.0.3202.62 (Official Build) (64-bit)
OS Linux

Thanks for the example, it works in my browser too - however, it does not show a popup, it redirects to a login page instead, so it seems it uses ux_mode: redirect. Is the intention to support popups (ux_mode: popup) or will we have to do with redirects?

[rubenCodeforges]

@inspironen ive updated the example with a popup now i see the issue , chrome is blocking the popup , but you can turn it off in chrome settings.

Quick research gives some thoughts on how to fix it , but this will be not a quick solution.
For you i would recommend switch to redirect mode, it is also better for mobile devices as popups are not good on a phone.

[jasonburrows]

Just wanted to add that I'm getting this same issue, but if I use gapi directly I don't see the problem.

So if I load the script myself with:

<script src="https://apis.google.com/js/platform.js"></script>

and use it like this:

                return gapi.auth2.getAuthInstance().signIn()
                    .then( () => {
                        let oauthToken = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().id_token;
});

Doing it that way does not cause the error. Note that this logic is happening in a service and not from a button (as suggested earlier in this thread).

Seems like there must be a way to solve this in the general case since I'm able to do it from a service directly if I simple don't use ng-gapi. I'd like to use ng-gapi just because I like how it loads the library.

[jasonburrows]

Just to add as this may be happening for this library as well:

I just moved my call to gapi.load('auth2', () => {/*options*/}) from my service constructor to a method (in the same service) that gets (indirectly) called in response to a button click and the popup_blocked_by_browser started happening. Moved that call back to the constructor and the error goes away.

Note that I'm still doing the gapi.auth2.getAuthInstance().signIn() and all the other calls in the method triggered by the button press and there's no popup error.

I'd love to know why this is the case, but none the less, I bet this bug is being caused by something similar in the library.

[rubenCodeforges]

Endpoint changed in last build. will close this for now

[rubenCodeforges]

@john-lieb that can be due to an update i made in the lib , so i guess im closing this , thanks for the info

[john-lieb]

@rubenCodeforges I think the main reason is the button click event calls this.googleAuth.signIn directly, instead of button click calling this.googleAuthService.getAuth() ---> Observable OnNext ---> this.googleAuth.signIn

[rubenCodeforges]

@john-lieb try it with the example UserService from the Readme https://github.com/rubenCodeforges/ng-gapi#googleauthservice because it shouldnt be a difference from where you call , i mean service or component