美文网首页vue系列
微信sdk网页获取openid鉴权

微信sdk网页获取openid鉴权

作者: litielongxx | 来源:发表于2019-04-12 15:56 被阅读0次

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框架,写一次自动打包,省事。

微信开发工具

相关文章

  • 微信sdk网页获取openid鉴权

    h5页面微信鉴权 h5页面需要记录微信id和头像之类的话需要用到微信公众号平台的鉴权功能。大致就是第一次官方鉴权网...

  • 微信-OAuth2.0鉴权

    OAuth2.0鉴权 公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。 网页授权获取用户基本...

  • 获取微信用户的openid

    前端调微信接口->微信调后台->后台获取openid->返回openid给前端

  • 如何获取用户的微信openid

    如何获取用户的微信openid 如何获取用户的微信openid[https://blog.csdn.net/yua...

  • 微信小程序获取openid

    微信小程序获取openid

  • 获取微信OpenId

    获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid...

  • 网页授权-前后端分离(springboot+vue)

    0.官方文档 微信网页授权步骤 --> 传送门 1.第一步:用户同意授权,获取code 组装鉴权链接--->在确...

  • 小程序内嵌H5公众号授权

    思路:小程序登录获取到openId后通过微信的回调地址传参、再走微信公众号的通过code获取openId授权。 获...

  • 微信小程序开发 获取openid

    微信小程序开发之获取openid及用户信息 1. 获取openid 1.1 获取code 调用接口获取登录凭证(c...

  • 查看用户设备

    当在微信公众号里面,用户点击-我的设备的时候,我们可以获取到用户的openid. 这个是根据微信开发文档网页授权的...

网友评论

    本文标题:微信sdk网页获取openid鉴权

    本文链接:https://www.haomeiwen.com/subject/ubpcwqtx.html