本文适用于使用Vercel部署的Waline，灵感来自于张麦麦老师和这个没被waline官方合并的PR ~

部署walinejs/auth

根据官方仓库一键部署

接入Github OAuth Client

申请地址： Github / Settings / Developer Settings

假设walinejs/auth绑定了域名waline-auth.域名.com，则按下面的填写即可

key	value
Homepage URL	`https://waline-auth.域名.com`
Authorization callback URL	`https://waline-auth.域名.com/github?redirect=&state=`

申请完成后，复制该App的Client ID 和 Client secrets，填写到walinejs/auth的环境变量

key	value
GITHUB_ID	`<Client ID>`
GITHUB_SECRET	`<Client secrets>`

设置完记得Redepoly一下~

接入Waline

接入waline十分简单，设置Waline项目的环境变量 + Redepoly即可

key	value
OAUTH_URL	`https://waline-auth.域名.com`

如此一来，waline使用oauth登录时就会使用你自建的auth服务

隐藏其他登录方式

waline有多种默认的登录方式，但是当使用自建的auth服务时，有可能没有申请对应登录方式的client，所以想要将其隐藏。然而目前没有对应设置，我的方案是修改waline默认的UI界面 dashboard.js 并将/ui/*重定向到自定义的dashboard.js

在自己的waline项目根目录中新建dashboard.js，内容如下

1
module.exports = async (req, res) => {
2
  res.setHeader('Content-Type', 'text/html');
3
  res.status(200).send(`<!doctype html>
4
  <html>
5
    <head>
6
      <meta charset="utf-8">
7
      <title>Waline Management System</title>
8
      <meta name="viewport" content="width=device-width,initial-scale=1">
9
    </head>
10
    <body>
11
      <script>
12
      window.SITE_URL = ${JSON.stringify(process.env.SITE_URL)};
13
      window.SITE_NAME = ${JSON.stringify(process.env.SITE_NAME)};
14
      window.recaptchaV3Key = ${JSON.stringify(process.env.RECAPTCHA_V3_KEY)};
15
      window.turnstileKey = ${JSON.stringify(process.env.TURNSTILE_KEY)};
16
      window.serverURL = 'https://${req.headers.host}/api/';
17
      window.ALLOW_SOCIALS = ${process.env.ALLOW_SOCIALS ? JSON.stringify(process.env.ALLOW_SOCIALS.split(/\s*,\s*/)) : null};
18
      </script>
19
      <script src="${
20
        process.env.WALINE_ADMIN_MODULE_ASSET_URL || '//unpkg.com/@waline/admin'
21
      }"></script>
22
    </body>
23
  </html>`);
24
  return res.end()
25
};

这里我是从环境变量取出ALLOW_SOCIALS赋值到窗口中，如果不需要从环境变量取的话可以直接设置成window.ALLOW_SOCIALS = ['qq','github']

接下来修改下vercel.json

1
{
2
  "name": "comment",
3
  "github": {
4
    "silent": true
5
  },
6
  "builds": [
7
    {
8
      "src": "dashboard.js",
9
      "use": "@vercel/node@2.5.10"
10
    },
11
    {
12
      "src": "index.js",
13
      "use": "@vercel/node@2.5.10"
14
    }
15
  ],
16
  "rewrites": [
17
    {
18
      "source": "/ui(.*)",
19
      "destination": "dashboard.js"
20
    },
21
    {
22
      "source": "/(.*)",
23
      "destination": "index.js"
24
    }
25
  ],
26
  "redirects": [
27
    {
28
      "source": "/api/oauth/(.*)",
29
      "destination": "/api/oauth?type=$1",
30
      "statusCode": 301
31
    }
32
  ]
33
}

设置redirects是因为ALLOW_SOCIALS会导致登录方式的统一接口从/api/oauth?type=<github>这种格式变成/api/oauth/<github>，我在这里懵逼了半天还以为是auth没搭好，其实并不是（

修改完后，push到自己的远程仓库，设置下环境变量（直接在html设置了可以忽略这步）

key	value
ALLOW_SOCIALS	`qq,github`

最后在Vercel中将这个分支发布到Production环境就OK啦~

Waline部署之自建Auth并隐藏默认登录方式

部署walinejs/auth

接入Github OAuth Client

接入Waline

隐藏其他登录方式

评论