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

npm install -g http-server

文件处理身份验证后解析哈希：>

http-serverapp.js（图片：angularjs登录页面）> 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注销状态）

>主页创建

文件提供了一个带有登录/注销按钮和API调用按钮的简单UI。 文件使用>：>处理API调用

> authentication Service（）

> home.html此服务处理登录，注销和身份验证状态管理：> home.controller.js $http

nodejs服务器创建

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

使用express，auth.service.js，和

：

>创建nodejs服务器

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

>使用

启动服务器。 AngularJS应用程序现在可以向受保护的API端点提出请求。 >进一步的考虑和常见问题

>本文以其他Auth0功能（SSO，无密码登录，MFA）和其他支持的后端和移动SDK的方式结束。 一个全面的常见问题解答部分解决了有关社交登录，会话管理，路线安全性，刷新，错误处理，自定义，多因素身份验证，挂钩，测试和调试的常见问题。 切记用实际的auth0值替换{YOUR-AUTH0-DOMAIN}和{YOUR-AUTH0-API-AUDIENCE}的占位符。

>

以上是Auth0的Easy AngularJS身份验证的详细内容。更多信息请关注PHP中文网其他相关文章！