AngularJS 認証の簡単な方法

AngularJSは、シングルページアプリケーション (SPA) の作成に使われる、世界で最も人気のある JavaScriptフレームワークの1つです。Googleによって開発されたAngularは、SPAに必要なさまざまな要素を簡単に接続できる、多数のツールを提供しています。双方向のデータバインディング、HTTPリクエスト、テンプレート、ルーティングなどは、AngularJSコアライブラリとコミュニティによって提供されたサードパーティライブラリを使用して簡単に実行できます。

Angularは、他のSPAフレームワークと同様に、フロントエンドのみに関係し、サーバーサイドには依存しません。このデカップリングは、Angularが提供するクライアント側のアーキテクチャと共に、アプリケーションの成長に合わせてより大きな柔軟性を最終的に実現します。

AngularJS認証を最初から行うのは面倒かもしれませんが、必ずしもそういうわけではありません。以下の説明をお読みください。Auth0によってAngularJS認証を簡単に追加できる方法が、お分かりいただけるでしょう。

AngularJSアプリケーションは、従来のラウンドトリップ アプリケーションとは異なる動作をします。他のシングルページアプリケーション (SPA) フレームワークと同様に、AngularJSアプリは通常、クライアントがサーバーへXHR要求を送信することによってアクセスする、データAPI に依存しています。

AngularJSアプリへのユーザー認証の追加も異なります。従来のアプリケーションが使用するセッションベースの認証は、ユーザーの認証状態をサーバー上のメモリに保存することで機能しますが、これは SPAではうまく機能しません。

トークンは、AngularJS認証を実現するため、さらに良い方法を提供します。いくつかの異なるタイプの認証トークンを使えますが、JSON Web Token が最適なソリューションです。

JSON Web Token (JWT) はオープン標準 ( RFC 7519 ) であり、JSON オブジェクトとしてエンコードされたパーティ間で情報を安全に送信するための、コンパクトで自己完結型の方法を定義しています。JWT 認証が望ましい理由は多数あります。

コンパクトで自己完結型 : 認証に必要なすべてのデータがトークンに存在します。コンパクトなのですぐに送信できます。

デジタル署名 : トークンはサーバー上の秘密鍵によって検証されます。秘密鍵がわからない限り、JWTの内容を改ざんできないため安全です。

シンプル :JWT はシンプルで、オーバーヘッドも低くなっています。認証にステートレスな手段を提供しているので、オリジン間リソース共有(CORS) の問題に遭遇することなく、複数のサーバーとドメインで使用できます。

Auth0を使用すると、AngularJSアプリは、ユーザーがログインしたときにAPIと通信するだけで済みます。他のすべてのAPI 呼び出しは、通常どおりサーバーに直接送信されます。

当社のロックウィジェット、または独自のカスタムログイン画面を使用して、ユーザーは資格情報を当社の API に送信し、認証を受けます。成功するとJWTが返され、ブラウザのローカルストレージに保存されます。

auth.signin({}, function(profile, token) {
    // Success callback
    store.set('profile', profile);
    store.set('token', token);
    $location.path('/');
});

保護したいAPI エンドポイントは、ミドルウェアで保護されています。これをHTTPリクエストで送信するには、有効な JWTが必要です。ユーザーのJWTは認証ヘッダーとして送信され、秘密鍵によって検証されます。jwtInterceptor は、すべてのリクエストでユーザーの JWT を送信するように構成されています。

jwtInterceptorProvider.tokenGetter = ['store', function(store) {
    // Return the saved token
    return store.get('token');
}]; 

$httpProvider.interceptors.push('jwtInterceptor');

当社の ロックウィジェットは、AngularJSアプリ用に素晴らしくデザインされた、オールインワンの埋め込み可能なログインボックスです。登録、サインイン、パスワードのリセット、そしてその他の機能をすぐに使うことができます。ウィジェットのスタイルは、御社のブランドに合わせて簡単にカスタマイズでき、しかも既成のテーマを使うこともできます。

Angular 2はまだ正式にリリースされていないので、本番環境には推奨されていませんが、Angular 2アプリでAuth0 を引き続き使用することができます。当社のangular2-jwt ヘルパー ライブラリを使用すると、認証済みのHTTPリクエストをサーバーに簡単に送信し、ユーザーの認証状態に基づいてルーティングを処理できます。