Auth0的Easy AngularJS身份驗證

>本文已更新（11.05.2017），以反映對Auth0 API的更改。確保單頁應用程序（SPA）可能具有挑戰性。 水療通常由單獨的前端（例如AngularJS）和後端數據API組成。傳統的基於會話的身份驗證不適合此體系結構，因為它將狀態引入API，違反了REST原則並阻礙移動應用程序集成。

>這種方法的關鍵優勢：

>

• >無狀態身份驗證：json web令牌（JWTS）啟用安全，無狀態的身份驗證，與移動後端無縫集成。 >
• 簡化的用戶管理： auth0簡化了用戶身份驗證管理，包括社交登錄和多核心支持。
• >簡化的集成：>增強的安全性： JWTS在訪問受保護的API端點時牢固地存儲在本地存儲中。
• > 啟用流行的社交登錄，並使用簡單的auth0儀表板切換。
• 安全API端點：帶有JWT驗證的NodeJS服務器保護API端點，確保只有認證的用戶訪問敏感數據。
• JSON Web令牌（JWTS）：無狀態解決方案 JWTS克服了基於會話的身份驗證的局限性。 此開放標準驗證了從AngularJS前端到後端API的請求。 至關重要的是，JWT包含一個帶有自定義索賠的JSON有效載荷，以防篡改的數字簽名。

angularJS身份驗證實現

JWTS是AngularJS身份驗證的理想選擇。 通過將用戶的JWT存儲在本地存儲中，並將其包括在HTTP請求的授權標題中，可以訪問安全的API端點。 無效或丟失的JWT導致訪問拒絕。

超過基本身份驗證，強大的AngularJS實現需要：

基於JWT有效性。

>條件渲染：

show/hide元素（登錄/註銷按鈕）。

路線保護：

防止未經身份驗證的用戶訪問特定路線。

UI更新：

>當用戶狀態更改時更新UI（JWT到期，註銷）。
• >本教程演示了一個完整的AngularJS身份驗證實現，包括用於保護資源訪問的NodeJS服務器。 我們沒有構建用戶數據庫和JWT發行，而是利用Auth0的免費層（最多7,000個活躍用戶）。 還顯示了社會登錄集成。
• （圖像：auth0儀表板）
• auth0設置

1. >創建一個auth0帳戶：註冊一個auth0帳戶，選擇域名（例如，）。 以後再也無法更改。 yourcompany.auth0.com>
2. 配置默認應用程序：在Auth0儀表板中，導航到> clients 部分，並訪問 default app。 configure允許的origins>和允許回調URLS（例如，對於本教程）。 >在http://localhost:8080apis
段下創建一個api：，創建一個新的api，並指出其
3. sidentifier（用作aigairin應用程序）。 >>啟用社交身份提供者（可選）：啟用社交登錄（例如Google，Facebook），通過在 connections ＆gt中切換選項； >社交
節。
4. 安裝和配置 安裝必要的軟件包（如果您已經分配了GitHub repo，則使用
）：>

>使用啟動服務器。配置和

集成了auth0。 用您的auth0憑據替換佔位符值：

bower install

<code class="language-bash">npm install -g http-server</code>

文件處理身份驗證後解析哈希：>

http-serverapp.js（圖片：angularjs登錄頁面）> index.html

<code class="language-javascript">// app.js (snippet)
angularAuth0Provider.init({
  clientID: AUTH0_CLIENT_ID,
  domain: AUTH0_DOMAIN,
  responseType: 'token id_token',
  redirectUri: AUTH0_CALLBACK_URL,
  audience: AUTH0_API_AUDIENCE,
});</code>

（圖片：angularjs登錄狀態）app.run.js>

<code class="language-javascript">// app.run.js (snippet)
authService.handleParseHash();</code>

（圖像：angularJS註銷狀態）

>主頁創建

文件提供了一個帶有登錄/註銷按鈕和API調用按鈕的簡單UI。 文件使用>：>處理API調用

> authentication Service（）

> home.html此服務處理登錄，註銷和身份驗證狀態管理：> home.controller.js $http

nodejs服務器創建

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

使用express，auth.service.js，和

：

>創建nodejs服務器

<code class="language-javascript">// auth.service.js (snippet)
function authService($state, angularAuth0, authManager) {
  // ... login, handleParseHash, logout, isAuthenticated functions ...
}</code>

>使用

啟動服務器。 AngularJS應用程序現在可以向受保護的API端點提出請求。 >進一步的考慮和常見問題

>本文以其他Auth0功能（SSO，無密碼登錄，MFA）和其他支持的後端和移動SDK的方式結束。 一個全面的常見問題解答部分解決了有關社交登錄，會話管理，路線安全性，刷新，錯誤處理，自定義，多因素身份驗證，掛鉤，測試和調試的常見問題。 切記用實際的auth0值替換{YOUR-AUTH0-DOMAIN}和{YOUR-AUTH0-API-AUDIENCE}的佔位符。

>

以上是Auth0的Easy AngularJS身份驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！