微信h5网页如何静默获取到用户的基本信息（头像昵称）

Question

h5网页在微信上面打开，有办法静默获取用户头像，或者能绕过吗？有已经实现此功能的演示站是别人的，可做参考！
演示站：http://p2.lwqqh.top/?id=9138117

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

要在微信H5网页中静默获取用户的基本信息（如头像和昵称），需要通过微信的JS-SDK来实现。但要注意的是，自从微信官方更新了权限策略后，直接静默获取用户信息已不再被允许，用户必须主动授权才能获取这些信息。不过，可以优化用户体验，使授权过程尽可能流畅。

步骤概述

1. 注册公众号并获取AppID与AppSecret：首先你需要有一个已认证的微信公众号，并在微信公众平台上获取到AppID和AppSecret。

2. 配置JS-SDK权限验证：在你的服务器端，通过AppID和AppSecret请求微信接口获取access_token和jsapi_ticket，然后生成签名（signature）等参数，用于前端JS-SDK的配置。

3. 前端调用微信JS-SDK：在H5页面中引入微信JS-SDK库，并使用之前生成的签名等参数配置JS-SDK。

4. 引导用户授权：虽然不能完全静默，但可以通过友好的提示引导用户点击按钮进行授权，一旦用户同意，即可通过wx.getUserInfo或wx.login结合后端逻辑获取用户信息。

示例代码

服务器端（示例为Node.js，仅作逻辑展示）

const axios = require('axios');

async function getAccessToken(appId, appSecret) {
    const response = await axios.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`);
    return response.data.access_token;
}

async function getJsapiTicket(accessToken) {
    const response = await axios.get(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${accessToken}&type=jsapi`);
    return response.data.ticket;
}

// 假设你已经有了appId和appSecret
(async () => {
    const accessToken = await getAccessToken('yourAppId', 'yourAppSecret');
    const jsapiTicket = await getJsapiTicket(accessToken);
    
    // 生成签名等参数，并传给前端
})();

前端H5页面

1. 引入微信JS-SDK库：

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

1. 配置JS-SDK并发起授权请求：

// 假设后端已将signature、timestamp、nonceStr等参数传递给前端
wx.config({
    debug: false,
    appId: 'yourAppId',
    timestamp: 'yourTimestamp',
    nonceStr: 'yourNonceStr',
    signature: 'yourSignature',
    jsApiList: ['getUserInfo']
});

wx.ready(() => {
    wx.getUserInfo({
        withCredentials: true,
        success(res) {
            console.log(res.userInfo); // 用户信息对象，包含nickName、avatarUrl等
            // 根据获取的信息更新UI或发送至后端
        },
        fail(err) {
            console.error("获取用户信息失败", err);
        }
    });
});

注意事项

• 确保微信JS-SDK的版本是最新的，以适应微信的最新政策。
• 用户体验至关重要，清晰地告知用户授权的目的，以及提供拒绝授权后的备选方案。
• 上述代码仅为逻辑示意，实际应用时需要根据具体需求调整，并确保服务器与前端数据交互的安全性。

参考资料

• 微信JS-SDK文档
• 微信开放平台 - 授权登录

通过上述步骤，虽然不能完全静默，但可以实现一个较为流畅的用户授权体验。希望这能帮助到你！