OrchardCore Headless建站

说到CMS系统，可能大家都能想起WordPress和Drupal之类的框架，作为.NET爱好者，一般也是知道一些基于.NET的CMS框架的，典型的比如DNN、Umbraco之类的。我很早之前听过Orchard，现在已经出了Core版本了，因此就直接在项目上用用。

前言

CMS系统（内容管理系统）可以方便我们快速建站，其他的概念我就不再多说了。重点说说三个重要的内容。

Full CMS

全功能模式，基本上不需要开发干啥，网站的内容直接套上模板就可以建站了，自由度较低，上手及其简单。

Decoupled CMS

解耦模式，除了后台还是使用CMS自带的后台以外，前台使用Razor Pages或者MVC进行页面调取后台的数据进行页面的呈现。前台和后台可以分开并行工作，只要在前后端定义好占位符和数据，网站就能正常使用。

Headless CMS

极简模式（我也不知道咋翻译合理），和解耦模式一样，CMS只是发挥内容管理工作；不同的是，前端完全独立开发，使用CMS提供的各种API访问后台的数据，不需要符合各种模板，也完全前后端分离。

大家可以按照自己的需求找自己合适的模式。OrchardCore支持上面的所有三种模式。如果是前端比较独立的情况，可以选择使用Headless进行开发。

关于CMS的选型，除了这个以外，还有一个Piranha.CMS也极简风格，很快就上手了，有兴趣大家可以去研究。

OrchardCore部署

按照官方文档就可以进行部署了，提示一下大家，建议大家添加上他们自己自带的nuget源，要不很容易出现不好编译的情况。如果大家喜欢docker，他们还提供docker的镜像，默认的用户名是admin，密码是password，安装更加方便，不过少了很多可以直接定制的地方，大家自行选择。细节的内容我就不多说了，网上很多了。（本文使用Docker进行默认部署）

定义内容

进入了管理后台之后，首先进入Configuration-》features中添加需要的Content Management组件，然后在Content Definitions中定义内容类型，我新建了一种Article类型的内容。然后我添加了一个正文区域的Html Field，添加了几个Parts，如下图。请注意，在设置Fields的过程中，我手动设置了编辑器Trumbowyg，大家可以根据自己的需要选择。

配置完了就可以新建文章了，体验还是不错的，图片等资源可以使用Media Library进行管理，然后插入的时候，会提示你选择对应的文件，非常方便，然后写好了之后还可以预览。

使用GraphQL访问数据

OrchardCore没有使用WebApi，而是使用了GraphQL作为自己的对外API提供的方法。

有关GraphQL的使用，我之前写过一篇文章，他使用库不是HotChocolate，但是对外查询方式是一样的。

因此，前端需要使用GraphQL替代REST API访问后台的数据。默认GraphQL是不开通的，需要在后台中Configuration-》features中启用。启用后，可以发现在OrchardCore集成了GraphQL开发控制台（通过Configuration-》GraphQL打开）。

这里，已经可以发现我们新建的article类型了。并且可以直接通过GraphQL进行查询了。通过F12查看请求，可以发现编辑好的GraphQL请求是通过特定的格式发送给后台endpoint（/api/graphql)的，这篇文章详细解释了前台怎么向后台请求数据。

使用JWT保护接口

如果网站启用了OpenID，那么前端直接访问后台会弹401错误。我们可以使用ASP.NET CORE Data Protection或者JWT来进行认证和鉴权。

OrchardCore支持OpenID和OAuth2.0规范，可以通过/.well-known/openid-configuration查看各个服务的终结点以及其他基本信息。这两个规范不是本文的重点，请自行查阅相关资料。

我们在Security-》OpenID Connect进行Authorization server的设置，启用必要的endpoint和需要使用到的Flow，最底下，Token Format选择JWT。接下来，在Management-》Application中新建一个应用，就可以获取Token了。

上图是使用Password Flow请求TOKEN需要发送的信息，POST过去，就可以获得token。接下来前端把这个access_token放在后续的请求头中，就能正常获得数据了。

结语

至此，网站编辑已经可以通过后台自己去编写文章了，还可以新建多种类别，包括菜单等等功能；前端也可以按照返回的数据使用自己熟悉的框架（VUE/REACT）构建WEB界面了。