微信sdk网页获取openid鉴权

h5页面微信鉴权

h5页面需要记录微信id和头像之类的话需要用到微信公众号平台的鉴权功能。大致就是第一次官方鉴权网址请求code，用户后授权然用返回的code再第二次请求官方服务器获取此时的用户信息即可。

一.注册测试账号

申请测试：微信公众号测试号
获取appid

获取appid
扫测试号二维码获取测试资格
获取测试资格
设置重定向返回的白名单域名，路径体验接口权限表-网页帐号（可能官方安全鉴定？）。注意这边支持本地ip192.168.0.xx，或写xx.com，不要要带http。否则鉴权url出错。
image.png

二.拿code取openid

引导点击或直接访问鉴权网址。（官方建议UrlEncode(xx)转义且必须含http://，否则鉴权将又出错）。
：

let appid=xx,url=xx;//(`...${id}...`字符模板语法指前面申明变量，拼接时可随意换行空白,为顿号)
let appid='',url='',secret='';
//判断页面能获取到code就拿openid，要不就请求去
            let code=urlName("code");// 获取code值可以在客户端打开链接的时候alert出来查看
            alert(code)
            if(code==null)  {
                window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
            }else{
                // 获取openid
        uni.request({
            ulr:`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code${code}&grant_type=authorization_code`,
        success:(res)=>{
                //获取返回信息
          console.log(res)  
        },
        fail(err) {
            console.log(err)
        }
    })

//xx.js
urlName(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
},
let code=urlName('code')//允许后获得的code

三 .后台准备部分：

openid和token涉及一些安全性质，只能后台亲自请求，之后获取code完就和前台无关了。

//1code换取token再获取信息（需要服务端请求）
//官方文档流程：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
//2参考代码获取token和openid：
/**
 * 通过code换取网页授权access_token    2018-08-04
 * @param string $appid 公众号的唯一标识
 * @param string $appsecret 公众号的appsecret
 * @param string $code 填写第一步获取的code参数
 * @link https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
 * @return false|static[]
 */
public function getAuthAccessToken($appid, $appsecret, $code)
{
    $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$appsecret&code=$code&grant_type=authorization_code";
    $result = https_request($url);

    apilog('wechat', 'get_auth_token', $url, '', $result);
    return $result;
}

3已有token和openid拿用户信息（步骤1，请求前可选检验授权）

微信开发工具

小程序，微信公众号，微信网页调试少不了的，写之前别忘下载ide工具，尤其是网页调试便捷。最近类似小程序太多了，不想写的可以去试试uni框架，写一次自动打包，省事。

微信开发工具