2017-10-02 11 views
3

AngularサービスとしてFacebook認証を使用します。このコードで (私は角度のライフサイクルによる理解と)変数isUserも再初期化/リフレッシュされ、私は/ログアウト、ログインすることができるよしかし、私は、ログイン時に、ページを更新 - 私はcheckLoginStateにしてみてください()をngOnInitに入れて、ユーザーがまだログインしているかどうかを確認し、FB APIを照会して変数の値を再初期化します。しかし、ngOnInit FBがまだ定義されていないため、コードは失敗します。では、ページの更新後に変数値を変更しないで維持するにはどうすればよいですか?または、それらをグローバルにキャッシュに保存する必要がありますか? ありがとう!エラーFBが定義されていませんAngular2(CLI)のFacebookログイン

FacebookService:

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: "...youAppId...", 
      xfbml: true, 
      version: 'v2.10' 
     }); 
     }; 
    } 
    } 

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


} 

AppComponent:

import { Component, OnInit, NgZone } from '@angular/core'; 
import { Observable } from "rxjs/Observable"; 
import { FacebookService } from "app/Services/facebook.service"; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 

}) 
export class AppComponent implements OnInit { 

    title = 'app.component works!!!'; 
    name = ""; 
    isUser = false; 

    constructor(private _ngZone: NgZone, private _facebookService: FacebookService) { 

    } 

    ngOnInit() { 
    this._facebookService.loadAndInitFBSDK(); 
    /* if (this.checkLoginState()) { // Error in :0:0 caused by: FB is not defined 
     this.setIsUser(); 
     this.setName(); 
    } */ 
    } 


    login() { 
    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.'); 
     } 
    }); 
    } 

    logout() { 
    FB.logout(function (response) { 
     location.reload(); 
    }); 
    } 

    checkLoginState() { 
    let isLoggedIn; 
    FB.getLoginStatus(function (response) { 
     if (response.authResponse) { 
     isLoggedIn = true; 
     } else { 
     isLoggedIn = false; 
     } 
    }); 
    return isLoggedIn; 
    } 

    setName() { 
    var self = this; 
    FB.api('/me', function (response) { 
     self._ngZone.run(() => { 
     self.name = response.name 
     }); 
    }); 
    } 

    setIsUser() { 
    var self = this; 
    FB.api('/me', function (response) { 
     self._ngZone.run(() => { 
     self.isUser = true 
     }); 
    }); 
    } 
} 

app.component.html

<h1> 
    {{title}} 
</h1> 
<div> 
    <div *ngIf="!isUser" id="Login"> 

    <button (click)="login()">Log in with Facebook</button> 
    </div> 
    <div *ngIf="isUser" id="Logout"> 
    <button (click)="logout()">Logout</button> 
    </div> 
</div> 

<div *ngIf="isUser"> 
    <h2> Welcome {{name}} </h2> 
    </div> 
<div *ngIf="!isUser"> 
    <p> Login please! </p> 
    </div> 


    <router-outlet></router-outlet> 

AppModule:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule, Routes } from '@angular/router'; 


import { AppComponent } from './app.component'; 
import { DashboardComponent } from './Components/dashboard/dashboard.component'; 
import { MainComponent } from './Components/main/main.component'; 
import { PageNotFoundComponentComponent } from './Components/page-not-found-component/page-not-found-component.component'; 
import { FacebookService } from "app/Services/facebook.service"; 

const appRoutes: Routes = [ 


    { path: 'dashboard', component: DashboardComponent, canActivate: [] }, 
    { path: '', component: MainComponent }, 
    { path: '**', component: PageNotFoundComponentComponent } 

]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    DashboardComponent, 
    MainComponent, 
    PageNotFoundComponentComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(
     appRoutes, 
     { enableTracing: false } // <-- debugging purposes only 
    ) 
    ], 
    providers: [FacebookService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

答えて

1

があなたのlocalStorageでグローバルにそれらを保存します。応答のためのhttp://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial

+0

トレバーのTHX:ここ

は(ないのFacebookが、原則はまだ適用されます)を示しチュートリアルです。私は記事のように何かをしようとしました。ログイン時にlocalStorage.setItem( "isLoggedIn"、JSON.stringify(true))を実行します。 およびログアウト時にlocalStorage.removeItem( "isLoggedIn"); しかし、ページを更新してログアウトしようとすると、アクセストークンなしで** FB.logout()が呼び出されてしまいます。**エラー –

+0

他にもこの問題がありました。https://stackoverflow.com/question/43234724/angular2-sensitive-after-browser-refresh-information-after-browser-refresh – TrevorBrooks

+1

私はそれを自分で動作させようとしている間に非常にイライラしていましたが、私はあきらめて[Facebook SDK wrapper](https:// github.com/zyra/ngx-facebook)ログイン/ログアウト機能を実装する方が簡単でしたが、同様の問題が発生しました。ページの更新後、** authResponse:null、status: "unknown" **を試してみました** getLoginStatus()**そして、私は最終的にページリフレッシュ後にログイン状態を維持するためのシンプルな[解決策](https://stackoverflow.com/a/38894683/4429157)に行きました。私は** cookie:true **をfb.init()に追加しました。関数。手伝ってくれてありがとう!!! –