谷歌登錄在Angular2中設置gapi.auth2.init

在Question之後，我在登錄頁面上設置了Google Sign-in按鈕。谷歌登錄在Angular2中設置gapi.auth2.init

不過我也有下限制hosted_domain財產「gapi.auth2.init（）」

問題：哪裏初始化？

我試過下面這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>

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

來源

2016-08-18 Manmeet S. Oberoi

我在這裏回答了一個類似的問題：http://stackoverflow.com/a/39770500/2308745與我的實施登錄 – Gatsbimantico

您的回調沒有被調用，因爲您正在同步加載GAPI。

移動回調腳本API裝載以上，才能夠訪問回調

另一種方法是，以紀念腳本異步 - 這意味着它不會使阻塞UI （推薦），回調也可以在之後定義。

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

另外順便說一句：你需要加載auth2和客戶端庫，訪問auth2初始化屬性之前。

來源

2016-08-18 12:00:03 DevVersion

添加異步返回引用錯誤：gapi未定義。 –

對我來說就像一個魅力。 https://gyazo.com/dc33610d00171b49beb36315bb7629db 第一種方法呢？ – DevVersion

你的意思是什麼「加載auth2和客戶端庫」？ –

谷歌登錄在Angular2中設置gapi.auth2.init

回答

相關問題