id: 9e77c53f53b040d9a4c2cd80a1725d4a
parent_id: 
item_type: 1
item_id: b82e50ea57144762832cacd57ab51535
item_updated_time: 1764345634838
title_diff: "[{\"diffs\":[[1,\"Cloudflare从入门到精通 8. 使用Access实现网页访问控制\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":36}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>Cloudflare从入门到精通 8. 使用Access实现网页访问控制</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"content-class\\\" content=\\\"yinxiang.peso.superNote\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.noteLayout\\\" content=\\\"{\\\"lineSpace\\\":\\\"recommend\\\",\\\"paragraphSpace\\\":\\\"recommend\\\"}\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"43360\\\"></a>\\\r\\\n<h1>Cloudflare从入门到精通 8. 使用Access实现网页访问控制</h1>\\\r\\\n\\\r\\\n<div><span style=\\\"\\\"><div style=\\\"max-width: 700px;\\\"><p></p><div style=\\\"--en-blockquote: true; box-sizing: border-box; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial;\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483895&amp;idx=1&amp;sn=29c8ab2a148634065ec198f6a9d37396&amp;chksm=c2006da19eec99db60178298358a1bae8fc5c2ba0fd7192b5ae188efa057e93054eadb821ff8&amp;mpshare=1&amp;scene=1&amp;srcid=0526uvl0tZPNVKvuu5dpxBBw&amp;sharer_shareinfo=512f6d8fc0fe2277ea1716ecb1a160ba&amp;sharer_shareinfo_first=512f6d8fc0fe2277ea1716ecb1a160ba#rd\\\"><span>http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</span></a></div></div><p></p><div style=\\\"\\\"><div><div><div><span style=\\\"\\\">原创</span><span><span style=\\\"\\\">DeBill</span></span><span><a style=\\\"\\\"> DeBill独立开发 </a></span><span><em></em></span></div><div style=\\\"\\\"><div style=\\\"background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; color: rgb(0, 0, 0); word-spacing: 0em; letter-spacing: 0em; word-break: break-word; overflow-wrap: break-word; text-align: left;\\\"><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>📜 前言</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>当我们把网站放到公网后，如果某些页面不想让用户访问怎么办呢？例如使用</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Wordpress</span></code><span>开发的网站都会带一个后台管理界面，可以通过</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>https://yourdomain.com/wp-admin</span></code><span> 登录，有没有办法只有特定的人才能访问这个URL，其他人都不允许访问？Cloudflare Access了解一下 。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>Access可以通过定制化的规则 + 灵活的鉴权方式，实现不同用户对不同网页的访问控制</span></p><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>🧾 教程</span></span></h2><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>步骤一：找到Acces入口</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>进入到 Cloudflare 的后台，选择最左侧的</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Zero Trust</span></code></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/7e3e605103664bd3a6f0453b4a3f287b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>zero-trust-entrance</span></div></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>进入到</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>zero trust</span></code><span> 的管理界面后, 选择</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>Access --&gt; Applications</span></strong></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/6044353b4e1a4d8087605db3e74473b1\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>access-entrance</span></div></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>步骤二：设置访问权限</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>进入到 Applications页面后，我们点击左上角</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Add an application</span></code><span> 我们进入到下面的页面，我们选择 Self-hosted , 其他选项我没使用过，感兴趣的朋友可以试试</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/f632f05ad81149de9f796be190cff36b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>add-an-application</span></div></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>选择后我们会进入到应用配置界面，下面我以我的自部署</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>wallos</span></code><span>应用为例，给大家做演示如何配置。必填项我都框出来了，其他选择默认选项即可。</span></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Application name (应用名)：wallos</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Session Duration: 表示规则生效持续时长，最高支持1个月</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Application domain: 需要保护的应用域名，必须是托管在Cloudflare上的域名（可以看到是拉下菜单选项）</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Path: 你想要具体生效的URL，这里我只想让部分用户访问我的注册和登录页</span></div></li></ul><div style=\\\"display: flex;\\\"><span><img src=\\\":/d9041954841a4a2498fb17b8bb8275db\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>configure-application</span></div></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>点击 Next 后我们进入规则设置界面，必填项我也框选出来了</span></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Policy name: 规则名称</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Action: 要执行的操作。有</span><code style=\\\"background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Allow</span></code><span>,</span><code style=\\\"background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Block</span></code><span>,</span><code style=\\\"background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Bypass</span></code><span>,</span><code style=\\\"background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Service Auth</span></code><span> 四个选项</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Session Duration: 表示规则生效持续时长，最高支持1个月</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Configure rules: 跟其他 Rules 的设置很类似</span></div><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Selector: 匹配的属性。可选项非常多，目前支持：ip范围，邮箱，邮箱结尾，国家等</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Value: 属性具体的值</span></div></li></ul></li></ul><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>这里我设置一条规则：</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Email --&gt; xxx@outlook.com</span></code><span> (图片上没展示不影响理解)<img src=\\\":/b9cd151a3b41495dbb2273525960d2ec\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; width: auto;\\\" width=\\\"auto\\\"/></span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>设置完后直接点 Next，Setup部分可以不管直接点 Apply。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>翻译一下刚刚操作的意思：</span></p><div style=\\\"--en-blockquote: true;\\\"><p style=\\\"text-indent: 0; color: rgb(58,58,58); letter-spacing: 0; text-align: left; font-weight: normal;\\\"><span>只有 xxx@outlook.com 用户才能访问我的 wallos-test.debill.cc/registration.php 和 wallos-test.debill.cc/login.php 页面</span></p></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>步骤三：验证设置是否生效</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>我们访问刚刚设置的URL，就会出现下面的页面，你要输入邮箱获取登录链接才能访问页面，因为我设置了只有我的邮箱才能接受到Cloudflare的邮件，所以即便你输入了其他邮箱，</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>你既收不到邮件也不会报错</span></strong><span> （啥问题你猜去吧)。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>这样我们的设置就生效了，当</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>相同的客户端</span></strong><span>（你用手机访问需要再鉴权）再次访问该页面就直接跳转，无需再次通过邮件鉴权，下次鉴权是一个月后（因为我们设置了一个月）</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/78440f1301c741ee8715b240064edd21\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>email-auth</span></div></div><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>🪪 Service Auth</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>在配置规则的地方有一个</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Service Auth</span></code><span>的选项，这里展开讲讲，配置这个选项允许你携带token访问Access保护的应用。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>考虑一个常见的场景：</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>某个应用的URL被Access保护了（例如：</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>wallos.debill.cc/login.php</span></code><span>），同时我又有一个监控应用定期往这个URL发送请求来监控这个应用是否在线。如果直接往这个URL发送请求获取到的都是Access返回的响应，无法知道wallos是否在线，携带Service Auth配置的token信息就可以很好解决这个问题</span></p><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>配置</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>进入</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Zero Trust -&gt; Access -&gt; Service auth</span></code><span> 界面，点击</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Create Service Token</span></code></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/360da19446654da08b81327af59a1671\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>service-auth</span></div></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>设置一下token名称和过期时长，最低一年最长可以用不过期</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/5556c59fddee4f7ea6e7db4bb33f1b0b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>add-service-token</span></div></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>点击</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Generate token</span></code><span> 之后，Cloudflare 会生成 client ID 和 client secret，client secret要记住后面有用, 点击 Save 就生效了</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/bef191bb0d75421e8aaae4632fe758d8\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>service-token-detail</span></div></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>设置规则</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>我们回到Application的设置界面，刚刚设置了一条规则，我们再加一条规则</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/ebf53481dac24305bbb664e229936e52\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>cf8-access-edit.png</span></div></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>让携带 service token的请求都通过。</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Selector</span></code><span>选择</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Service Token</span></code><span> value选择刚刚给token的命名，这样就设置完成了。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/2f13a51aa2444e4db1ed0690ba1a8b88\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>service-token-setting</span></div></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>验证是否生效</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>我们用API测试工具测试一下，请求Header中不携带client ID 和 client secret 返回的是Cloudflare的鉴权页面</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/c366bb82e34e4e2392c551dcf455ae25\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>api-test-1</span></div></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>携带client ID 和 client secret后便能返回我们的网页</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/b892bdb454d8412c916b8f1980f942fe\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(221, 165, 45); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>api-test-2</span></div></div><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>🕳️ 避坑指南</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>当你网站使用前端路由（如 React Router 或 Vue Router）进行跳转时，浏览器不会向服务器发送新的请求，因此 Cloudflare Access 无法在这一过程中进行身份验证。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>例如你希望用户可以访问</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>yourdomain.site</span></code><span>但是不能访问</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>yourdomain.site/console</span></code><span>，你在Access设置了访问</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>yourdomain.site/console</span></code><span>要进行身份验证，但因为你的应用使用了前端路由，页面直接通过前端进行跳转的，没有给Cloudflare的边缘节点发送请求，所以该设置不会生效</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>如果你要使用 Cloudflare Access，注意你的网站是不是SPA（Single page application）</span></p><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>📝 总结</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>对带后台访问地址的网站，通过 Access 既提高了网站的安全性，不担心爬虫或者黑客去爆破你的后台，又可以享受公网访问后台的便利性。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>需要注意⚠️ 你的网站如果是SPA（Single page application）用前端路由切换页面时，因为你访问页面URL时不经过Cloudflare进行代理，Access会失效。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>网站想要Access进行访问控制必须满足以下几点：</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>1️⃣ 域名托管在 Cloudflare上</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>2️⃣ 配置Access访问规则</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>3️⃣ 不是前端路由</span></p></div><div><span><br/></span></div></div></div><div><div><div><div style=\\\"display: flex;\\\"><div style=\\\"color: rgba(0,0,0,.3);\\\"><span>修改于</span></div></div></div></div></div></div></div></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":62535}]"
metadata_diff: {"new":{"id":"b82e50ea57144762832cacd57ab51535","parent_id":"f67288c3a0be4374b5d532b5dcc3aabc","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764348817672,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T21:03:21.745Z
created_time: 2025-11-28T21:03:21.745Z
type_: 13