时间戳

首页 > 解决方案 > Adal angularjs - Azure 活动目录：从 URL/查询字符串中隐藏 id_token

angularjs - Adal angularjs - Azure 活动目录：从 URL/查询字符串中隐藏 id_token

问题描述

我正在使用 adal-angular js 库- adal-angular进行身份验证，生成令牌。当登录并重定向时，令牌将附加到查询字符串，如 https://localhost:8800/Index.html#id_token=eyJ0eXAiOiJKV1QiLCJhb ...

为什么会发生这种情况，我应该怎么做才能避免 URL 上的令牌？

我已经检查了这个并尝试了解决方案，但它对我不起作用。我做错了什么？谁能帮帮我吗？

这是我正在使用的代码，

app.js

var app = angular.module('app', [
  'ngRoute', 
  'AdalAngular',
]);

app.config([
  "$routeProvider",
  "$locationProvider",
  "adalAuthenticationServiceProvider"
  function (
    $routeProvider,
    $locationProvider,
    adalProvider
  ) {
      $locationProvider.hashPrefix("");
      adalProvider.init(configuration_object, $httpProvider);
 
     $routeProvider
     .when("/abcd", {
        templateUrl: urlBase + "abcd.html" + version,
        controller: "abcdCtrl",
        requireADLogin: true,
      })
     .otherwise({
        redirectTo: "/login",
      });
}

loginCtrl.js

angular.module("app").controller("loginCtrl", [
  "adalAuthenticationService",
  function (
    adalService
  ) {
        adalService.login();
    }
  }

标签： angularjsazure-active-directoryadal

解决方案

令牌在查询字符串中返回，因为 adal-angular 使用隐式授权，其中令牌直接从授权端点返回，而不是应用程序从令牌端点获取它们。

要从 URL 中隐藏它们，您需要将授权代码授予与 PKCE 一起使用。此流程仅受较新版本的 MSAL.js 支持，此处有一个 Angular 包装器：https ://www.npmjs.com/package/@azure/msal-angular 。您还需要将回复 URL 更改为单页应用程序平台，以便支持此更新的流程。如果您想了解此流程的工作原理，文档中有一些详细信息：https ://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow 。本质上，在 URL 中只传递了一个授权代码，令牌是通过前端的 HTTP 请求从令牌端点获取的。

请注意，在这两个流程中，您的应用程序的用户仍然可以看到令牌，因为代码在他们的机器上运行 :)

推荐阅读