Auth0を使用したEasy AngularJS認証

この記事は、Auth0のAPIの変更を反映するために更新されました（11.05.2017）。シングルページアプリケーション（SPA）の保護は困難です。 スパは、多くの場合、個別のフロントエンド（Angularjsなど）とバックエンドデータAPIで構成されています。従来のセッションベースの認証は、APIに状態を導入し、休憩原則に違反し、モバイルアプリの統合を妨げるため、このアーキテクチャには不適切です。 このアプローチの重要な利点：

ステートレス認証：

JSON Webトークン（JWTS）セキュア、ステートレス認証を有効にし、モバイルバックエンドとシームレスに統合します。
• 単純化されたユーザー管理：auth0ソーシャルログインやマルチプロファイルサポートなど、ユーザー認証管理を簡素化します。
• 合理化された統合：Auth0のライブラリとAngularJSモジュールは、認証プロセスを簡素化し、トークンの取り扱いとセッション管理を自動化します。
セキュリティの強化：
• JWTSは、保護されたAPIエンドポイントにアクセスするときに、ローカルストレージに安全に保存されています。 簡単なソーシャルログイン統合：
シンプルなauth0ダッシュボードトグルを使用して人気のあるソーシャルログインを有効にします。
• セキュアAPIエンドポイント：JWT検証を備えたnodeJSサーバーはAPIエンドポイントを保護し、認証されたユーザーのみが機密データにアクセスするようにします。
• JSON Web Tokens（jwts）：ステートレスソリューション
• JWTSは、セッションベースの認証の制限を克服します。 このオープン標準は、AngularJSのフロントエンドからバックエンドAPIへのリクエストを認証します。 重要なことに、JWTSにはカスタムクレーム付きのJSONペイロードが含まれています。 AngularJS認証実装 JWTSは、AngularJS認証に最適です。 安全なAPIエンドポイントは、ユーザーのJWTをローカルストレージに保存し、HTTPリクエストの承認ヘッダーに含めることによりアクセスされます。 無効または不足しているJWTSは、アクセスの拒否をもたらします

基本認証を超えて、堅牢なAngularJS実装には次のものが必要です

条件付きレンダリング：

JWTの有効性に基づく要素（ログイン/ログアウトボタン）を表示/非表示。

ルート保護：

認証されていないユーザーが特定のルートにアクセスしないようにします ui更新：

ユーザー状態が変更されたときにUIを更新します（jwt expiration、logout）。

このチュートリアルは、保護されたリソースアクセス用のNodeJSサーバーを含む、完全なAngularJS認証実装を示しています。 ユーザーデータベースとJWT発行を構築する代わりに、Auth0の無料層（最大7,000人のアクティブユーザー）を活用します。 ソーシャルログイン統合も表示されます

（画像：auth0ダッシュボード）

• auth0 setup
• 1. auth0アカウントを作成します：auth0アカウントにサインアップして、ドメイン名（例：yourcompany.auth0.com）を選択します。 これは後で変更することはできません。
  2. デフォルトのアプリを構成します：auth0ダッシュボードで、クライアントセクションに移動し、デフォルトのアプリにアクセスします。 許可されたOrigins および許可されたコールバックurls（たとえば、このチュートリアルの）を構成します。 http://localhost:8080
  api：
  3. を作成しますapisセクション、新しいAPIを作成します。アプリケーション）。 ソーシャルアイデンティティプロバイダーを有効にする（オプション）：接続のオプションを切り替えることにより、ソーシャルログイン（Google、Facebookなど）を有効にします＆gt;
  ソーシャル
  4. セクション。 インストールと構成
  必要なパッケージをインストールします（GitHubリポジトリをフォークした場合は
  を使用）：
  を使用してサーバーを起動します。 Auth0を統合するには、

  およびbower installを構成します。 プレースホルダーの値をauth0資格情報に置き換えます：

  npm install -g http-server

  http-serverファイルは、認証後にハッシュを解析する処理を処理します：app.js index.html

  // app.js (snippet)
  angularAuth0Provider.init({
    clientID: AUTH0_CLIENT_ID,
    domain: AUTH0_DOMAIN,
    responseType: 'token id_token',
    redirectUri: AUTH0_CALLBACK_URL,
    audience: AUTH0_API_AUDIENCE,
  });

  （画像：Angularjsログインページ）

  app.run.js

  // app.run.js (snippet)
  authService.handleParseHash();

  （画像：Angularjsログイン状態）

  （画像：Angularjsログアウト状態）

  ホームページの作成

  ファイルは、ログイン/ログアウトボタンとAPIコールボタンを備えたシンプルなUIを提供します。

  ファイルは、：を使用してAPI呼び出しを処理します

  home.html認証サービス（home.controller.js）$http

  // home.controller.js (snippet)
  vm.getSecretMessage = function() {
    $http.get('http://localhost:3001/api/private', {
      headers: { Authorization: 'Bearer ' + localStorage.getItem('access_token') }
    })
    .then(...)
    .catch(...);
  };

  このサービスは、ログイン、ログアウト、および認証状態管理を処理します

  auth.service.jsnodejsサーバーの作成

  express、

  、

  // auth.service.js (snippet)
  function authService($state, angularAuth0, authManager) {
    // ... login, handleParseHash, logout, isAuthenticated functions ...
  }

  、および

  ：を使用してnodejsサーバーを作成します

  でサーバーを起動します。 AngularJSアプリは、保護されたAPIエンドポイントにリクエストを行うことができます。 express-jwtjwks-rsaさらなる考慮事項とFAQ cors

  この記事は、追加のAuth0機能（SSO、Passwordless Login、MFA）およびその他のサポートされているバックエンドおよびモバイルSDKのセクションで終了します。 包括的なFAQセクションでは、ソーシャルログイン、セッション管理、ルートセキュリティ、トークンリフレッシュ、エラー処理、カスタマイズ、マルチファクター認証、フック、テスト、デバッグに関する一般的な質問に対処します。 {YOUR-AUTH0-DOMAIN}や{YOUR-AUTH0-API-AUDIENCE}などのプレースホルダーを実際のauth0値に置き換えることを忘れないでください。

以上がAuth0を使用したEasy AngularJS認証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。