Facebook-Login mit Angular nicht funktioniert

Question

Ich verwende „Login mit Facebook“ Funktionalität meiner Anwendung anmelden Sie sich mit der JavaScript sdk aber immer folgende Fehlermeldung:

Failed to load resource: net::ERR_NAME_RESOLUTION_FAILED 
https://www.facebook.com/connect/ping?client_id={my-app-id}&domain=localhost&origin=1&redirect_uri=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FP5DLcu0KGJB.js%3Fversion%3D42%23cb%3Dfed5cec4%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A3000%252Fff1a152fc%26relation%3Dparent&response_type=token%2Csigned_request%2Ccode&sdk=joey 

Der komplette Komponentenklasse ist wie folgt. Ich rufe onFacebookLoginClick Funktion auf Schaltfläche anklickt in Vorlage:

import { Component, OnInit } from '@angular/core'; 
declare const FB: any; 
@Component({ 
    selector: 'login-component', 
    templateUrl: 'app/login-form.component.html' 
}) 
export class LoginComponent implements OnInit 
{ 

    testAPI() { 
    console.log('Welcome! Fetching your information.... '); 
    FB.api('/me', function(response) { 
     console.log('Successful login for: ' + response.name); 
     document.getElementById('status').innerHTML = 
     'Thanks for logging in, ' + response.name + '!'; 
    }); 
    } 

    statusChangeCallback(response) { 
    console.log('statusChangeCallback'); 
    console.log(response); 
    if (response.status === 'connected') { 
     this.testAPI(); 
    } else if (response.status === 'not_authorized') { 
     document.getElementById('status').innerHTML = 'Please log ' + 
     'into this app.'; 
    } else { 
     document.getElementById('status').innerHTML = 'Please log ' + 
     'into Facebook.'; 
    } 
    }; 

    constructor() { 
     FB.init({ 
      appId  : 'XXXXXXXXXXXXXX', 
      xfbml  : true, 
      version : 'v2.8' 
     }); 
    } 

    onFacebookLoginClick() { 
     FB.login(function(response) { 
      if (response.authResponse) { 
       console.log('Welcome! Fetching your information.... '); 
       FB.api('/me', {fields: 'picture'}, function(response) { 
        console.log(response); 
       }); 
      } else { 
       console.log('User cancelled login or did not fully authorize.'); 
      } 
    }); 
    } 

    ngOnInit() { 
     FB.getLoginStatus(response => { 
      this.statusChangeCallback(response); 
     }); 
    } 


    } 

Answer 1

Verwendung npm Modul "angular4-oauth-login" für Facebook und Google Login anstelle der Javascript fb sdk.

Sie werden feststellen, dass die Integration mit dem obigen Modul sehr einfach zu verstehen und zu implementieren ist.