单页应用程序

警告

本内容适用于较旧版本的 Azure AD v1.0 终结点。 为新项目使用 Microsoft 标识平台

通常情况下,单页应用程序 (SPA) 的结构为浏览器中运行的 JavaScript 表示层(前端)以及在服务器上运行并实现应用程序业务逻辑的 Web API 后端。若要详细了解隐式授权授予,并帮助你确定它是否适合你的应用程序方案,请参阅了解 Azure Active Directory 中的 OAuth2 隐式授权流

在此方案中,当用户登录时,JavaScript 前端使用 JavaScript 的 Active Directory 身份验证库 (ADAL.JS) 和隐式授权从 Azure AD 获取一个 ID 令牌 (id_token)。 该令牌随后被缓存,当客户端调用使用 OWIN 中间件保护的 Web API 后端时,客户端将该令牌作为持有者令牌附加到请求。

图示

单页应用程序图示

协议流

  1. 用户导航到 Web 应用程序。
  2. 应用程序将 JavaScript 前端(表示层)返回到浏览器。
  3. 用户通过单击登录链接等方式启动登录。 浏览器将 GET 发送到 Azure AD 授权终结点来请求一个 ID 令牌。 此请求将应用程序 ID 和答复 URL 包含在查询参数中。
  4. Azure AD 根据在 Azure 门户中配置的已注册回复 URL 来验证回复 URL。
  5. 用户在登录页面上进行登录。
  6. 如果身份验证成功,Azure AD 会创建一个 ID 令牌,并将其作为 URL 片段 (#) 返回到应用程序的回复 URL。 对于生产应用程序,此回复 URL 应当采用 HTTPS 格式。 返回的令牌包括应用程序对该令牌进行验证所需的关于用户和 Azure AD 的声明。
  7. 在浏览器中运行的 JavaScript 客户端代码从响应中提取令牌以在安全调用应用程序的 Web API 后端时使用。
  8. 浏览器使用身份验证标头中的 ID 令牌调用应用程序的 Web API 后端。 Azure AD 身份验证服务颁发一个 ID 令牌,如果资源与客户端 ID 相同(在本例中确实如此,因为 Web API 是应用自己的后端),则可以将该令牌用作代理令牌。

代码示例

请参阅单页面应用程序方案的代码示例。 请务必经常回来查看 - 我们会经常添加新示例。

应用注册

  • 单租户 - 如果在构建仅供组织使用的应用程序,则必须使用 Azure 门户在公司的目录中注册该应用程序。
  • 多租户 - 如果在构建可由组织外部用户使用的应用程序,则必须在公司的目录中注册该应用程序,并且还必须在要使用该应用程序的每个组织的目录中注册该应用程序。 要使应用程序在客户的目录中可用,可以提供一个供客户使用的注册流程,让客户许可应用程序的要求。 当他们针对用户的应用程序进行注册时,系统会向他们显示一个对话框,其中显示了应用程序要求的权限,然后是要许可的选项。 可能会要求其他组织中的管理员许可,具体取决于所需的权限。 当用户或管理员许可后,该应用程序在其目录中注册。

注册应用程序之后,必须将其配置为使用 OAuth 2.0 隐式授予协议。 默认情况下,应用程序禁用此协议。 若要为应用程序启用 OAuth2 隐式授权协议,请从 Azure 门户编辑该协议的应用程序清单,将“oauth2AllowImplicitFlow”值设置为 true。 有关详细信息,请参阅应用程序清单

令牌过期

使用 ADAL.js 可帮助:

  • 刷新过期的令牌
  • 请求访问令牌以调用 Web API 资源

成功身份验证后,Azure AD 会在用户的浏览器中写入一个 Cookie 来建立会话。 请注意,此会话存在于用户与 Azure AD 之间(而非存在于用户与 Web 应用程序之间)。 当一个令牌过期时,ADAL.js 使用此会话以无提示方式获取另一个令牌。 ADAL.js 使用隐藏的 iFrame 来发送和接收使用 OAuth 隐式授予协议的请求。 对于应用程序调用的其他 Web API 资源,只要它们支持跨域资源共享 (CORS)、已在用户的目录中注册,并在登录期间获得用户给予的所需同意,ADAL.js 就可以使用此相同的机制以无提示方式为这些资源获取访问令牌。

后续步骤