微信浏览器内静默授权登录

特别注意

• 浏览器直接打开地址，scope只支持snsapi_base，如需使用snsapi_userinfo，需要在公众号内打开。
• openId对于同一账号，同一个应用来说，是唯一的,可以当唯一标识。同一个微信号，在不同的应用下，openId不一样。同一账号不同应用下，需要统一用户标识的，需要使用unionId。官网链接：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

准备工作

• 需要申请微信开放平台或者在微信公众平台的账号，获取AppId 和 AppSecret。
• 开发工具：HBuilderX或者VS Code等均可，以下代码以uniapp为例，工具使用HBuilderX。

正式开始

• 拼接微信固定格式字符串，打开后微信会在我们自定义的url后面加上code参数，以便获取用户的openId。redirect_uri后面对应的url需要进行encodeURIComponent编码

//固定拼接,替换掉appId和url。redirect_uri后面对应的url需要进行encodeURIComponent编码
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=appId&redirect_uri=url&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"

• 通过code后台去查询openId，前端保存。
• 为了方便，将拼好的地址转换成二维码，便于测试。

优化地址

地址太长，难免看着不舒服，我们可以将地址进行优化。具体步骤如下：
1.打开url 例如 https://xxx.xxx.xxx/xxx
2.加载时，判断本地是否有用户的openId，如果有，则不进行下面的操作。
3.如果没有openId，那就是首次进入，则加载上面拼接的字符串。这时微信会在链接后面拼接code参数，我们获取一下。
4.拿到code，传给后台去微信请求openId即可，前端拿到返回的openId存储起来，此时url里是有code的。
5.再次刷新界面，地址和第一步一样 https://xxx.xxx.xxx/xxx，因为本地已经有了缓存，所以逻辑正常进行即可。
6.再次刷新界面是为了让地址简洁，因为地址里有code，我不想让他暴露出去。
7.我们把最初的地址生成一个二维码即可。

具体代码如下：

//初始化时调用
this.checkUser();
//检测是否获取过openId
checkUser(){
    //获取本地存储的openId
    var openId = uni.getStorageSync("openId");
    if (openId == undefined || openId == "") { //没有缓存用户数据
        //如果微信给我们返回了code
        var code = this.getParam(location.href,"code");
        if(code != "" && code.length > 0){
            this.loadUserInfo(code);
        }else{
            var url = "按微信要求拼接好的字符串";
            //加载链接后微信会返回code
            window.location.href = url;
        }
    }else{
        //用户登录成功，本地已经有了用户openId
    }
},
//用微信code换用户标识
loadUserInfo(wxCode){
    //从后台获取openId的网络请求，此处省略……
    //获取到openId后，存本地
    uni.setStorageSync("openId",openId);
    var url = "最初的地址"
    window.location.href = url;     
}