Google登录在Angular2中设置gapi.auth2.init

Question

Following the Question , i have setup a Google Sign-in button on my login page. 提出问题后，我在登录页面上设置了Google登录按钮。

However I also have to restrict the hosted_domain property under "gapi.auth2.init()" 但是，我还必须在“ gapi.auth2.init（）”下限制hosted_domain属性。

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 我尝试按照此解决方案进行操作，但是即使将onloadCallback函数放置在login.html或index.html中，也不会对其执行任何操作

Code: 码：

login.html 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 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 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() {}
}

Answer 1

Your callback isn't getting called because the you are loading the GAPI synchronously. 回调不会被调用，因为您正在同步加载GAPI。

Move the callback script above the API loading, to be able to access the callback 将回调脚本移至API加载上方，以便能够访问回调

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. 另一种方法是将脚本标记为异步-这意味着它不会阻止UI渲染（推荐），并且还可以在其后定义回调。

    <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. 另外请注意：访问auth2 init属性之前，您需要加载auth2和客户端库。

Google登录在Angular2中设置gapi.auth2.init

问题描述

1 个解决方案

解决方案1
0 2016-08-18 12:00:03

Google登录在Angular2中设置gapi.auth2.init

问题描述

1 个解决方案

解决方案1 0 2016-08-18 12:00:03

解决方案1
0 2016-08-18 12:00:03