angularjs – 在Office 365的Angular JS App中使用Adal JS

发布时间：2020-12-17 17:25:15 所属栏目：安全来源：网络整理

导读：我正在创建一个基本的 HTML网站,使用Angular JS和Adal Js连接到Office 365.以下是面临的问题 – 页面未重定向以进行登录. 获

我正在创建一个基本的 HTML网站,使用Angular JS和Adal Js连接到Office 365.以下是面临的问题 –

>页面未重定向以进行登录.
>获取“意外令牌”和“[$injector：modulerr]”错误
浏览器控制台

我在Azure AD中配置了以下详细信息 –

> SIGN-ON URL：http://localhost：端口号/
> APP ID URI：https：//租户名称/ ThomasO365
> REPLY URL：http://localhost：端口号/
已向应用程序提供Exchange和SharePoint权限.

应用代码

var o365CorsApp = angular.module("o365CorsApp",['ngRoute','AdalAngular']) // loading the ADAL JS Angular module


o365CorsApp.config(['$routeProvider','$httpProvider','adalAuthenticationServiceProvider',function($routeProvider,$httpProvider,adalProvider) {
    $routeProvider
      .when('/',{
        controller: 'HomeController',templateUrl: 'index.html',requireADLogin: true
      })
      .otherwise({
        redirectTo: '/'
      });

    var adalConfig = {
      tenant: '<tentant name>',clientId: '<client id>',extraQueryParameter: 'nux=1',endpoints: {
        "https://outlook.office365.com/api/v1.0": "https://outlook.office365.com/"
      }
    };

    adalProvider.init(adalConfig,$httpProvider);

  }
]);



o365CorsApp.factory('o365CorsFactory',['$http',function($http) {
    var factory = {};

    factory.getContacts = function() {

      return $http.get('https://outlook.office365.com/api/v1.0/me/contacts')

    }

    return factory;
  }
]);




o365CorsApp.controller("HomeController",function($scope,$q,o365CorsFactory) {

  o365CorsFactory.getContacts().then(function(response) {
    $scope.contacts = response.data.value;
  });


});

<html ng-app="o365CorsApp">

<head>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
  <script type="text/javascript" src="adal-angular.js"></script>
  <script type="text/javascript" src="adal.js"></script>

  <script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="HomeController">{{contacts.Email}}
  <br/>
  <p></p>

</body>

</html>

我正在引用this文章.我使用Brackets而不是Visual Studio.

注意-

>租户和客户ID是正确的.
>清单文件中的Oauth2AllowImplicitFlow设置为true.

解决方法

我正在阅读那篇文章并发现一些遗漏.这是我发现的一些问题(不知道它们是否会导致您的错误)：

>剪切和粘贴代码会在app.js的URL中引入额外的空格.确保之间没有尾随空格或空格？和其余的URL.
> app.js中的代码具有租户和clientId的值,显然是作者的值,他们从不告诉您如何替换具有应用程序有效值的值.您可以从Azure管理门户获取正确的clientId.租户获得GUID有点棘手,但幸运的是你可以把你的域名放在那里(如contoso.onmicrosoft.com).

其他要检查的事项：

>确保通过下载清单,将oauth2AllowImplicitFlow设置为true并重新上载(根据文章)启用隐式OAuth2流.>确保使用与您在租户属性中指定的帐户位于同一域中的帐户登录应用程序.>尝试更改您的回复网址以删除index.html.这可能会搞乱ADAL库令牌解析器.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!