Question

在Question之后，我在登录页面上设置了Google登录按钮。

但是我还必须限制“gapi.auth2.init（）”下的hosted_domain属性

问题：在哪里初始化？

我尝试了这个solution，但我的onloadCallback函数从未被命中，即使它放在login.html或index.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

<!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() {}
}

Answer 1

您的回调未被调用，因为您正在同步加载GAPI。

将回调脚本移到API加载之上，以便能够访问回调

另一种方法是将脚本标记为异步 - 这意味着它不会阻止UI呈现（推荐），并且回调也可以在它之后定义。

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

另外顺便说一句：在访问auth2 init属性之前，您需要加载auth2和客户端库。

Google登录在Angular2

1 个答案: