web应用程序的身份验证_向任何应用程序添加身份验证的最简单方法

最新推荐文章于 2024-05-04 21:20:11 发布

culiu9261

最新推荐文章于 2024-05-04 21:20:11 发布

阅读量1.1k

点赞数

文章标签： java 数据库 js javascript vue ViewUI

原文链接：https://scotch.io/tutorials/the-easiest-way-to-add-authentication-to-any-app

版权

web应用程序的身份验证

TL;DR: Implementing authentication in modern web apps is a pain, but it doesn't have to be. Auth0 is the easiest way to add authentication to your app and you can get started easily with a free plan that includes up to 7,000 regular active users and two social providers. A user is considered active if they've logged in sometime in the last 30 days. For a lot of companies, that's only 15% of their user base. Read on to learn more about the challenges of modern authentication and how Auth0 solves them!

TL; DR：在现代Web应用程序中实现身份验证很麻烦，但并非必须如此。 Auth0是向您的应用程序添加身份验证的最简便方法，您可以轻松地开始使用免费计划，该计划包括多达7,000个常规活动用户和两个社交提供程序。如果用户在过去30天内的某个时间登录过，则认为该用户处于活动状态。对于许多公司而言，这仅占其用户群的15％。继续阅读以了解有关现代身份验证挑战以及Auth0如何解决它们的更多信息！

现代身份验证的问题 (The Problem with Modern Authentication)

Authentication is an essential part of nearly all non-trivial applications and is a very important thing to get right. As developers, we've been able to enjoy a lot of great improvements to the web in recent years, but unfortunately, implementing authentication in our apps hasn't been one of them. There are a few key reasons for this, including:

身份验证几乎是所有非平凡应用程序中必不可少的部分，并且是正确的非常重要的事情。作为开发人员，近年来，我们已经能够对Web进行许多重大改进，但是不幸的是，在我们的应用程序中实现身份验证并不是其中之一。造成这种情况的几个关键原因包括：

A shifting identity landscape where we are now logging in with social providers like Google, Facebook, Twitter, and others
不断变化的身份格局，我们现在正在与Google，Facebook，Twitter等社交服务提供商登录
A desire for tighter security through features like multi-factor authentication, passwordless login, and single sign-on
通过多因素身份验证 ，无密码登录和单点登录等功能，希望获得更严格的安全性
A new approach for application architecture that makes it more difficult to implement authentication
一种新的应用程序体系结构方法，使实现身份验证更加困难

社会认证 (Social Authentication)

There are a number of open source libraries out there (such as PassportJS for Node) that do a great job of making it easier to add social authentication to apps. However, this can still mean a fair bit of set up and configuration for the developer to manage.

那里有许多开源库（例如PassportJS for Node）在简化向应用程序添加社交身份验证方面做得很好。但是，这仍然意味着开发人员可以进行大量的设置和配置。

现代身份验证功能 (Modern Authentication Features)

Features like passwordless login and single sign-on are growing in popularity. If you've logged into Slack from mobile, you've probably seen the option of being sent a "magic link" to authenticate. This is really convenient for accessing the app quickly, especially if you've got a long and complex password.

无密码登录和单点登录等功能正在日益普及。如果您从移动设备登录到Slack，则可能已经看到了发送“魔术链接”进行身份验证的选项。这对于快速访问应用程序非常方便，特别是在您拥有复杂的长密码的情况下。

If you've worked in a large organization that uses a lot of different apps, you might know the pain of needing to authenticate against each one of them. This is solved with single sign-on, which allows users to access multiple apps with the same set of credentials.

如果您在使用许多不同应用程序的大型组织中工作过，您可能会知道需要针对每个应用程序进行身份验证的痛苦。通过单点登录即可解决此问题，该操作使用户可以使用同一组凭据访问多个应用程序。

Multi-factor authentication, which is also referred to as two-step verification, is now being used widely as an extra layer of security. Implementations of this feature vary, but in general, when the user logs in to an app, they are sent a verification code via text message (or through an app like Google Authentictor) that they must enter to proceed.

多因素身份验证 （也称为两步验证）现在被广泛用作额外的安全层。此功能的实现有所不同，但通常，当用户登录到应用程序时，会通过短信（或通过Google Authentictor之类的应用程序）向用户发送验证码，然后才能输入验证码。

These two features are great, but are difficult to implement and can be error-prone.

这两个功能很棒，但是难以实现并且容易出错。

单页应用程序的身份验证 (Authentication for Single Page Apps)

Session and cookie-based authentication can still be made to work in modern single page apps, but this method can break down quickly and generally doesn't scale well. Instead, if we're building apps with frameworks like Angular, React, Vue, Ember, and others, it is arguably best to authenticate users with JSON Web Tokens (JWT). This method is much more flexible and scalable than others, and has been widely adopted.

基于会话和cookie的身份验证仍然可以在现代的单页应用程序中使用，但是这种方法很快就会崩溃，而且通常无法很好地扩展。相反，如果我们使用Angular，React，Vue，Ember等框架构建应用程序，那么最好使用JSON Web令牌（JWT）对用户进行身份验证。这种方法比其他方法更加灵活和可扩展，并且已被广泛采用。

While JWT authentication is great for modern apps, it comes at the cost of being time consuming to implement. Wiring up all the pieces on the front-end and backend can require a lot of effort and create delays in project timelines.

尽管JWT身份验证对于现代应用程序非常有用，但代价是实现起来很耗时。连接前端和后端的所有组件可能需要大量的工作，并会导致项目时间表延迟。

实施现代认证的最简单方法 (The Easiest Way to Implement Modern Authentication)

Auth0 solves all the above mentioned problems for you by providing an identity and authentication service that takes the pain out of implementing auth in modern apps. You can use any social authentication provider and implement features like multi-factor auth and single sign-on, all at the flip of a switch. This is huge because instead of focusing your development effort on making sure the authentication process is right, you can concentrate on building your actual application.

Auth0通过提供身份和身份验证服务为您解决了上述所有问题，从而减轻了在现代应用程序中实现身份验证的麻烦。您可以使用任何社交身份验证提供程序，并只需轻按一下即可实现多因素身份验证和单点登录等功能。这是巨大的，因为您可以将精力集中在构建实际的应用程序上，而不必将开发精力集中在确保身份验证过程正确无误上。

Auth0 can be used in web and mobile apps with nearly any front-end and backend combination and is perfect for both SPAs and traditional web apps. There are a lot of ready-to-go integrations available for almost any language and framework with excellent documentation.

Auth0几乎可以与任何前端和后端组合一起用于Web和移动应用程序，并且非常适合SPA和传统Web应用程序。具有出色文档的几乎所有语言和框架都有很多现成的集成可用。

新定价==免费价值吨！ (New Pricing == Tons of Value for Free!)

At Auth0, we love to make developers' lives easier. As part of this committment, we just launched a new pricing plan that gives you a ton of value at no cost. For absolutely free, you can use two social providers and authenticate up to 7,000 regular active users with unlimited logins. A regular active user is one that has logged in sometime in the last 30 days. For a lot of companies, this only accounts for 15% of their userbase! This is perfect if you want to create a minimum viable product quickly without paying anything for a third party authentication service.

在Auth0，我们希望使开发人员的生活更轻松。作为这项承诺的一部分，我们刚刚启动了一个新的定价计划，该计划免费为您提供大量价值。您可以免费使用两个社交服务提供商，并使用无限的登录身份验证多达7,000个常规活动用户，以实现绝对免费。常规活动用户是指过去30天内已登录的用户。对于许多公司而言，这仅占其用户群的15％！如果您想快速创建最低限度的产品而无需为第三方认证服务支付任何费用，则这是完美的选择。

到底有多容易？ (Just How Easy Is It?)

Auth0 has integrations for nearly all popular frameworks and languages. Not using a framework? No problem! For web apps, all you really need is some JavaScript. Let's see how easy it is to get going. We'll set things up for a vanilla JavaScript single page app in this case, but you can also use Auth0 for traditional round-trip apps too.

Auth0具有几乎所有流行框架和语言的集成。不使用框架？没问题！对于Web应用程序，您真正需要的只是一些JavaScript。让我们看看开始是多么容易。在这种情况下，我们将为普通JavaScript单页应用程序进行设置，但是您也可以将Auth0用于传统的双向应用程序。

步骤0：注册Auth0 (Step 0: Sign Up for Auth0)

注册您的免费帐户，以按照以下步骤操作！

步骤1：添加Auth0Lock脚本 (Step 1: Add the Auth0Lock Script)

Lock is our login box widget that comes fully ready to use. You can bring it in from our CDN, or you can find it on NPM.

Lock是我们的登录窗口小部件，可以随时使用。您可以从我们的CDN引入它，也可以在NPM上找到它。

<!-- index.html -->

  <!-- Auth0Lock script -->
  <script src="https://cdn.auth0.com/js/lock-8.1.min.js"></script>

  <!-- Setting the right viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

步骤2：配置Auth0Lock (Step 2: Configure Auth0Lock)

Configure Auth0Lock by creating an instance of the service.

通过创建服务实例来配置Auth0Lock。

// app.js

var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_DOMAIN');

步骤3：实施登录 (Step 3: Implement the Login)

The first thing you'll need is a login button that will trigger the Lock widget.

您需要做的第一件事是一个登录按钮，它将触发Lock小部件。

<!-- index.html -->

  ...

  <button id="btn-login" class="btn-login">Sign In</button>

  ...

Now you can add an event listener to that button that will open up Lock.

现在，您可以在该按钮上添加一个事件侦听器，这将打开Lock。

// app.js

document.getElementById('btn-login').addEventListener('click', function() {
  lock.show(function(err, profile, token) {
    if (err) {
      // Error callback
      console.error("Something went wrong: ", err);
    } else {
      // Success calback  

      // Save the JWT token.
      localStorage.setItem('userToken', token);
      // Save the profile
      localStorage.setItem('userProfile', JSON.stringify(profile));
    }
  });
});

Now when the Sign In button is clicked, the Lock widget will be shown.

现在，单击“ 登录”按钮时，将显示“锁定”小组件。

You can sign up a test user and log them in with the Lock widget. When the user is logged in, their token and profile will be saved in local storage.

您可以注册测试用户，然后使用“锁定”小部件登录。用户登录后，其令牌和个人资料将保存在本地存储中。

Note: Make sure to add your test domain (http://localhost:9000 in this case) to the Allowed Origins in your Auth0 dashboard.

注意：确保将测试域（在本例中为http：// localhost：9000 ）添加到Auth0仪表板的允许的来源中。

步骤4：对API进行经过身份验证的调用 (Step 4: Make Authenticated Calls to an API)

With the user's token in local storage, you can now make authenticated calls to your API by attaching the JWT as an Authorization header.

使用本地存储中的用户令牌，您现在可以通过将JWT附加为Authorization标头来对API进行经过身份验证的调用。

// app.js

var getFoos = fetch('/api/foo', {
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('userToken')
  },
  method: 'GET',
  cache: false
});

getFoos.then(function (response) {
  response.json().then(function (foos) {
    console.log('the foos:', foos);
  });
});

This example uses the Fetch API, but you can use plain XHR calls or other libraries for making XHR calls as well.

本示例使用Fetch API ，但是您也可以使用普通XHR调用或其他库来进行XHR调用。

步骤5：添加注销 (Step 5: Add Logout)

All you need to do to log the user out is remove their token and profile from local storage.

注销用户所需要做的就是从本地存储中删除其令牌和配置文件。

// app.js

localStorage.removeItem('userToken');
localStorage.removeItem('userProfile');
window.location.href = "/";

And that's it! You've got authentication set up on the front end. You'll also need to set up JWT middleware on your protected API routes. This can be done easily with our integrations for backends like NodeJS.

就是这样！您已经在前端设置了身份验证。您还需要在受保护的API路由上设置JWT中间件。这很容易与我们的整合来完成像后端的NodeJS 。

结语 (Wrapping Up)

Adding authentication to your app is very easy with Auth0. With a free plan that provides username/password database and two social providers for up to 7,000 regular active users, Auth0 is the easiest way to get up and running quickly.

使用Auth0，将身份验证添加到您的应用非常容易。借助免费计划，该计划可提供用户名/密码数据库以及两个社交提供商（最多可容纳7,000个常规活动用户），因此Auth0是快速启动和运行的最简单方法。

If you haven't done so already, sign up for a free account today! You can also check out our pricing plans to see our other packages.

如果您还没有注册，请立即注册一个免费帐户！您也可以查看我们的定价计划以查看我们的其他套餐。

Say hi to us on Twitter and shoot us an email if you need any help getting going.

在Twitter上向我们问好，如果需要任何帮助，请给我们发送电子邮件。

This content is sponsored via Syndicate Ads.

此内容是通过Syndicate Ads赞助的。

翻译自: https://scotch.io/tutorials/the-easiest-way-to-add-authentication-to-any-app

web应用程序的身份验证

culiu9261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web应用程序的身份验证_向任何应用程序添加身份验证的最简单方法

web应用程序的身份验证TL;DR: Implementing authentication in modern web apps is a pain, but it doesn't have to be. Auth0 is the easiest way to add authentication to your app and you can get started easily with a...
复制链接

扫一扫