將Facebook登錄換成RxJS Angular2應用中的Observable

Question

我想將Facebook登錄集成到Angular 2應用中。 Facebook SDK是異步加載的，我想將這個異步調用包裝在Observable中。

fbInit() { 
var deferred = Observable.create(observer => { 
    this._window.instance.fbAsyncInit =() => { 
    this._window.instance.FB.init({ 
     appId  : 'xxxxxxxxxxxxxxx', 
     xfbml  : true, 
     version : 'v2.8' 
    }); 
    this._window.instance.FB.AppEvents.logPageView(); 
    console.log("fbInit"); 
    observer.next(); 
    }; 

    (function(d, s, id){ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
}); 
return deferred; 
} 

（this._window.instance返回窗口對象）

一旦調用成功，我想通過FB對象來獲取用戶的登錄狀態，即把對全球窗口對象。我使用RxJs'bindCallback函數將普通回調包裝到Observable中。

getFbStatus() { 
    console.log("getFbStatus"); 
    return Observable.bindCallback(this._window.instance.FB.getLoginStatus); 
} 

現在我要連續運行異步查詢此起彼伏：

1）初始化FB SDK，並把FB全球window對象
2）檢查登錄狀態
3）不要取決於登錄狀態的東西

使用承諾此任務將非常簡單。經過一番研究，我發現flatMap或concat可以解決我的問題。兩次嘗試都沒有成功。這是我已經試過：

const initFb$ = this.fbInit(); 
const getFbStatus$ = this.getFbStatus(); 
const combined$ = Observable.concat(initFb$, getFbStatus$); 

combined$.subscribe(
    res => console.log(res), 
    err => console.error(err) 
) 

運行此，出現以下錯誤：

TypeError: Cannot read property 'getLoginStatus' of undefined 

似乎getFbStatus被調用時，Facebook的SDK被加載之前。

我在這裏錯過了什麼？ 任何幫助非常感謝。

Answer 1

要了解如何使用angular-2實現使用Facebook註冊，請檢查此回購。 https://github.com/hirenalken/fb-oauth-angular2-4