web-dev-qa-db-ja.com

Angular JSアプリケーションで認証を処理する方法

私はangular jsアプリで認証システムを実装しています。

私はそれを以下のように計画しています：

  1. ユーザー情報の取得（名前とログインフォームからのパス）
  2. ユーザーが存在するかどうかを確認します
  3. 存在する場合、サーバーはセッションCookieで応答し、フロントエンドは特定のページにリダイレクトします。
  4. その後、ユーザーはAPIリクエストを生成するタスクを実行します
  5. APIリクエストには、手順3で送信されたCookie情報が含まれている必要があります
  6. サーバーは、Cookieが生成されたかどうかを確認し、Cookieが見つかった場合は、APIリクエストの結果で応答します。そして私のサービスでは、次のようなことをしています
 MyApp.service（ 'myAuth'、function（$ http、$ q）{
 this.authHeader = null; 
 this.checkAuth = function（）{
 // APIコールを行い、成功するとthis.authHeader = response 
} 
 this.isAuthenticaed = function（）{
 this.authHeader？return this.authHeder：return false ; 
}

ログインフォームを送信した後、checkAuthを呼び出してサーバーからセッションCookieを取得します。次のREST呼び出しと、ユーザーがアプリケーション全体をナビゲートするときのCookie情報の追加方法ログイン後、isAuthenticaedがtrueまたはfalseになるたびに確認したいのですが、Angularjsで別のページに移動すると、最初の呼び出しからtrueに設定した後にリセットされますか？ところで、私は以前にエントリーをチェックしたので、エントリーは知りたいものではありません。

sessionauthenticationangularjscookies
18
arnold

あなたのバックエンドについてはわかりませんが、これは私がそれをする方法です

  • 別のログインページを作成します（angularサブビューまたはモーダルダイアログではない専用URL）。
  • ユーザーが認証されていない場合、このログインページにリダイレクトされます。これはサーバーのリダイレクトによって行われます。このページでは、ユーザー\パスワードをサーバーに送信するだけなので、angularフレームワークを使用する場合と使用しない場合があります。
  • ログインページからPOST（AJAXリクエストではない）を作成し、サーバーで確認します。
  • サーバーで認証Cookieを設定します。 （異なるフレームワークでは異なる方法で処理されます。ASP.Netはフォーム認証Cookieを設定します。）
  • ユーザーが認証されたら、ユーザーを実際のangularアプリにリダイレクトし、そのすべてのコンポーネントをロードします。

これにより、Angularのクライアント側で認証を管理するために必要なコードが節約されます。ユーザーがこのページにアクセスすると、ユーザーは認証され、Cookieを取得します。

また、ブラウザのデフォルトの動作では、各リクエストでドメインに関連付けられたすべてのCookieが送信されるため、angularがCookieを送信するかどうかを心配する必要はありません。

35
Chandermani

Http-auth-interceptorを使用します。 http://ngmodules.org/modules/http-auth-interceptor

バックエンド（asp.net mvc）で簡単な認証サービスを構築し、httpエラーを返します401ユーザーが認証されていない場合。次に、SPAサイトのログインビューでエラーを処理します。

7
S3PP3L

前の回答で出されたアイデアは機能しますが、私はそれらがやり過ぎだと思います。この複雑なものは何も必要ありません。

次のREST呼び出しをしながら、Cookie情報を追加する方法

withCredentialsをデフォルトで_$httpProvider_の内部でオンにします：

_app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.withCredentials = true;
}]);
_

次に、CORS関連のヘッダーからワイルドカード（ある場合）を削除し、サーバー側でallow-credentialsを設定します。私の場合、Python + Flask + Flask-Restful を使用すると、非常に簡単で次のようになります。

_import Flask
from flask_restful import Api
app = Flask(__name__)
api = Api(app)
api.decorators = [cors.crossdomain(Origin='http://localhost:8100', credentials=True)]
_

これで、Cookieがブラウザによって自動的かつ透過的に設定および返されます。詳細については、これらのスレッドを参照してください。

ログイン後にユーザーがアプリケーション全体をナビゲートするときisAuthenticaed trueまたはfalseを毎回確認したい

上記で提案したように、認証セッションが期限切れまたは削除された場合、サーバーに401を返させ、_$httpInterceptor_ in Angularを使用して次のようにキャッチします。

_app.config(function($httpProvider) {
    var interceptor =
        function($q, $rootScope) {
            return {
                'response': function(response) {
                    return response;
                 },
                'responseError': function(rejection) {
                    if (rejection.status==401) {
                        // Modify this part to suit your needs.
                        // In my case I broadcast a message which is
                        // picked up elsewhere to show the login screen.
                        if (!rejection.config.url.endsWith('/login'))
                        {
                            $rootScope.$broadcast('auth:loginRequired');
                        }
                    }

                    return $q.reject(rejection)
                 }
            }
        };

    $httpProvider.interceptors.Push(interceptor);
});
_
4
Lane Rettig

（開示：私はUserAppの開発者の1人です）

サードパーティのサービス serApp を AngularJSモジュール とともに使用できます。

スタートガイド を確認するか、 Codecademyのコース を受講してください。動作の例を次に示します。

  • エラー処理を伴うログインフォーム：

    _<form ua-login ua-error="error-msg">
    <input name="login" placeholder="Username"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Log in</button>
    <p id="error-msg"></p>
</form>
_

    ユーザー情報には、userサービスを使用してアクセスします：_user.current.email_

    またはテンプレートで：_<span>{{ user.email }}</span>_

  • エラー処理を伴う登録フォーム：

    _<form ua-signup ua-error="error-msg">
    <input name="first_name" placeholder="Your name"><br>
    <input name="login" ua-is-email placeholder="Email"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Create account</button>
    <p id="error-msg"></p>
</form>
_

    _ua-is-email_は、ユーザー名がメールと同じであることを意味します。

  • どのルートを公開するか、どのルートをログイン形式にするかを指定する方法：

    _$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
$routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
_

    .otherwise()ルートは、ログイン後にユーザーをリダイレクトする場所に設定する必要があります。例：

    $routeProvider.otherwise({redirectTo: '/home'});

  • ログアウトリンク：

    _<a href="#" ua-logout>Log Out</a>_

  • ログイン時にのみ表示される要素を非表示にします：

    _<div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>_

また、バックエンドサービスに対して認証するには、user.token()を使用してセッショントークンを取得し、AJAXリクエストで送信します。バックエンドで-を使用します。 serApp API トークンが有効かどうかを確認します。

助けが必要な場合は、私に知らせてください:)

1
Timothy E. Johansson