Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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