对接自有微信后台

如果您专门针对微信环境进行投放，使用微信公众号授权是一种常用的在落地页中获得用户身份的方式。关于详细的对接开发方式，请参见微信官方文档。本文描述在灵蹊落地页中集成微信授权的典型步骤。

1. 页面打开时，检查是否携带了授权token

用户在首次加载落地页时，参数是不携带授权token的。当发起授权时，页面应当跳转至微信授权页面，并最终携带token参数回跳落地页。可以通过在页面中嵌入JS代码的方式，识别是否携带了token参数，从而判定是否应当发起授权跳转。

let searchParams = new URLSearchParams(window.location.search)
let token = searchParams.get('token');
if (!token) {
    // 跳转微信授权，见下一小节描述
}

2. 构造URL参数，跳转微信授权页

微信授权涉及到浏览器、微信授权页和客户业务后台三方的交互。浏览器首先携带回跳URL参数跳转微信授权页，当用户允许授权后（静默或非静默），微信会携带授权code重定向至回跳URL（客户业务后台地址），业务后台使用code调用微信API获得用户信息进而执行相关业务操作（例如写入数据库），并生成一个用于标识用户身份的token，最终携带此token回跳落地页。

为了跑通上述流程，浏览器在跳转微信授权页时提供的回跳地址，需包含业务后台能解析的最终回跳地址（落地页URL）。假设业务后台地址为backendURL，参加如下实例代码：

let redir = backendURL + '?redirectUri=' + window.location.href;
let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=[公众号appID]';
url += '&redirect_uri=' + encodeURIComponent(redir);
url += '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'; // 根据需求决定scope参数的传值
window.location.href = url;

3. 缓存授权token（可选）

如希望避免同一用户在加载页面时每次重新触发授权跳转，可以把token参数写入cookie或localStorage，并相应的修改小节1中的代码，在页面加载时优先从cookie/localStorage获得token。

Powered by BetterDocs

发表评论