Dynamics 365Online 使用adal.js注册和配置SimpleSPA应用程序

本篇是基于dynamics 365online撰写，本文中使用的365online及azure均为试用版，因为online在国内还没落地，所以我申请的是新加坡版，online的申请方式可见我之前的博文有分享，如果已有online没有azure则可用dynamics 365的账号登陆office 365，点击下图中红框中的azure ad跳转到azure页面进行申请，试用版的申请需要绑定下信用卡，试用期一个月，如不提交付费申请是不会自动扣费的所以放心绑吧，如果你已有azure账号那需要和365绑上，具体的绑定方法见本文最后的链接，我这里没有截图可分享。

准备工作做完了那就开始吧，本例参照msdn示例，用的代码也是msdn中的示例代码，打开visual studio创建一个web application然后新建一个叫SimpleSPA.html的html页面，把示例代码贴进去，代码中关键的几行

var organizationURI = "https:// [organization name].crm5.dynamics.com";
//The URL to connect to CRM (online),比如我的使用环境https://skysoft002.crm5.dynamics.com，
//这里的skysoft002即是组织名也是后期的AD名

var tenant = "[xxx.onmicrosoft.com]";
//The name of the Azure AD organization you use  这边的xxx就是skysoft002

var clientId = "[client id]";
//The ClientId you got when you registered the application,这个要在后面在azure ad设置好后才能知道

var pageUrl = "http://localhost: [PORT #]/SimpleSPA.html";
//The URL of this page in your development environment when debugging.
注意这边的端口号，我们本地测试的时候我们F5运行之前建的web application，
本地IIS express会分配个端口号，后面在设置azure ad时需要填上

针对最后一条的port端口号，我这里运行以后是16654，本地application准备好后就去设置azure ad了。

登录azure，也可以从前面介绍的office 365入口进入，这里能看到ad目录，以及叫skysoft002的ad名称

点击skysoft002这个目录进去后，切换到应用程序界面，你可以点击添加按钮来添加应用程序，我这里已经建好了名为SimpleSPA的应用程序

点击添加按钮跳转到"要执行什么操作界面"，选择"添加我的组织正在开发的应用程序"

填上应用程序的两个属性，第一个框就是上面图中login那个的地址，第二个框可以直接拷贝第一个框的地址即可

上述配置完后点击那个打勾按钮，然后页面会跳转到配置页面，页面往下拉就能看到叫做客户端id的一串码，这就是代码中clientId的值

配置页滚动条拉到最下面，点击添加应用程序要把dynamics crm online添加上(截图中我已经添加过了)，再在委托的权限下拉并打勾

再点击配置页最下方的管理清单按钮，点击下载清单会有一个json文件下载下来

找到红框中的这个属性并将其设置为true,最后再点击上传清单，把修改好的json文档传上去，上述所有的修改都要在配置页面点击保存按钮进行保存。

至此azure ad的应用程序配置已完成，把SimpleSPA.html中的参数配置都更新好(本文之前贴出来代码)，最后运行来看看结果。

F5运行，点击login按钮会跳转到登录页，使用online的账号登录后跳回simplespa.html页面

点击getaccounts按钮就能把数据拉出来，截图中显示的均是online中的示例数据,至此本demo结束。

本篇演示的是在html页面中通过调用online的OAuth身份验证后再通过web api取10条客户数据并展示，后续的博文会继续讲述如何在server-side程序中调用online的OAuth认证再通过web api取客户数据。

本文的参考文献如下：

https://msdn.microsoft.com/en-us/library/mt595797.aspx#bkmk_goal，

https://community.dynamics.com/crm/b/mscrmshop/archive/2016/01/31/crm-web-api-and-cors-support

文中用到的示例代码来自第一条文献