この記事は、Auth0のAPIの変更を反映するために更新されました（11.05.2017）。シングルページアプリケーション（SPA）の保護(hù)は困難です。 スパは、多くの場(chǎng)合、個(gè)別のフロントエンド（Angularjsなど）とバックエンドデータAPIで構(gòu)成されています。従來のセッションベースの認(rèn)証は、APIに狀態(tài)を?qū)毪?、休憩原則に違反し、モバイルアプリの統(tǒng)合を妨げるため、このアーキテクチャには不適切です。 このアプローチの重要な利點(diǎn)：

ステートレス認(rèn)証：

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

基本認(rèn)証を超えて、堅(jiān)牢なAngularJS実裝には次のものが必要です

條件付きレンダリング：

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

ルート保護(hù)：

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

ユーザー狀態(tài)が変更されたときにUIを更新します（jwt expiration、logout）。

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

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

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

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

  npm install -g http-server

  http-serverファイルは、認(rèn)証後にハッシュを解析する処理を処理します：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ログイン狀態(tài)）

  （畫像：Angularjsログアウト狀態(tài)）

  ホームページの作成

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

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

  home.html認(rèn)証サービス（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(...);
  };

  このサービスは、ログイン、ログアウト、および認(rèn)証狀態(tài)管理を処理します

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

  express、

  、

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

  、および

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

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

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

以上がAuth0を使用したEasy AngularJS認(rèn)証の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。