web-dev-qa-db-ja.com

更新後、ユーザーをFirebaseアプリにログインさせておくにはどうすればよいですか？

FirebaseとAngularに組み込まれたアプリケーションがあり、ページを更新した後もユーザーがログインしたままにできるようにしたいと思っています。現在、コントローラにバインドする2つの基本的な入力フィールドがあるログイン画面があります。

    this.email = "";
    this.pass = "";
    this.emessage = "";

    this.loginUser = function() {
        ref.authWithPassword({
            email: this.email,
            password: this.pass
        }, function(error, authData) {
            if (error) {
                console.log("Login Failed!", error);
                this.emessage = error.message;
                $scope.$apply();
            } else {
                dataStorage.uid = authData.uid;
                $location.path('/projects');
                $scope.$apply(); 
            }
        }.bind(this));
    }

これはすべて問題なく、うまくいきますが、ユーザーがページを更新すると、ログアウトされます。コントローラが読み込まれたときに、ユーザーがすでにログインしていて自動リダイレクトされているかどうかを確認する方法はありますか？ありがとう！

javascriptangularjsauthenticationfirebase
14
Justin Haddock

現在使用しているコードは、ユーザーがログオンするケースを処理します。ユーザーが既にログインしている場合に対処するには、認証状態を監視します。 認証状態の監視に関するFirebaseドキュメント から：

// Create a callback which logs the current auth state
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.onAuth(function(authData) {
  if (authData) {
    console.log("User " + authData.uid + " is logged in with " + authData.provider);
  } else {
    console.log("User is logged out");
  }
});

通常は、この関数のelseにログオンボタンのみを表示します。

21
Frank van Puffelen

私のWebアプリには、保護された機能を備えたパブリックページがあるという課題があります。次のコードでは、ユーザーは常にFirebase SDKを介して読み込まれます（ログインしている場合）。ただし、ページで認証が必要な場合は、ログインページにもリダイレクトされます。これはページのリロードでうまく機能します。

Router.beforeEach((to, from, next) => {

  // If route required authentication
  if (to.matched.some(record => record.meta.requiresAuth)) {

    // Load user
    firebase.auth().onAuthStateChanged(user => {

      // If user obj does not exist --> redirect to login page
      if (!user) {
        next({ name: 'login' });
      } else {
        store.commit("user/SET_USER", user);
        user.getIdToken().then(token => {
          store.commit("user/SET_TOKEN", token)
        });

        next();
      }
    });
  } else {

    // Path does not required auth - Still we check the user
    firebase.auth().onAuthStateChanged(user => {

      // If user exist (is logged in) --> store in state.
      if (user) {  
        store.commit("user/SET_USER", user);
        user.getIdToken().then(token => {
          store.commit("user/SET_TOKEN", token)
        });
        next();

      } else {
        next();
      }
    });
  }
})
2
segli

コメントで述べたように、受け入れられた答えはもはや機能しません。ユーザーがログインしているかどうかを確認する現在の方法は、

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  }
});

（ https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onAuthStateChanged から）

1
mflodin

その他のオプションsessionStorage

こちらをご覧ください：

Angular Firebase auth、ユーザーがログインしているかどうかを確認して、ナビゲーションからログインリンクを非表示にする方法

0
ztvmark

Angular 4を使用している場合は、 AngularFire2 -公式Firebase統合を使用できます。

AngularFire2をラップするAuthServiceがあります。サービスのコンストラクターでAuthSessionを取得し、必要なときに使用するだけです。例：

@Injectable()
export class AuthenticationService {

    private authState: any;

    constructor(public afAuth: AngularFireAuth) {
        this.afAuth.authState.subscribe((auth) => {
          this.authState = auth
        });
    }

    get user(): any {
        return this.authenticated ? this.authState : null;
    }
}

完全な認証サービスコード ここ 完全Angular 4 with Firebaseの例 ここ

0
Makah