Customize the Google+ button

[isaacfi]

Hi,

I want to customize the Google+ login button, is there any way to do it? or how to click programmatically over "asl-google-signin-button" button? I tried this with no luck:

In html:

<asl-google-signin-button #googleButton [hidden]="true"></asl-google-signin-button>
        <button type="button" class="btn google-btn ml-auto" (click)="submitGoogleLogin()"><i
            class="fab fa-google-plus-g"></i> {{'loginWithGoogle' | translate}}</button>

In the TS:

@ViewChild('googleButton', { static: false}) googleButton: ElementRef;

submitGoogleLogin() {
    this.googleButton.nativeElement.click();
}

[Jin-K]

Hi @isaacfi

There are possibilities to customize the Google button through the gis client. But they are very limited: https://developers.google.com/identity/gsi/web/guides/personalized-button. And there is no click handler in <asl-google-signin-button></asl-google-signin-button>, it just wraps a button rendered by the gis client, which also wraps an IFrame.

The <asl-google-signin-button></asl-google-signin-button> is not supporting customization, it's more like a temporary way to delegate the button rendering (though gis client) to this project.

If you really want to try Google button customization with the gis client, you should do something like this yourself. And you need to wait for SocialAuthService.initState first emit.

I think we're currently working on an alternative provider for Google, the current one is tricky, and we have almost no control on it as it delegates almost everything to the Google lib. We should maybe add more warnings about this in the project README.

Otherwise, you can also implement your own login provider if you implement LoginProvider and/or extend BaseLoginProvider. It became easier since version 1.2.1. I have a custom login provider here which works for my needs, but it depends on angular-oauth2-oidc.

[rahulkutah]

@Jin-K as you have suggested I have created a custom provider, and it is working, but the dialog is not closing after signing in. Also how i can get the information from the URL after signing in

[Heatmanofurioso]

Closing as duplicate of #534