Google Sign-In set gapi.auth2.init in Angular2

Question

Following the Question, i have setup a Google Sign-in button on my login page.

However I also have to restrict the hosted_domain property under "gapi.auth2.init()"

Problem: Where to initialize ?

I Tried following this solution, but my onloadCallback function is never hit even if it placed in login.html or index.html

Code:

login.html

<script>
    window.onLoadCallback = function() {
        console.log("working");
        gapi.auth2.init({
            client_id: 'xxx.apps.googleusercontent.com',
            hosted_domain: 'abc.net',
            cookiepolicy: 'single_host_origin'
        });
    }
</script>
<div class="googleButtonContainer">
    <div class="login-wrapper">
        <p>You need to log in.</p>
        <div id="{{googleLoginButtonId}}"></div>
    </div>
</div>

index.html

<!doctype>
<html>

<head>
    <base href="/">
    <title>Portal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="xxx.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js?onload=onLoadCallback"></script>

    <script>
    window.onLoadCallback = function() {
        console.log("working");
        gapi.auth2.init({
            client_id: 'xxx.apps.googleusercontent.com',
            hosted_domain: 'abc.net',
            cookiepolicy: 'single_host_origin'
        });
    }
</script>

    <!-- 2. Configure SystemJS -->
    <script src="app/bundle.js"></script>

    <!--Jquery Support-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
    <script src="node_modules/fullcalendar/dist/fullcalendar.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="src/css/libraries/materializecss/materialize.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="src/css/app.css">
    <base href="/">
</head>

<body>
    <app>Loading...</app>
</body>

</html>

login.component.ts

/// <reference path="../../node_modules/retyped-gapi.auth2-tsd-ambient/gapi.auth2.d.ts" />
// /// <reference path="../../typings/gapi/gapi.d.ts" />
/// <reference path="../../typings/jquery/jquery.d.ts" />
import { Component, NgZone } from '@angular/core';
import { ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';

declare var $: JQueryStatic;

@Component({
    selector: 'login',
    templateUrl: 'app/login/login.html'
})

export class loginComponent {
    googleLoginButtonId = "google-login-button";
    userAuthToken = null;
    userDisplayName = "empty";

    constructor(private _zone: NgZone) {
        this._zone.run(() => {
            $.proxy(this.onGoogleLoginSuccess, this);
            $.proxy(this.onGoogleLoginFailure, this);
        });
    }

    // Angular hook that allows for interaction with elements inserted by the
    // rendering of a view.
    ngAfterViewInit() {
        // Converts the Google login button stub to an actual button.
        var onsuccess = $.proxy(this.onGoogleLoginSuccess, this);
        var onfailure = $.proxy(this.onGoogleLoginFailure, this);

        // Converts the Google login button stub to an actual button.

        // gapi.auth2.init({
        //     client_id: 'xxx.apps.googleusercontent.com',
        //     hosted_domain: 'abc.net',
        //     cookie_policy: 'single_host_origin'
        // });

        gapi.signin2.render(
            this.googleLoginButtonId,
            {
                "onsuccess": onsuccess,
                "onfailure": onfailure,
                "scope": "profile email",
                width: 300,
                height: 50,
                longtitle: true
            });
    }

    onGoogleLoginSuccess = (loggedInUser) => {
        this._zone.run(() => {
            this.userAuthToken = loggedInUser.getAuthResponse().id_token;
            this.userDisplayName = loggedInUser.getBasicProfile().getName();
            console.log(loggedInUser);
        });
    }

    onGoogleLoginFailure = (loggedInUser) => {
        this._zone.run(() => {
            console.log(loggedInUser);
        });
    }


    ngAfterViewChecked() {}
}

I answered a similar question here: http://stackoverflow.com/a/39770500/2308745 with my implementation of the sign in — Gatsbimantico, Sep 29 '16 at 13:18

score 0 · Answer 1 · answered Aug 18 '16 at 12:00

0

Your callback isn't getting called because the you are loading the GAPI synchronously.

Move the callback script above the API loading, to be able to access the callback

Another approach would be to mark the script as async - this means it won't block the UI from rendering (recommended) and the callback can be also defined after it.

    <script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async>
    </script>

Also btw: You need to load the auth2 and client library, before accessing the auth2 init property.

answered Aug 18 '16 at 12:00

DevVersion

1,923
14
15

Adding async returns Reference error: gapi is not defined. – Manmeet S. Oberoi Aug 18 '16 at 12:03
Works a like a charm for me. https://gyazo.com/dc33610d00171b49beb36315bb7629db What about the first approach? – DevVersion Aug 18 '16 at 12:05
What do u exactly mean "load the auth2 and client library" ? – Manmeet S. Oberoi Aug 18 '16 at 12:07
With your snippets right now, you only load the Google API library for Web. The Google API consists of sub library, which need to be loaded manually. gapi.load('client:auth2', callback) This loads the `client` and `auth2` library and after the callback you can use auth2 – DevVersion Aug 18 '16 at 12:09
I tried to follow this sample of manually adding gapi.load ( https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html ) but the Reference error comes up as soon as i either change the script call to async, or try to call it in login.html basically anywhere but index.html – Manmeet S. Oberoi Aug 18 '16 at 12:46

Google Sign-In set gapi.auth2.init in Angular2

1 Answers1