小程序接入指引

说明

在微信小程序、支付宝小程序环境中，接入身份认证H5版本比较特殊，需要使用小程序web-view组件的方式来承载H5页面。
微信小程序 web-view 组件官方文档
支付宝小程序 web-view 组件官方文档

操作流程

主要有三个步骤：

1. 配置业务域名

2. 请求转发配置

3. 小程序加载访问

配置业务域名

由于小程序加载的H5页面有域名访问限制，因此需要参考官方的配置文档。

微信小程序业务域名配置：
登录小程序后台 -> 开发管理 -> 开发设置 -> 业务域名，点击新增，按照要求配置业务域名。
如果有任何问题可以去查询相关的文档：微信小程序 web-view 组件 官方文档

支付宝小程序业务域名配置：
登录开放平台控制台 -> 小程序详情页 -> 开发设置 -> H5 域名配置，仅支持添加开发者可控制维护的域名。
如果有任何问题可以去查询相关的文档：支付宝小程序 web-view 组件官方文档

请求转发配置

由于小程序域名限制，无法直接使用身份认证服务提供的h5.kych5.com域名，因此需要将该域名下的资源转发到可访问的业务域名。

方案一：通过Nginx转发服务

location ^~/ {
    proxy_set_header Accept-Encoding "";
    proxy_set_header Referer "https://h5.kych5.com/";
    proxy_pass https://h5.kych5.com/;
    add_header Access-Control-Allow-Origin *;
}

方案二：通过Nodejs转发服务

const express = require("express");
const https = require("https");
const http = require("http");
const fs = require("fs");
const request = require("request");

// 业务域名
const HOST = "xxx.com";
// 目标域名
const TargetHost = "h5.kych5.com";
// 完整域名
const Target = `https://${TargetHost}`;

// 读取SSL密钥和签名证书
const options = {
    cert: fs.readFileSync("./https/cert.pem", "utf8"),
    key: fs.readFileSync("./https/key.pem", "utf8"),
};

// 创建web服务
const app = express();
// 注册https监听
const httpsServer = https.createServer(options, app);
// 注册http监听
const httpServer = http.createServer(app);

app.use(express.urlencoded({ extended: true }));

app.all("*", (req, res) => {
    const options = {
        url: `${Target}${req.originalUrl}`,
        method: req.method,
        headers: {
            ...req.headers,
            host: TargetHost,
            origin: req.headers.origin ? Target : undefined,
            referer: req.headers.referer?.replace(HOST, TargetHost),
            "accept-encoding": undefined,
        },
        form: req.rawHeaders.includes(
            "application/x-www-form-urlencoded"
        )
            ? req.body
            : undefined,
    };
    request(options, (err, response, body) => {
        res.send(body);
    })
})

// https监听
httpsServer.listen(443, () => {
    console.log("https://" + HOST);
});
// http监听
httpServer.listen(80, () => {
    console.log("http://" + HOST);
});

小程序加载访问

按照身份认证H5版本接入文档正常配置即可。

1. 业务侧需要提供一个H5页面，并将其作为redirectUrl参数拼接到身份认证H5链接上。

2. 认证结束跳转到redirectUrl页面，由业务侧调用小程序API关闭web-view组件。