web-dev-qa-db-ja.com

Backbone.js-ユーザーがログインしているかどうかの処理

まず、アプリに提供される静的ページをログインページにする必要がありますか？

第二に、サーバー側のコードは問題ありません（ユーザーが表示できないはずのデータは提供しません）。しかし、ユーザーがログインしていない場合、ログインフォームに戻ることをアプリに知らせるにはどうすればよいですか？

javascriptjquerybackbone.jsunderscore.js
42
Matthew

現在のユーザーがログインしているかどうかを確認するために、静的ページ（index.php）がクライアント側のコードからバックエンドを呼び出しています。たとえば、api/auth/logged_inこれはHTTPステータスコードを返します200ユーザーがログインしている場合、または400それ以外（Cookieベースのセッションを使用）：

appController.checkUser(function(isLoggedIn){
    if(!isLoggedIn) {
        window.location.hash = "login";    
    }

    Backbone.history.start();
});

...

window.AppController = Backbone.Controller.extend({

  checkUser: function(callback) {
     var that = this;

     $.ajax("api/auth/logged_in", {
       type: "GET",
       dataType: "json",
       success: function() {
         return callback(true);
       },
       error: function() {
         return callback(false);
       }
     });
  }
});
14
Sam

セッションの概念を使用して、ユーザーのログイン状態を制御します。

次のようなSessionModelとSessionCollectionがあります。

SessionModel = Backbone.Model.extend({
    defaults: {
        sessionId: "",
        userName: "",
        password: "",
        userId: ""
    },

    isAuthorized: function(){
       return Boolean(this.get("sessionId"));
    }

});

アプリの起動時に、グローバルに利用可能な変数activeSessionを初期化します。開始時には、このセッションは無許可であり、このモデルインスタンスにバインドされているビューは、それに応じてレンダリングできます。ログインしようとすると、最初にセッションを無効にしてログアウトします。

logout = function(){
    window.activeSession.id = "";
    window.activeSession.clear();
}

これにより、activeSessionをリッスンするビューがトリガーされ、mainViewがログインモードになり、ログインプロンプトが表示されます。次に、ユーザーからユーザー名とパスワードを取得し、次のようにactiveSessionに設定します。

login = function(userName, password){
    window.activeSession.set(
        {
            userName: userName,
            password: password
        },{
            silent:true
        }
    );
    window.activeSession.save();
}

これにより、backbone.syncを介してサーバーの更新がトリガーされます。サーバーには、セッションリソースPOSTアクションセットアップがあり、userNameとパスワードをチェックします。有効な場合、セッションのユーザー詳細を記入し、一意のセッションIDを設定して削除しますパスワードを入力し、結果を送り返します。

次に、backbone.syncをセットアップして、window.activeSessionのsessionIdをサーバーへの送信要求に追加します。セッションIDがサーバー上で無効な場合、HTTP 401が返され、logout（）がトリガーされ、ログインプロンプトが表示されます。

これはまだ完全には実装されていないため、ロジックにエラーがある可能性がありますが、基本的にはこれがアプローチです。また、上記のコードは実際のコードではなく、もう少し処理ロジックが含まれていますが、その要点です。

70
Jens Alm

これは非常に良いチュートリアルです http://clintberry.com/2012/backbone-js-apps-authentication-tutorial/

5
Tausif Khan

Html表示を制御するだけでなく、表示データも制御する必要があると思います。ユーザーはFirefoxを使用してjavascriptコードを変更できるためです。

詳細については、ログイン後にユーザーにトークンを与える必要があり、ユーザーがデータグリッドやツリーなどのページのコンポーネントにアクセスするたびに、ページはWebサービスからこれらのデータ（おそらくjson）を取得する必要があります。 Webサービスはこのトークンをチェックします。トークンが正しくないか期限切れの場合は、ユーザーデータを提供するのではなく、エラーメッセージを提供する必要があります。そのため、ユーザーがfirebugを使用してjsコードを変更しても、セキュリティを破ることはできません。

それはあなたの助けになるかもしれません。

2
Alex Yang