--- page_type: sample products: - office-sp - ms-graph languages: - javascript - typescript extensions: contentType: samples technologies: - SharePoint Framework - Microsoft Graph services: - SharePoint platforms: - AngularJS createdDate: 2/16/2017 12:00:00 AM --- ## 通过 Angular v1.x 构建的 Angular MS Graph web 部件 ## 摘要 此 MS Graph Web 部件连接到 Microsoft Graph,并从租户中提取 SharePoint 信息。 首先拉取跟网站集(当前由 Microsoft Graph 限制), 随后显示后面跟着列表内所有项目的网站的关联列表。 ![首屏](./assets/Connect.png) ![已登录](./assets/Connected.png) ![根网站集](./assets/Root.png) ![根网站中列表](./assets/Lists.png) ![通知列表项](./assets/Items.png) > 注意:我当前只拥有专为通知列表开发的模型。所有其他列表当前都会产生错误。 ## 使用的 SharePoint Framework 版本 ![drop](https://img.shields.io/badge/drop-ga-green.svg) ## 适用于 * [SharePoint Framework 开发人员预览版](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) * [Office 365 开发人员租户](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant) ## 解决方案 解决方案|作者 --------|--------- angular-msgraph|David Hartman ([Slalom](https://slalom.com)) ## 版本历史记录 版本 |日期 |注释 -------|----|-------- 2.0 |2017年4月19日 | GA 发布 1.0 |2017 年 2 月 6日 |首次发布 ## 免责声明 **此代码*按原样提供*,不提供任何明示或暗示的担保,包括对特定用途适用性、适销性或不侵权的默示担保。** --- ## 配置 Bliss - 克隆此存储库。 - 在命令行中运行: - `npm i typings -g` - `npm i` - `gulp serve ## 注册应用程序 1. 使用个人或工作或学校帐户登录到[应用注册门户](https://apps.dev.microsoft.com/)。 2. 选择“**添加应用**”。 3. 输入应用的名称,并选择“**创建应用程序**”。 将显示注册页,其中列出应用的属性。 4. 复制应用程序 ID。这是应用的唯一标识符。 5. 在“**平台**”下,选择“**添加平台**”。 6. 选择“**Web**”。 7. 请确保已选中“**允许隐式流**”复选框,输入 *http://{Location of SP Workbench}* 作为重定向 URI。 8. 选择“**保存**”。 ## 配置应用程序 1. 使用 src -> angularMsGraph -> GraphHelper.ts 下 GraphHelper. ts 文件中的已注册 Azure 应用的应用程序 ID 和重定向 url 替换 **aad** 和 **redirect\_uri** 占位符值