Question

我使用“使用Facebook登录”功能使用Facebook JavaScript sdk登录我的应用程序，但收到以下错误：

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

完整的组件类如下。我点击模板中的按钮调用了forWacebookLoginClick函数：

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

使用npm模块＆＃34; angular4-oauth-login＆＃34;用于Facebook和谷歌登录而不是javascript fb sdk。

您会发现与上述模块的集成非常容易理解和实现。

Facebook登录使用Angular无效

1 个答案: