Vue.js使用$ ajax和vue——实现OAuth注册、登录、注销和API调用的资源

摘要

在前一篇文章中，我们介绍了如何使用vue资源来处理HTTP请求。结合服务器端的REST API，我们可以轻松构建一个添加、删除、检查和修改的应用程序。这个应用程序总是留下一个问题。访问REST api时，Web App没有通过任何认证，使得服务器的REST API不安全。只要有人知道API地址，就可以调用API来修改和删除服务器的资源。今天，我们将讨论如何结合Web API来限制对资源的访问。

本文的主要内容如下：

引入传统Web应用和基于rest的Web应用，引入OAuth认证流程和密码模式，创建基于ASP.NET身份的Web API应用，实现基于$的OAuth注册、登录、注销和API调用。ajax，实现基于vue-resource的OAuth注册、登录、注销和API调用，本文的最后一个例子是结合上一篇文章的凝乳、本文的登录、注册、注销和API调用功能实现的。

本文中9个例子的源代码已经放入GitHub:https://github.com/keepfool/vue-tutorials/tree/master/04.OAuth

OAuth简介

传统的网络应用

在传统的Web应用中，前端和后端放在一个站点下，我们可以通过Session保存用户的信息。

例如，在一个简单的ASP.NET MVC应用程序中，在用户成功登录后，我们在Session中记录用户的ID，假设它是Session['UserID']。前端发送ajax请求时，如果请求要求登录用户访问，我们只需要在后台Controller中验证Session['UserID']是否为空，然后就可以判断用户是否已经登录。

这也是传统的网络应用程序可以逃避HTTP进行无连接的方式。

基于REST服务的Web应用

在当今很多应用中，客户端和服务器是分离的，服务器是一套基于REST风格的Services，客户端是第三方Web应用，客户端通过跨域ajax请求获取REST服务资源。

但是REST Service通常被设计成无状态的，这意味着我们不能依赖Session来保存用户信息，也不能使用Session['UserID']来确定用户身份。

这个问题的解决方法是什么？常规的方法是使用OAuth 2.0。

对于与用户相关的OpenAPI，为了保护用户数据的安全和隐私，第三方Web应用在访问用户数据之前需要明确向用户请求授权。与OAuth 1.0相比，OAuth 2.0的认证过程更简单。

特殊术语介绍

在了解OAuth 2.0之前，让我们先了解几个术语：

资源：资源，与REST中的资源概念一致。有些资源是访问受保护的资源服务器：资源所有者：资源所有者，在本文中也称为用户代理：用户代理，即浏览器客户端：访问资源的客户端。即应用授权服务器：认证服务器，用于向客户端提供访问令牌的服务器访问令牌：用于访问资源的令牌由授权服务器授予。当客户端访问资源时，需要提供访问令牌承载令牌：承载令牌是访问令牌的一种，另一种是Mac令牌。承载令牌的格式为：承载类型XXXXXXXXToken请参考https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-7.1

有时候认证服务器和资源服务器可以是一个服务器，本文的Web API例子就是这样一个应用场景。

OAuth认证流程

知道这些单词后，我们用这些名词编一个故事。

简化版

这个故事的简化版本是：资源所有者访问资源。

特定版本

这个故事的简化版本只有一个结果。下面是故事的具体版本：

用户通过浏览器打开客户端后，客户端会向用户请求授权。客户端可以直接将授权请求发送给用户(如图所示)，也可以发送给中介，比如认证服务器。用户同意向客户端授予授权，客户端从用户处接收授权。授权类型取决于客户端使用的模式和身份验证服务器支持的模式。客户端提供身份信息，然后向认证服务器发送请求，以申请访问令牌认证服务器来验证客户端提供的