Inicio de sesión de Google para Sitios web y Angular 2 con Typescript

Estoy construyendo un sitio que tiene un servicio web RESTful bastante estándar para manejar la persistencia y la lógica de negocios compleja. La interfaz de usuario que estoy construyendo para consumir este servicio está usando Angular 2 con componentes escritos en TypeScript.

En lugar de construir mi propio sistema de autenticación, espero confiar en el Inicio de sesión de Google para sitios web. La idea es que los usuarios vendrán al sitio, iniciar sesión a través del marco proporcionado allí y luego enviar a lo largo de los tokens de identificación resultantes, que el el servidor que aloja el servicio RESTful puede verificar.

En la documentación de Inicio de sesión de Google hay instrucciones para crear el botón de inicio de sesión a través de JavaScript que es lo que debe suceder ya que el botón de inicio de sesión se representa dinámicamente en una plantilla Angular. La parte pertinente de la plantilla:

<div class="login-wrapper">
  <p>You need to log in.</p>
  <div id="{{googleLoginButtonId}}"></div>
</div>
<div class="main-application">
  <p>Hello, {{userDisplayName}}!</p>
</div>

Y la definición de componente Angular 2 en Typescript:

import {Component} from "angular2/core";

// Google's login API namespace
declare var gapi:any;

@Component({
    selector: "sous-app",
    templateUrl: "templates/sous-app-template.html"
})
export class SousAppComponent {
  googleLoginButtonId = "google-login-button";
  userAuthToken = null;
  userDisplayName = "empty";

  constructor() {
    console.log(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.
    api.signin2.render(
      this.googleLoginButtonId,
      {
        "onSuccess": this.onGoogleLoginSuccess,
        "scope": "profile",
        "theme": "dark"
      });
  }

  // Triggered after a user successfully logs in using the Google external
  // login provider.
  onGoogleLoginSuccess(loggedInUser) {
    this.userAuthToken = loggedInUser.getAuthResponse().id_token;
    this.userDisplayName = loggedInUser.getBasicProfile().getName();
    console.log(this);
  }
}

El flujo básico es:

1. Angular renderiza la plantilla y el mensaje " Hello, empty!"se muestra.
2. Se activa el gancho ngAfterViewInit y se llama al método gapi.signin2.render(...) que convierte el div vacío en un botón de inicio de sesión de Google. Esto funciona correctamente y al hacer clic en ese botón se activará el proceso de inicio de sesión.
3. Esto también adjunta el método onGoogleLoginSuccess del componente para procesar realmente el token devuelto después de que un usuario inicie sesión.
4. Angular detecta que la propiedad userDisplayName ha cambiado y actualiza la página para mostrar ahora " Hola, Craig (o como sea tu nombre is)!".

El primer problema que ocurre está en el método onGoogleLoginSuccess. Observe las llamadas console.log(...) en el constructor y en ese método. Como era de esperar, el de constructor devuelve el componente Angular. El del método onGoogleLoginSuccess, sin embargo, devuelve el objeto JavaScript window.

Así que parece que el contexto se está perdiendo en el proceso de saltar a la lógica de inicio de sesión de Google, así que mi siguiente paso fue intentar incorporar la llamada de jQuery $.proxy para aferrarse al contexto correcto. Así que importe el espacio de nombres jQuery añadiendo declare var $:any; a la parte superior del componente y, a continuación, convierta el contenido del método ngAfterViewInit en:

// Angular hook that allows for interaction with elements inserted by the
// rendering of a view.
ngAfterViewInit() {
    var loginProxy = $.proxy(this.onGoogleLoginSuccess, this);

    // Converts the Google login button stub to an actual button.
    gapi.signin2.render(
      this.googleLoginButtonId,
      {
        "onSuccess": loginProxy,
        "scope": "profile",
        "theme": "dark"
      });
}

Después de agregar eso, las dos llamadas console.log devuelven el mismo objeto, por lo que los valores de las propiedades ahora se actualizan correctamente. El segundo mensaje de registro muestra el objeto con los valores de propiedad actualizados esperados.

Desafortunadamente, la plantilla Angular no se actualiza cuando esto sucede. Mientras depuraba, me topé con algo que creo que explica lo que está pasando. He añadido la siguiente línea al final del gancho ngAfterViewInit:

setTimeout(function() {
  this.googleLoginButtonId = this.googleLoginButtonId },
  5000);

Esto realmente no debería hacer nada. Solo espera cinco segundos después de que el gancho termina y luego establece un valor de propiedad igual a sí mismo. Sin embargo, con la línea en su lugar, el mensaje "Hello, empty!" se convierte en "Hello, Craig!" unos cinco segundos después de que la página se haya cargado. Esto me sugiere que Angular simplemente no se está dando cuenta de que los valores de las propiedades están cambiando en el método onGoogleLoginSuccess. Así que cuando algo más sucede a notificar Angular que los valores de propiedad han cambiado (como la auto-asignación de otra manera inútil anterior), Angular se despierta y actualiza todo.

Obviamente no es un truco que quiero dejar en su lugar, así que me pregunto si algún experto Angular puede darme una pista. ¿Hay alguna llamada que deba hacer para forzar a Angular a notar que algunas propiedades han cambiado?

ACTUALIZADO 2016-02-21 para proporcionar claridad sobre la respuesta específica que resolvió el problema

Terminé necesidad de utilizar ambas partes de la sugerencia proporcionada en la respuesta seleccionada.

Primero, exactamente como se sugirió, necesitaba convertir el método onGoogleLoginSuccess para usar una función de flecha. En segundo lugar, necesitaba hacer uso de un objeto NgZone para asegurarme de que las actualizaciones de propiedades ocurrieron en un contexto del cual Angular es consciente. Así que el método final terminó pareciendo

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

Necesitaba importar el objeto _zone: import {Component, NgZone} from "angular2/core";

También tuve que inyectarlo como se sugiere en el respuesta a través del contructor de la clase: constructor(private _zone: NgZone) { }