获取公众号openid,通过unionid 和小程序用户绑定起来

2021/7/11 17:17:10

本文主要是介绍获取公众号openid,通过unionid 和小程序用户绑定起来,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

背景:目前客户项目有两套系统。一套暂时定为A系统,另一套为B系统,两套系统下有不同的公众号,小程序。

需求:B系统为用户端系统,需要发送公众号模板消息,所以需要用户openid,但A系统是80端口,B系统是3000端口,公众号网页授权域名不能带端口,所以只能在A系统的公众号获取到用户openid,推送到B系统数据库里。通过unionid 和小程序用户绑定起来

unionid:如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 UnionID 是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的。(借鉴文档说明)

unionid文档链接:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/union-id.html

公众号开发文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#1

公众号模板消息:https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Template_Message_Interface.html

 公众号跳转小程序:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E5%BC%80%E6%94%BE%E6%A0%87%E7%AD%BE

 

一、准备工作

1. 在微信公众平平台,配置ip白名单,否则请求官方接口受限

 

 2. 配置网页授权域名,下面用户授权接口中的redirect_uri,需要在此授权域名下才可以

 

 

 

二、开始编写代码

  获取用户openid过程和推送

  1. 前端:添加授权页面,
  2. 前端:用户同意授权,获取到code,拼接成一个获取access_token的url,发送给后端
  3. 后端:通过code换取网页授权access_token
  4. 后端:用前端的url,进行请求,解析出来access_token和openid
  5. 后端:拉取用户信息

  

  1.  前端:添加授权页面,用于用户授权,获取code,拼接成一个获取access_token的url,发送给后端

  2.  后端:通过code换取网页授权access_token

   获取到前端给的url,request请求之后,进行解析access_token和openid

  3. 拉取用户信息, 

 

1. 在A系统公众号下,添加一个授权页面,里面有一个简易的授权按钮就足够了,

<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect">
    授权按钮
</a>

  a标签url参数说明:

url https://open.weixin.qq.com/connect/oauth2/authorize
appid 公众号appid (唯一标识)
redirect_uri 授权后重定向的回调链接地址(需要网页授权域名下的链接地址)
response_type code
scope

snsapi_base(不弹出授权页面,直接跳转,只能获取用户openid)

snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )

 

 

2. 获取code

当点击了此授权按钮之后,会重定向到redirect_uri,此时的url上是带着code的,需要截取下来

  截取参数方法:
  function getUrlParms(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return unescape(r[2]);
        return null;
    }
  
  调用方法获取code, 
    let code = getUrlParms('code')
    if (code != null && code != undefined) {
     当获取的code不是undefined的,就去调用获取access_token函数
        getAccessToken(code)
    }

 

3. 通过code 获取 access_token

在前台生成获取access_token的url,发送给后端,直接request就可以了

  参数说明:

appid 公众号appid
secret 公众号密钥
code 第二步获取到的code

 

因为要从A系统去请求B系统的方法,存在跨域,这里使用ajax的jsonp,来解决。
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  /**
    * 1. 获取code
    * 2. code 换取 access_token
    */
    function getAccessToken(code) {
        let url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code`
        console.log(url)
        let url2 = `https://test.com/getAccessToken`
        $.ajax({
            type: 'post',
            url: url2,
            dataType: "jsonp",//数据类型为jsonp  
            data: { url: url },//传递的值    
            jsonpCallback: "callback",//服务端用于接收callback调用的function名的参数
            success: (res) => {
                console.log(res)
            },
            fail: (err) => {
                console.log(err)
            }
        })
    }

 

4. 获取用户信息

let getUserInfo = async (accessToken, openid, callback) => {
    let url = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN)`
    let data = await getRequest(url)
    return data
}

 

5. 获取小程序用户的信息,

小程序调用wx.login, 获取到code,然后调用获取openid的接口即可,回调数据里就有unionid。

 

获取openid异常错误:

{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: Vffd863Vf-Vlc6 ]"}

有可能造成这个错误的原因:

1.  拉取用户信息请用snsapi_userinfo,不能使用snsapi_base  

2. 需要刷新access_token,https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#2

 



这篇关于获取公众号openid,通过unionid 和小程序用户绑定起来的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程