本文适用于使用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，内容如下

    javascript
    复制成功
    module.exports = async (req, res) => {
  res.setHeader('Content-Type', 'text/html');
  res.status(200).send(`<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Waline Management System</title>
      <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>
      <script>
      window.SITE_URL = ${JSON.stringify(process.env.SITE_URL)};
      window.SITE_NAME = ${JSON.stringify(process.env.SITE_NAME)};
      window.recaptchaV3Key = ${JSON.stringify(process.env.RECAPTCHA_V3_KEY)};
      window.turnstileKey = ${JSON.stringify(process.env.TURNSTILE_KEY)};
      window.serverURL = 'https://${req.headers.host}/api/';
      window.ALLOW_SOCIALS = ${process.env.ALLOW_SOCIALS ? JSON.stringify(process.env.ALLOW_SOCIALS.split(/\s*,\s*/)) : null};
      </script>
      <script src="${
        process.env.WALINE_ADMIN_MODULE_ASSET_URL || '//unpkg.com/@waline/admin'
      }"></script>
    </body>
  </html>`);
  return res.end()
};

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

  • 接下来修改下vercel.json

    diff
    复制成功
    {
  "name": "comment",
  "github": {
    "silent": true
  },
  "builds": [
    {
      "src": "dashboard.js",
      "use": "@vercel/node@2.5.10"
    },
    {
      "src": "index.js",
      "use": "@vercel/node@2.5.10"
    }
  ],
  "rewrites": [
    {
      "source": "/ui(.*)",
      "destination": "dashboard.js"
    },
    {
      "source": "/(.*)",
      "destination": "index.js"
    }
  ],
  "redirects": [
    {
      "source": "/api/oauth/(.*)",
      "destination": "/api/oauth?type=$1",
      "statusCode": 301
    }
  ]
}

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

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

keyvalue
ALLOW_SOCIALSqq,github

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