Angularアプリケーションに認証を実装します

キーポイント

• 単一ページアプリケーション（SPA）で認証を実装するには、ユーザーの資格情報を検証し、アクセストークンを返す認証エンドポイントを公開するサーバーが含まれます。このトークンは、サーバーに作成されたすべての安全なAPI要求に使用されます。
Angularでは、アクセストークンは、クライアントのシングルトンオブジェクトであるため、サービスまたは値に保存できます。ただし、ユーザーがページをリフレッシュするときにトークンの損失を防ぐために、トークンを保存するためにブラウザの永続性メカニズム（SessionStorageなど）を使用することをお勧めします。
潜在的なデータ盗難を防ぐために、ユーザーのステータスをサーバー側とクライアント側で維持および検証する必要があります。ユーザーがログアウトすると、対応するAPIが呼び出され（アクセストークンがリクエストヘッダーに含まれています）、SessionStorageのデータもクリアする必要があります。

認証と承認は、ほとんどすべての真剣なアプリケーションの重要な部分です。シングルページアプリケーション（SPA）も例外ではありません。アプリケーションは、すべてのデータと機能をどのユーザーにも公開しない場合があります。ユーザーは、アプリケーションの特定の部分を表示するか、アプリケーションで特定のアクションを実行するために認証する必要がある場合があります。アプリケーションのユーザーを識別するには、ログインする必要があります。

従来のサーバー駆動型アプリケーションと単一ページアプリケーションでは、ユーザー管理の実装が異なります。スパがサーバーコンポーネントと対話する唯一の方法は、Ajaxを使用することです。これは、ログインとログアウトにも当てはまります。

ユーザーの識別を担当するサーバーは、認証エンドポイントを公開する必要があります。 SPAは、検証のためにユーザーが入力した資格情報をこのエンドポイントに送信します。典型的なトークンベースの認証システムでは、サービスは、資格情報の検証後にログインしたユーザーの名前と役割を含むアクセストークンまたはオブジェクトを返す場合があります。クライアントは、サーバーに作成されたすべての安全なAPI要求でこのアクセストークンを使用する必要があります。

アクセストークンは複数回使用されるため、クライアントに保存するのが最適です。 Angularでは、クライアントのSingletonオブジェクトであるため、サービスまたは値に値を保存できます。ただし、ユーザーがページを再表示すると、サービスまたは値の値が失われます。この場合、ブラウザを保存するためにブラウザが保存することが最適です。

ログインを達成

今すぐいくつかのコードを見てみましょう。すべてのサーバー側のロジックを実装し、サービスが /API /ログインでRESTエンドポイントを公開してログイン資格情報をチェックし、アクセストークンを返すとします。認証エンドポイントにアクセスして、ログイン操作を実行する簡単なサービスを作成しましょう。後でこのサービスにさらに機能を追加します：

app.factory("authenticationSvc", function($http, $q, $window) {
  var userInfo;

  function login(userName, password) {
    var deferred = $q.defer();

    $http.post("/api/login", {
      userName: userName,
      password: password
    }).then(function(result) {
      userInfo = {
        accessToken: result.data.access_token,
        userName: result.data.userName
      };
      $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
      deferred.resolve(userInfo);
    }, function(error) {
      deferred.reject(error);
    });

    return deferred.promise;
  }

  return {
    login: login
  };
});

実際のコードでは、データをSessionStorageに保存するステートメントを別のサービスにリファクタリングすることをお勧めします。これが行われた場合、このサービスは複数の責任を引き受けるからです。デモをシンプルに保つために、私はそれを同じサービスに保ちます。このサービスは、アプリケーションログイン機能を処理するコントローラーで使用できます。

ルートを保護します

アプリケーションには、保護されたルートのセットがある場合があります。ユーザーがログインしていない場合、これらのルートのいずれかを入力しようとする場合、ユーザーはログインページに向けられる必要があります。これは、ルーティングオプションのResolveブロックを使用して実行できます。次のコードスニペットは、実装を示しています：

$routeProvider.when("/", {
  templateUrl: "templates/home.html",
  controller: "HomeController",
  resolve: {
    auth: ["$q", "authenticationSvc", function($q, authenticationSvc) {
      var userInfo = authenticationSvc.getUserInfo();

      if (userInfo) {
        return $q.when(userInfo);
      } else {
        return $q.reject({ authenticated: false });
      }
    }]
  }
});

Resolveブロックには、完了時にPromiseオブジェクトを返す必要がある複数のステートメントブロックを含めることができます。明確にするために、上記の名前はフレームワークによって定義されていません。ユースケースに基づいて、名前を任意の名前に変更できます。

ルーティングを渡すか、拒否される可能性があるいくつかの理由があります。シナリオに応じて、約束を解析/拒否するときにオブジェクトを渡すことができます。サービスにgetloggedinuser（）メソッドを実装していません。これは、サービスからLoggedinuserオブジェクトを返す簡単な方法です。

app.factory("authenticationSvc", function() {
  var userInfo;

  function getUserInfo() {
    return userInfo;
  }
});

