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

部署walinejs/auth

根据官方仓库一键部署

Deploy with Vercel

接入Github OAuth Client

申请地址： Github / Settings / Developer Settings

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

keyvalue
Homepage URLhttps://waline-auth.域名.com
Authorization callback URLhttps://waline-auth.域名.com/github?redirect=&state=

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

keyvalue
GITHUB_ID<Client ID>
GITHUB_SECRET<Client secrets>

设置完记得Redepoly一下~

接入Waline

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

keyvalue
OAUTH_URLhttps://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设置了可以忽略这步）

keyvalue
ALLOW_SOCIALSqq,github

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