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

Question

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

我正在创建一个基本的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;
  });


});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

注意-

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

Answer 1

Jas*_*ton 5

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

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

其他要检查的事项:

请确保您通过下载清单,设定使隐含OAuth2流程oauth2AllowImplicitFlow来true,和(每文)重新上传.
确保使用与您在tenant属性中指定的帐户位于同一域中的帐户登录应用程序.
尝试更改您的回复网址以删除index.html.这可能会搞乱ADAL库令牌解析器.

归档时间：	10 年，3 月前
查看次数：	1265 次
最近记录：	10 年，2 月前