Using Facebook Login, but error



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

Log in to reply