Microsoft Graph for Office 365 - 用例：在单页应用程序中调用Microsoft Graph Part 1

从开始写代码调用Microsoft Graph开始，我们就一直在使用.NET Core命令行程序。命令行程序主要是方便我们快速地理解API的使用方式，但在现今的互联网环境下，更多的是Web端的应用程序。因此本篇和下一篇，我们将会分两个部分介绍如何在单页应用程序中调用Microsoft Graph。本篇主要是理论性介绍，下一篇上代码。

这部分涉及到的示例跟前面的有一些不同：

• 由于是运行在浏览器端，使用JavaScript或TypeScript编写。
• 我们将使用一个新的OAuth 2.0流：隐式授权流去获取调用Microsoft Graph的访问令牌，同样是因为运行在浏览器端。

本篇主要介绍一些要实现单页应用程序的一些准备工作。

更新应用程序

我们需要更新之前在Azure AD应用程序注册中使用的应用程序以便能在单页应用程序中直接使用。

Step 1 - 添加托管权限

之前已经介绍过权限模型分两种，托管权限和应用程序权限，且之前的示例已经分别添加过两种模式的权限，这里我们针对本篇再做一些详细介绍。

应用程序权限就像是服务账户，本身就具有访问权限而跟用户无关；托管权限则需要代理用户去执行操作，此时应用程序受应用程序权限和用户自身权限的共同制约。

基于安全的考虑，在Web浏览器端只允许托管权限。

针对本示例，请确保向应用程序添加托管类型的了Group.Read.All权限且管理员进行了批准。

Step 2 - 启用隐式流

OAuth 2.0标准包含了一些获取访问令牌的流，忘了的点传送门。隐式流不需要浏览器处理任何密钥信息如应用程序密码或Key，因为浏览器也处理不了。隐式流只需要用户在首次访问时登录并对应用程序进行授权即可。启用隐式流的方法如下图所示。

Step 3 - 添加Redirect URLs

有一些OAuth认证流根本不需要这些redirect URLs，但是这次我们使用的流确定是需要的。

获取访问令牌可不是像调用Web服务那样容易的事情，因为Azure AD需要跟登录的用户进行交互，批准相应的权限。隐式流会将浏览器跳转到Azure AD，让它接管一会界面，进行相应的认证操作。做完这些之后，Azure AD会跳转回我们自己的网站，并在URL的哈希值中附带了认证的访问令牌。这个URL就叫做Redirect URL或Reply URL。

注册Redirect URLs可以防止黑客请求访问令牌并发送到未知的网站。在本实例中我们也注册几个。

还是刚才的配置界面，最上面。我们添加下面几个URL：
用于Postman的
https://www.getpostman.com/oauth2/callback
用于Azure AD自身的
http://localhost:8080/index.2a.html
http://localhost:8080/index.2b.html
添加完之后再次保存。

测试应用程序

首先进入应用程序Overview页面上方的Endpoints链接去查看我们需要的OAuth 2.0 authorization终结点，复制V2版本的。

打开Postman，在请求URL那里输入我们要调用的链接，如获取当前用户的信息：
https://graph.microsoft.com/v1.0/me/

切换到Headers标签页，添加Accept - application/json。

切换到Authorization标签页，选择OAuth 2.0。

点击右侧的“Get New Access Token”按钮，在弹出的对话框中填写信息。

类型选择Implicit，Scope填写
https://graph.microsoft.com/user.read
注意看Scope的格式，实际上是Graph的URL加上对应的permission。

Client Authentication选择Send client creadentials in body。

点击Request Token按钮。如果是第一次访问会提示登录和授权。按照提示输入用户名密码登录并授权，就可以得到隐式流的访问令牌了。

滚动到最下面，点击Use Token按钮，然后直接发送GET请求，会成功返回用户信息。

如果你的操作结果跟本文描述的一样，就说明成功了。Good job！