Vitepress 文档加微信网页授权登录功能

目录

前言​

准备事项​

实现步骤​

1. 建Vitepress文档项目​

2. 公众号配置网页授权域名​

3. 授权服务端开发​

4. 开发Vitepress登录组件​

功能预览​

前言​

一般情况下使用Vitepress 写在线文档是用不上登录功能。

如果想要实现权限控制、付费阅读等功能，不加个登录就不合适了。完整的注册登录逻辑，流程麻烦，用户也大概率记不住账号密码。所以微信扫码登录，很适合这种简单场景。

我加这个微信网页授权功能，目的是实现部分文档需要开通会员后可读。

准备事项​

我考虑过的三个方案：

• 方案1： 公众号网页授权，用户扫码即可，可以不用关注公众号，用户体验好；
• 方案2： 引导关注公众号，在公众号内发送授权链接或者验证码。如何非常希望用户关注你的公众号，可以选这个方式；
• 方案3： 使用微信开放平台，申请网站appid，走PC网站的接入流程；

方案1、方案2 需要有一个已经实名认证的公众号。方案3要实名认证开放平台，反正300块钱是跑不掉。

我这里已经有实名认证好的服务号，对关注量也没什么需求，所以选择方案1来实现。

需要先准备以下资源：

1. 已经实名认证的服务号；
2. 域名（要备案、要配置https）；
3. 服务器；

实现步骤​

1. 建Vitepress文档项目​

yarn add -D vitepress
yarn vitepress init

基础项目文件结构：

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

2. 公众号配置网页授权域名​

授权域名指接收微信授权回调的链接中的域名。

微信公众号平台->设置与开发->公众号设置->功能设置->网页授权域名

只有这里配置过的域名，才能接收微信回调的code参数。如果你的链接不支持https，就不要开启强制https校验。

网页授权域名只有两个位置，如果不够用，请看《微信网页授权域名数量限制2个解决方法》。

3. 授权服务端开发​

微信文档：网页授权

基本按这个文档做即可，这里提示几个注意点。

1. 参数redirect_uri链接的域名必须是上面配置的网页授权域名，不然会提示错误：redirect_uri域名与后台配置不一致。
2. 参数scope ，如果获取openid之后还要昵称与头像，必须使用 snsapi_userinfo。
3. 参数state，回调时原样返回，特殊场景可以用来带一些标识，不需要可以不用，注意长度最多128字节。

需要提供以下几个接口：

1. 获取授权链接，拼接好授权链接返回。电脑浏览器端生成二维码提示用户扫，手机微信端直接跳转。
2. 接受微信回调，接受微信回调跳转拼接的code与state参数，根据code拿openid、accessToken，再继续拿用户昵称与头像，后台自动注册用户写表写会话。
3. 查询用户信息，用于前端根据会话查用户信息，返回头像与昵称。

4. 开发Vitepress登录组件​

目录结构

.
├─ docs
│  ├─ .vitepress
│  │  ├─ theme
│  │  │  ├─ layout
│  │  │  │  ├─ login
│  │  │  │  │  └─ Login.vue
│  │  │  │  └─ Layout.vue
│  │  │  └─ index.js
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

这里的目录只有theme是新创建的，其它都是你项目的。

文件 docs/.vitepress/theme/index.js

javascript

import DefaultTheme from 'vitepress/theme'  
import Layout from './layout/Layout.vue'  
  
export default {  
    extends: DefaultTheme,  
    Layout  
}

文件docs/.vitepress/theme/layout/Layout.vue

<script setup>  
import DefaultTheme from 'vitepress/theme';  
import Login from './login/Login.vue';  
  
const {Layout} = DefaultTheme  
  
</script>  
  
<template>  
  <Layout>  
    <template #nav-bar-content-after>  
      <Login></Login>  
    </template>  
  </Layout>  
</template>

Vitepress提供了很多插件，显示在右上角导航位置的插槽名字是nav-bar-content-after。

文件docs/.vitepress/theme/layout/login/Login.vue 是一个常规的vue组件，展示头像与昵称。

功能预览​

演示效果，右上角用户头像与昵称。也可以直接看网站 https://vitepress.mosong.cc