Angular 2 window.postmessage

Question

I'm working on an eCommerce application in Angular 2 with a node and express api backend. I'm currently working on the social login section where I am using passport-facebook and jwt for authentication. My code concerns revolve around the Angular 2 portion. When a user clicks on the login/register with facebook button it opens a new tab that begins the facebook login flow. That window will then return the jwt to the opener via window.postMessage. The opener then sends the window a success message and the opened window will close. Everything works correctly but it's not very clean, i.e. I had to hack it up to make it work. Ideally I would call my authorization service to handle the facebook login instead of handling everything in my component but inside the event handler for the window.postMessage 'this' no longer references the component, it references the window object so I can't call the service via 'this'. I can't figure out how to get a reference to the component so I can call the service. Does anyone have any suggestions?

Below is my login component in typescript. I can include other code if need be but I don't know that it is needed.

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
import { ILoginUser } from './loginUser.model';


@Component({
  moduleId: module.id,
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private _authService: AuthService, private _router: Router) { 
   if (window.addEventListener) {
     window.addEventListener("message", this.receiveMessage, false);
    } else {
      (<any>window).attachEvent("onmessage", this.receiveMessage);
   }
  }

  ngOnInit() { }

  user: ILoginUser = {
    username: "",
    password: ""
  }

  error: boolean = false;
  success: boolean = false;
  errorMessage: string = "";
  redirect: boolean = false;

  login() {
    this._authService.login(this.user).subscribe(data => {
        console.log (data);
          if (data.success){
            this._router.navigate(['/product']);

        } else {
        this.error = true,
        this.errorMessage = data.message
      }
    }, errorMsg => {
      this.error = true;
      this.errorMessage = errorMsg;
    });
  }

  receiveMessage(event: any)
    {

      if (event.origin !== "http://localhost:3000")
        return;
      localStorage.setItem("token", event.data.token);
      localStorage.setItem("username", event.data.username);
      (<any>window).popup.postMessage("success", "http://localhost:3000");
    }


  ngAfterViewChecked() {
    //since we can't call the authservice directly we check to see if a redirect flag is set to true
    if (this.redirect) {
      this._router.navigate(['/product']);
    }
  }

  authFacebook() {
    (<any>window).popup = window.open('http://localhost:3000/api/auth/facebook');
   //set the redirect flag to true so when angular checks again we can redirect to the products page
   this.redirect = true;
  }
}

score 43 · Answer 1 · answered Sep 18 '18 at 16:06

43

You could also use the @HostListener() function decorator:

@HostListener('window:message', ['$event'])
onMessage(event) {
  this.receiveMessage(event);
}

answered Sep 18 '18 at 16:06

bccurry

531
4
3

This is a great, clean way to implement in a component or directive. Sadly, it doesn't work in a service. In case of a service, you have to resort to the old-fashioned `window.addEventListener()`. – Kon Apr 25 '19 at 14:50

score 23 · Accepted Answer · answered Jan 03 '17 at 13:57

You should change the way you declare the eventListener (by using bind(this) or an anonymous function, or change the way you declare your eventHandlers:

bind(this):

constructor(private _authService: AuthService, private _router: Router) { 
   if (window.addEventListener) {
     window.addEventListener("message", this.receiveMessage.bind(this), false);
   } else {
      (<any>window).attachEvent("onmessage", this.receiveMessage.bind(this));
   }
}

anonymous function

window.addEventListener("message", () => {
   this.receiveMessage();
}, false)

different declaration of eventHandler

receiveMessage: any = (event: any) =>  {
  //...
}

Take your pick :) With the last option it is easy to detach the eventListener

You could also add the event listener with angular's `renderer` class. See: http://stackoverflow.com/a/35082441/1762493 — Mikeumus, May 11 '17 at 14:53

score 11 · Answer 3 · answered Nov 23 '17 at 01:39

Combining @PierreDuc's .bind(this) technique and @Mikeumus's comment:

import {Component, OnDestroy, Renderer2} from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my_component.ng.html',
})
export class MyComponent implements OnDestroy {
  stopListening: Function;

  constructor(private renderer: Renderer2) {
    this.stopListening =
        renderer.listen('window', 'message', this.handleMessage.bind(this));
  }

  handleMessage(event: Event) {
    const message = event as MessageEvent;

    // Only trust messages from the below origin.
    if (message.origin !== 'http://example.com:8080') return;

    console.log(message.data);
  }

  ngOnDestroy() {
    this.stopListening();
  }
}

You can still directly do this if you prefer:

this.stopListening =
    renderer.listen('window', 'message', (even: Event) => { ... });

You can test it by commenting out the origin check and writing this in the developer JavaScript console:

window.postMessage("test message data", "http://localhost:8080")

Update the 2nd arg to be the URL of the page you are currently on. This command makes the page think it received a message from itself.

This one worked for me. I have to add ngOnDestroy() as it was calling API twice. So thanks for the help — Mukesh Salaria, Apr 23 '22 at 19:07

Angular 2 window.postmessage

3 Answers3

Linked