Question

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

页面未针对登录目的重定向。
获取＆＃34;意外令牌＆＃34;和＆＃34; [$ injector：modulerr]＆＃34;错误浏览器控制台。

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

登录网址：http://localhost：端口号/
APP ID URI：https：//租户名称/ ThomasO365
回复网址：http://localhost：端口号/

已向应用程序提供Exchange和SharePoint权限。

申请代码

＆＃13;

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;
  });


});

＆＃13;

<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>

＆＃13;

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

注意 -

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

Answer 1

我正在阅读那篇文章并发现一些疏漏。以下是我发现的一些问题（不知道他们是否会导致您的错误）：

剪切和粘贴代码会在app.js的URL中引入额外的空格。确保?和其他网址之间没有尾随空格或空格。
app.js中的代码具有tenant和clientId的值，显然是作者的值，他们从不告诉您如何替换具有应用有效值的值。您可以从Azure管理门户获取正确的clientId。 tenant获取GUID有点棘手，但幸运的是，您可以将域名放在那里（例如contoso.onmicrosoft.com）。

其他要检查的事项：

通过下载清单，将oauth2AllowImplicitFlow设置为true并重新上传（根据文章），确保启用了隐式OAuth2流程。
确保使用与您在tenant媒体资源中指定的帐户位于同一域中的帐户登录应用。
尝试更改回复网址以删除index.html。这可能会搞乱ADAL库令牌解析器。

在用于Office 365的Angular JS App中使用Adal JS

1 个答案: