微信公众号跳转H5页面-用户授权-返回openId以及access_token

最新推荐文章于 2023-10-08 16:39:27 发布

荒泷一斗-

最新推荐文章于 2023-10-08 16:39:27 发布

阅读量5.3k

点赞数 7

分类专栏：随笔文章标签：微信 javascript

本文链接：https://blog.csdn.net/qq_45341411/article/details/122453788

版权

随笔专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先是公众号

如果你有公众号的话，直接用你自己的公众号就行，

如果没有，最好自己申请一个测试的公众号（需要用到 appid 和 appsecret ），

申请步骤现在要微信用户授权获取用户的openID

跳转链接的途径有：

1. 图文消息中的链接

2. 自定义菜单-跳转到链接

第一步：参考跳转链接：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5d861c54aeee448c&redirect_uri=..............&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect

参数：（顺序不可错）

appid: 公众号的唯一标识可以在公众号的基本配置中看到

scope: 判断是否为静默授权和非静默授权 snsapi_base 静默授权 snsapi_userinfo 非静默授权静默授权则直接跳转，这个仅能获取openID。非静默授权需要用户手动授权，可以获取openID，也可以获取用户昵称、头像等用户信息

redirect_uri: 回调地址，需要用encodeURIComponent 将地址转码。需要在公众号配置：

非测试号：配置开发-接口权限-网页服务-网页授权-网页授权域名

测试号：

点击修改，配置回调域名

这个参数的意思是：授权成功后返回当前链接的页面（重新刷新）

如果配置参数顺序和值一一对应，则刷新页面之后你会看到地址栏中的code参数

如上图中的参数

现在需要用这个code 去请求access_token

第二步： 参考接口链接：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx5d861c54aeee448c&secret=........&code=.........&grant_type=authorization_code

appid上述已解释 secret 为公众号的appsecret code 为之前路径上的 code 参数 grant_type=authorization_code 这个获取access_token 必传参数

获取路径中的某个字段的参数

// 获取某个字段
function getParam(name) {
    var reg = new RegExp('(^|&)'+name+'=([^&]*)(&|$)')
    var r = window.location.search.substr(1).match(reg)
    if(r != null) return unescape(r[2])
    return null
}
// 获取所有字段
 let url = window.location.href,
     obj = {};

 if(url.indexOf("?") >= 0){
      let a1 = url.split("?")[1],
          a2 = a1.split("&");
      for(let i=0;i<a2.length;i++){
         let a = a2[i].split("=");
        obj[a[0]]=a[1];
 }
}

获取access_token 的操作最好后台来写

后台用上述第二步的链接去请求 access_token 和 openID

正确返回时，返回的参数格式为

 {
  "access_token":"ACCESS_TOKEN",    
  "expires_in":7200,    
  "refresh_token":"REFRESH_TOKEN",    
  "openid":"OPENID",    
  "scope":"SCOPE" 
 }

现在的话，前后台都有openID，就可以用openID 请求用户数据的绑定和查询了