微信公众号H5开发，实现网页授权（静默登录）

业务场景

最近我司有个2C的需求，以分享链接的形式推广某线上活动， 要求一个链接覆盖微信、H5和PC三端，尤其要利用好微信用户的分享能力，因此重在提升微信端用户体验。
于是自然有了微信用户免登录（静默登录）的需求，这就要用到微信H5的网页授权功能。

微信H5网页，共有四种入口：

1. 微信公众号内打开
2. 手机微信内打开分享链接
3. 手机第三方浏览器打开分享链接
4. PC端浏览器打开分享链接

通过浏览器API navigator.userAgent 区分入口。

• 第1、2个入口，都是微信内置浏览器打开，都能静默获得用户的公众号openid，同一套逻辑。
• 第3个入口，第三方浏览器，无法获得openid，所以跳转到登录页面，需要用户输入手机号和短信验证码登录，常规登录流程。
• 因为pc端我们有独立的项目，所以第4个入口PC浏览器，直接跳转到pc端项目，不考虑。

具体实现

下面具体讲讲微信内置浏览器打开，如何静默获得公众号openid

1. 配置微信后台

公众号管理后台 —— 设置 —— 公众号设置 —— 功能设置 —— 网页授权域名

校验文件静态资源要放在项目根路径，并确保可访问。

2. 上传校验文件

基于 vue Cli 3.0 的相关 webpack 配置，用于设置静态资源线上地址

vue.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  publicPath: './',
  configureWebpack: config => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          { from: "./public/MP_verify_Z7kvg3KVhKYseefd.txt" },
        ]
      })
    );
  },
};

项目部署后，检查线上是否能访问到 MP_verify_Z7kvg3KVhKYseefd.txt 文件。例如你的项目地址是 https://www.abc.com/project，那么校验文件地址就是 https://www.abc.com/project/MP_verify_Z7kvg3KVhKYseefd.txt

3. 网页静默授权

1. 配置appid、redirect_uri等参数，从项目页面跳转到微信授权页面 https://open.weixin.qq.com/connect/oauth2/authorize，获取code； 参数详见 微信开放文档

const url = location.href; 

const href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url.slice(0, url.indexOf("#"))}&response_type=code&scope=snsapi_base#wechat_redirect`;

window.location.href = href;

2. url 携带code，从微信授权页面自动跳转回你配置的 redirect_uri 页面，相当于带着code参数重新打开项目网站；
3. 解析url中的code，把code传给后端，后端解析出公众号openid，实现绑定

附：官方文档

微信开放文档 - 微信网页开发 - 网页授权