上記のコードスニペットでPromiseによって送信されたオブジェクトは、$ Rootscopeでブロードキャストされます。ルートが解決された場合、イベント$ RegeChangesuccessがブロードキャストされます。ただし、ルーティングが失敗した場合、イベント$ RouteChangeErrorは放送されます。 $ RouteChangeErrorイベントを聞き、ユーザーをログインページにリダイレクトできます。イベントは$ Rootscopeレベルであるため、Runブロックにイベントハンドラーを添付するのが最善です。

app.run(["$rootScope", "$location", function($rootScope, $location) {
  $rootScope.$on("$routeChangeSuccess", function(userInfo) {
    console.log(userInfo);
  });

  $rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) {
    if (eventObj.authenticated === false) {
      $location.path("/login");
    }
  });
}]);

ページの処理

ユーザーがページの更新ボタンをクリックすると、サービスはステータスを失います。ブラウザのSessionStorageからデータを取得し、可変Loggedinuserに割り当てる必要があります。工場は一度だけ呼ばれるため、以下に示すようにこの変数を初期化関数に設定できます。

function init() {
  if ($window.sessionStorage["userInfo"]) {
    userInfo = JSON.parse($window.sessionStorage["userInfo"]);
  }
}

init();

キャンセル

ユーザーがアプリケーションからログアウトする場合、対応するAPIを呼び出し、アクセストークンがリクエストヘッダーに含まれている必要があります。ユーザーがログアウトした後、SessionStorageのデータをクリアする必要があります。次の例には、認証サービスに追加する必要があるログアウト関数が含まれています。

function logout() {
  var deferred = $q.defer();

  $http({
    method: "POST",
    url: logoutUrl,
    headers: {
      "access_token": userInfo.accessToken
    }
  }).then(function(result) {
    $window.sessionStorage["userInfo"] = null;
    userInfo = null;
    deferred.resolve(result);
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
}

結論

単一のページアプリケーションで認証を実装する方法は、従来のWebアプリケーションとは大きく異なります。ほとんどの作業はクライアントで行われているため、ユーザーのステータスもクライアントのどこかに保存する必要があります。ハッカーがクライアントシステムに保存されているデータを盗む可能性があるため、状態もサーバー側で維持および検証する必要があることを覚えておくことが重要です。

この記事のソースコードは、githubでダウンロードできます。

Angularアプリケーションで認証を実装する際のFAQ

Angularでwithcredentialsプロパティを使用する方法は？

withcredentialsプロパティは、HTTPリクエストに認証Cookieを含めるために使用されます。 Angularでは、httpclientモジュールで使用できます。リクエストを行うとき、withcredentialsプロパティをtrueに設定できます。例は次のとおりです。

this.http.get(url, { withCredentials: true }).subscribe(...);

これには、サーバーの前に送信された可能性のあるCookieが含まれます。

Angularのhttpinterceptorの目的は何ですか？

HTTPINTERCEPTORは、Angularの機能であり、サーバーに送信する前にHTTPリクエストをグローバルにインターセプトして変更できます。すべてのリクエストに認証トークンを追加したり、グローバルエラーの処理など、さまざまなタスクに非常に役立ちます。

Credentialsで処理するカスタムhttpinterceptorを作成する方法は？

カスタムHTTPINTERCEPTORを作成するには、HTTPINTERCEPTORインターフェイスを実装するサービスを作成する必要があります。例は次のとおりです。

app.factory("authenticationSvc", function($http, $q, $window) {
  var userInfo;

  function login(userName, password) {
    var deferred = $q.defer();

    $http.post("/api/login", {
      userName: userName,
      password: password
    }).then(function(result) {
      userInfo = {
        accessToken: result.data.access_token,
        userName: result.data.userName
      };
      $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
      deferred.resolve(userInfo);
    }, function(error) {
      deferred.reject(error);
    });

    return deferred.promise;
  }

  return {
    login: login
  };
});

このインターセプターは各要求をクローンし、withcredentialsプロパティをtrueに設定します。

Credentialsを使用してCORSエラーを受信するのはなぜですか？

CORS（オリジナルのリソース共有）は、ドメイン間でリソースが共有される方法を制限するセキュリティ機能です。 CORSエラーを受け取った場合、サーバーはドメインからのリクエストを受け入れるように構成されていません。これを解決するには、「アクセスコントロールアロウオリジン」ヘッダーにドメインを含めるようにサーバーを構成し、「アクセスコントロールアロークレデンス」をtrueに設定する必要があります。

xmlhttprequestを使用してxmlhttprequestを使用する方法は？

CREDENITIALSプロパティを備えたXMLHTTPREQUESTは、CreDentialsプロパティを備えたAngular HttpClientと同様に機能します。リクエストにCookieを含めるために使用されます。例は次のとおりです。

$routeProvider.when("/", {
  templateUrl: "templates/home.html",
  controller: "HomeController",
  resolve: {
    auth: ["$q", "authenticationSvc", function($q, authenticationSvc) {
      var userInfo = authenticationSvc.getUserInfo();

      if (userInfo) {
        return $q.when(userInfo);
      } else {
        return $q.reject({ authenticated: false });
      }
    }]
  }
});

これにより、Cookieを含むGETリクエストが指定されたURLに送信されます。

残りのFAQはhttpclientmoduleの使用に関連しており、記事のコアトピック（Angularの認証実装）とはほとんど関係がないため、ここでは省略されています。 これらの質問は、検索エンジンから簡単に見つけることができます。

以上がAngularアプリケーションに認証を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。