Using Facebook Login, but error

koheiokazaki141

Environment

[Core]
    Onsen UI 2.0.4

[Framework]
    Angular 2.2.4

[Framework binding]
    angular2-onsenui 1.0.0-rc.3

[Additional libraries]
    None

[Platform]
    Desktop - macOS Sierra

[Browser]
    Mobile - iOS UIWebView
    Desktop - Chrome 55.0.2883.75
Encountered problem

Hi all.

I don’t know what to discuss about here…

I want to use FaceBook Login.

In the debugger, although the error of domain setting appears, it moves.
But, build to set up a domain and check its operation, the button does not react.

How do I implement Facebook login?

This is my code.

import {OnInit, NgZone} from '@angular/core';
import {FacebookService} from './facebook.service';

@Component({
 selector: 'ons-page',
 template: `
      <div ng-If="!isUser">
       <ons-button class="btnFull facebook" aria-hidden="true" (click)="loginWithFB()"><i class="fa fa-facebook fa-fw" aria-hidden="true"></i>facebook</ons-button>
     </div>
 `,
 styles: [require('./css/template.css')],
 providers: [FacebookService]
})
export class DefaultPageComponent implements OnInit {
    name=""
    isUser = false
 provider: any;
 constructor(
     private _ngZone: NgZone,
     private _facebookService: FacebookService,
   private _navigator: OnsNavigator
 ){}
    ngOnInit(){
   this._facebookService.loadAndInitFBSDK();
    }
    loginWithFB(){
        var self = this;
        FB.login(function(response) {
            if (response.authResponse) {
                FB.api('/me', function(response) {
                      self._ngZone.run(() => {
                        self.name = response.name;
                        self.isUser = true
                    });
                });
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        });
    }

fcebook.service.ts
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class FacebookService {
 constructor() {
   if (!window.fbAsyncInit) {
     console.log('define');
     window.fbAsyncInit = function() {
       FB.init({
         appId: "577566459094290",
         xfbml: true,
         version: 'v2.8'
       });
     };
   }
 }
 loadAndInitFBSDK():Observable<any> {
   var js, id = 'facebook-jssdk', ref = document.getElementsByTagName('script')[0];
   if (document.getElementById(id)) {
     return;
   }
   js = document.createElement('script');
   js.id = id;
   js.async = true;
   js.src = "//connect.facebook.net/en_US/sdk.js";
   ref.parentNode.insertBefore(js, ref);
 }
}