前期准备

1. 注册微信开放平台

1. 访问微信开放平台
2. 注册开发者账号
3. 完成开发者资质认证
4. 创建网站应用

2. 获取必要的参数

• AppID：应用的唯一标识
• AppSecret：应用密钥
• 网站域名：需要配置的网站域名
• 回调域名：用户授权后跳转的域名

3. 配置安全域名

1. 登录微信开放平台
2. 进入"网站应用"管理
3. 添加网站域名
4. 下载验证文件并上传到网站根目录

开发步骤

1. 引入微信JS-SDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. 配置微信JS-SDK

wx.config({
    debug: false, // 开启调试模式
    appId: '你的AppID',
    timestamp: '', // 生成签名的时间戳
    nonceStr: '', // 生成签名的随机串
    signature: '', // 签名
    jsApiList: [] // 需要使用的JS接口列表
});

3. 实现登录流程

3.1 获取授权码

function getWechatAuth() {
    const appid = '你的AppID';
    const redirect_uri = encodeURIComponent('你的回调地址');
    const scope = 'snsapi_login'; // 授权作用域
    const state = '随机字符串'; // 防CSRF攻击
    
    const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
    
    window.location.href = url;
}

3.2 获取访问令牌

async function getAccessToken(code) {
    const appid = '你的AppID';
    const secret = '你的AppSecret';
    
    try {
        const response = await fetch(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('获取访问令牌失败:', error);
        return null;
    }
}

3.3 获取用户信息

async function getUserInfo(access_token, openid) {
    try {
        const response = await fetch(`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('获取用户信息失败:', error);
        return null;
    }
}

4. 处理回调

// 在回调页面处理授权码
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
const state = urlParams.get('state');

if (code && state) {
    // 验证state防止CSRF攻击
    if (state === '你之前生成的随机字符串') {
        // 获取访问令牌
        const tokenData = await getAccessToken(code);
        if (tokenData) {
            // 获取用户信息
            const userInfo = await getUserInfo(tokenData.access_token, tokenData.openid);
            if (userInfo) {
                // 处理用户信息，如保存到本地存储或发送到服务器
                handleUserInfo(userInfo);
            }
        }
    }
}

注意事项

1. 安全相关

• state参数：必须使用随机字符串，防止CSRF攻击
• HTTPS：必须使用HTTPS协议
• 域名验证：确保域名与开放平台配置一致
• 密钥保护：AppSecret必须妥善保管，不要暴露在前端

2. 用户体验

• 登录按钮：使用微信官方提供的按钮样式
• 错误处理：友好的错误提示
• 加载状态：显示加载中的状态
• 登录状态：合理处理登录状态过期

3. 性能优化

• 缓存处理：合理使用localStorage缓存登录状态
• 请求优化：减少不必要的接口调用
• 错误重试：适当的重试机制

常见问题

1. 授权失败

• 检查域名是否配置正确
• 验证AppID和AppSecret是否正确
• 确认回调地址是否编码正确

2. 获取用户信息失败

• 检查access_token是否有效
• 确认scope是否包含必要权限
• 验证openid是否正确

3. 跨域问题

• 确保服务器配置了正确的CORS头
• 检查请求头是否包含必要信息
• 验证域名是否在允许列表中

最佳实践

1. 代码组织

// 建议的代码结构
const WechatLogin = {
    config: {
        appId: '你的AppID',
        redirectUri: '你的回调地址'
    },
    
    init() {
        // 初始化配置
    },
    
    login() {
        // 处理登录逻辑
    },
    
    handleCallback() {
        // 处理回调逻辑
    },
    
    getUserInfo() {
        // 获取用户信息
    }
};

2. 错误处理

function handleError(error) {
    const errorMap = {
        '40029': '无效的授权码',
        '40163': '授权码已使用',
        '41002': '缺少必要参数'
    };
    
    const message = errorMap[error.errcode] || '未知错误';
    console.error(`微信登录错误: ${message}`);
    // 显示错误提示给用户
}

结论

通过以上步骤，我们可以成功在H5网站中接入微信登录功能。在实际开发中，还需要根据具体业务需求进行适当的调整和优化。建议在开发过程中多参考微信开放平台的官方文档，确保功能的正确实现。

参考链接

• 微信开放平台文档
• 微信JS-SDK说明文档
• 微信登录开发指南