Блог

Я использую функцию «Войти с помощью Facebook» для входа в мое приложение с помощью Facebook JavaScript sdk, но получаю следующую ошибку:

 Failed to load resource: net::ERR_NAME_RESOLUTION_FAILED
https://www.facebook.com/connect/ping?client_id={my-app-id}amp;domain=localhostamp;origin=1amp;redirect_uri=http://staticxx.facebook.com/connect/xd_arbiter/r/P5DLcu0KGJB.js?version=42#cb=fed5cec4&domain=localhost&origin=http%3A%2F%2Flocalhost%3A3000%2Fff1a152fc&relation=parentamp;response_type=token,signed_request,codeamp;sdk=joey
  

Полный класс компонента выглядит следующим образом. Я вызываю функцию onFacebookLoginClick при нажатии кнопки в шаблоне:

 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);
        });
    }


    }
  

Используйте модуль npm «angular4-oauth-login» для входа в facebook и Google вместо javascript fb sdk.

Вы обнаружите, что интеграцию с вышеупомянутым модулем было очень легко понять и реализовать.