微信网页公众号H5开发，调取了网页授权后，第二次进来不需要授权

Question

微信网页公众号H5开发，调取了网页授权后，第二次进来不需要授权，用什么方式实现(进公众号能拿什么标识符数据区判断呢)

Answer 1

引自免费微信小程序：皆我百晓生

在微信H5开发中，利用网页授权获取用户信息是一个常见需求。首次访问时，需要用户进行授权，但后续访问同一公众号的H5页面时，可以避免重复授权，提高用户体验。实现这一功能的关键在于如何存储和识别用户的授权状态。

解决方案

1. 获取授权并存储标识符

   当用户首次授权时，会返回一个openid（用户的唯一标识）和一个可选的unionid（如果是微信开放平台下的应用，则可以获取到此参数）。这两个参数是后续判断用户是否已授权的关键。

2. 使用Cookie或LocalStorage

   • 在用户授权后，可以将openid和unionid（如果有）存储在浏览器的Cookie或LocalStorage中。
   • 为了安全性考虑，建议使用HttpOnly属性的Cookie存储敏感信息，以防止XSS攻击。

3. 服务器端存储和校验

   • 将openid和unionid与用户在服务器上的账户关联起来。
   • 每次用户访问时，先检查Cookie或LocalStorage中的openid，然后在服务器端验证该用户是否已经授权过。
   • 如果用户已经授权，直接加载页面内容；如果没有授权，再跳转至授权页面。

示例代码

前端JavaScript代码

// 假设授权成功后，从URL中提取openid和unionid
function getOpenIdAndUnionIdFromUrl() {
    const urlParams = new URLSearchParams(window.location.search);
    const openid = urlParams.get('openid');
    const unionid = urlParams.get('unionid');
    return { openid, unionid };
}

// 存储openid和unionid到LocalStorage
function storeUserCredentials(openid, unionid) {
    localStorage.setItem('openid', openid);
    if (unionid) {
        localStorage.setItem('unionid', unionid);
    }
}

// 检查用户是否已经授权
function checkUserAuthorization() {
    const openid = localStorage.getItem('openid');
    const unionid = localStorage.getItem('unionid');
    // 如果有openid，表示用户已授权
    if (openid) {
        // 调用服务器端API验证用户授权状态
        fetch('/api/check_authorization', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ openid, unionid })
        }).then(response => response.json())
          .then(data => {
              if (data.authorized) {
                  // 用户已授权，加载页面内容
              } else {
                  // 用户未授权，重定向至授权页面
                  window.location.href = '/authorize';
              }
          });
    } else {
        // 用户未授权，重定向至授权页面
        window.location.href = '/authorize';
    }
}

后端示例代码（Node.js + Express）

const express = require('express');
const app = express();
app.use(express.json());

// 模拟数据库存储的用户授权状态
const authorizedUsers = {};

app.post('/api/check_authorization', (req, res) => {
    const { openid, unionid } = req.body;
    // 假设这里查询数据库判断用户是否已经授权
    if (authorizedUsers[openid]) {
        res.json({ authorized: true });
    } else {
        res.json({ authorized: false });
    }
});

app.listen(3000, () => {
    console.log('Server listening on port 3000');
});

注意事项

• 确保所有通信都通过HTTPS进行，以保护数据安全。
• 定期清理过期的Cookie或LocalStorage，避免存储过多无用信息。
• 考虑到不同设备和浏览器可能共享同一个openid，但存储机制（如Cookie、LocalStorage）是本地的，可能需要额外处理跨设备登录情况。

以上步骤和代码提供了一个基本框架，具体实现细节可能需要根据项目需求和安全策略进行调整。