web-dev-qa-db-ja.com

Angular&Expressを使用してユーザーをログインする適切な方法は何ですか?

ユーザーがFacebookを使用してログインできるようにする簡単なWebサイトを構築し、ログインしているかどうかに基づいてカスタマイズされたアイテムを含むページを表示します。 、ただしログインしている場合は、ユーザー情報に基づいて他の情報を表示します。

私はpassportjs Facebookモジュール、Express、およびAngularを使用しています。パスポートは正しく実装されていると思いますが、1)ユーザーがログインしているかどうかを確認する方法、および2)Angularを使用してユーザー状態に基づいてビューを表示するためのベストプラクティス=&Express。ここで例を見てきましたが、これがAngular(- https://github.com/jaredhanson/passport-facebook

ありがとう!

26
manihiki

@wpalahnukの回答を完了するには、認証を処理するサービスまたはファクトリーを作成し、httpInterceptorを作成して、サーバーが送信する応答をインターセプトして、ユーザーがログインしているかどうかを確認する必要があります(stausコード401を確認)。

Expressパートでは、素晴らしいパスポートノードモジュールを使用してサーバー側の認証を処理する必要があります。

ここにすべての詳細があります: https://vickev.com/#!/article/authentication-in-single-page-applications-node-js-passportjs-angularjs

この記事は本当に素晴らしいです。BradGreen(AngularJSのGoogleのエンジニアリングディレクター)がこの投稿を締めくくります。

それが役に立てば幸い。

Angularでセキュリティに関する詳細を知りたい場合は、尋ねるだけで、私たちはあなたを助けることができて本当にうれしいです。

51
Thomas Pons

私はnode.jsとexpressを使用しませんが、遊びにはかなり安全です!フレームワークですが、プロセスは似ていると思います。

ユーザーのログイン状態をサーバーに問い合わせてこの変数を保存するサービスを作成する必要があります。その後、ユーザーのログイン状態を認識または変更する必要がある各コントローラーにこのサービスを注入できます。

このブログから実装を入手しました: http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

サービスは次のとおりです。

services.factory('UserService', [function() {
    var sdo = {
        isLogged: false,
        username: ''
    };
    return sdo;
}]);

コントローラーでユーザーにログインする例を次に示します

var User = UserService
scope.login = function() {
    var config = { /* ... */ } // configuration object

    $http(config)
    .success(function(data, status, headers, config) {
        if (data.status) {
            // succefull login
            User.isLogged = true;
            User.username = data.username;
        }
        else {
            User.isLogged = false;
            User.username = '';
        }
    })
    .error(function(data, status, headers, config) {
        User.isLogged = false;
        User.username = '';
    });
}

これについて詳しく説明しているブログ記事を読むことをお勧めします。他にもいくつかの関連記事があります

その後、User.isLogged変数を使用してさまざまな要素を非表示または表示し、それを使用して利用可能なルートを決定できます。

4
wpalahnuk