另劈捷径实现微信小程序与公众号的OpenID建立关联

Posted 大恩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了另劈捷径实现微信小程序与公众号的OpenID建立关联相关的知识,希望对你有一定的参考价值。

实现多个小程序和公众号的用户关联

1、微信公众平台官方文档


为了识别用户,每个用户针对每个公众号会产生一个安全的OpenID,如果需要在多公众号、移动应用之间做用户共通,则需前往微信开放平台,将这些公众号和应用绑定到一个开放平台账号下,绑定后,一个用户虽然对多个公众号和应用有多个不同的在这里插入代码片OpenID,但他对所有这些同一开放平台账号下的公众号和应用,只有一个UnionID,可以在用户管理-获取用户基本信息(UnionID机制)文档了解详情。


如果你已是按照微信官方文档实现, 恭喜你, 不用再往下看了,我们不折腾。

上面描述得非常清楚, 每个微信用户进入公众号和小程序都会分别产生不同的OpenID, 如想获得用户唯一标识UnionID, 则必须同时绑定到同一个开放平台账号下

本文就是为差300元去开放平台认证的码友

2、准备工作

  • 必须得别拥微信小程序和公众号的AppID和AppSecret
  • 具备简单的微信小程序和后端开发能力

3、应用场景说明

当你拥有一个创意点子, 半柱香的时间开发了一个逆天微信小程序。
但痛苦的事也随之而来,小程序是用完即走,根本沉淀不了用户, 这时就该公众号登场了,公众号与小程序相辅相成在于,公众号能为小程序留存粉丝并与粉丝互动,引导粉丝进入小程序,实现公众号的变现。同时,小程序配合公众号,也能大大的提升用户黏性,增加复购。

这里给各位看官介绍一种轻松实现两个OpenID建立关联的方法,用户只需进入一次小程序即可建立关联,接着往下看

4、实现步骤

上硬菜了

a、获取微信小程序openId (用户唯一标识)

获取用户code:

 wx.login(
      success: res => 
      	// res.code 得到微信小程序用户一次性code
      	wx.request(
            url:'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + res.code + '&grant_type=authorization_code',
            data: ,
            header: 
              'content-type': 'json'
            ,
            success: function (u) 
              var openid = u.data.openid //返回openid
            
          )
        
      )

:以上代码为一个非常不规范的示例, 仅为了演示实现思路和步骤。(你在开发时, 请千万不要直接在小程序中留下你的 appid和secret, 必须通过后端服务器中转)

b、借助web-view获取到用户公众号的OpenID

在前一步骤中获取到了wxOpenID, 这时先不着急让用户进入小程序主页面。 可再通过一个后端服务查询当前wxOpenID是否与gzhOpendID建立关联, 如果没有则, 可以将用户跳转到你准备好的web-view页面这个坑里, 逻辑代码如下:

// 检查是否已建立 wxOpenID与gzhOpendID关系

    wx.request(
      url: 'http://XXXX',	//后台URL 略
      success(res) 
      		if(!res.data.exist)
      			//如果不存在则直接跳走
      		 	wx.navigateTo(
		          url: '/pages/home/webview?wxid=wxOpenid'
		        )      			
      		
      
    );

// 空壳啥也没干的 web-view “/pages/home/webview”

wxml:

<web-view id="viewopen" src="src" bindload="onbindLoad">
</web-view>

JS

Page(
  data: 
    src: ""
  ,
  onLoad: function (options) 
   //
   let redirect_url = 'https//XXX/api_XXX?wxopenid=' + options.wxid;   
   this.data.src = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号的appid&redirect_uri=' + eascape(redircturl) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
   this.setData(
    src: this.data.src
   )
  
)

c、在redirect_ur后端API服务中获取gzhOpenID

以上URL为获取公众号用户的Code, 获取成功后会跳转到你指定的返回URL中, 这时你就可以在你的“https//XXX/api_XXX”中拿到用户的code, 因为已将用户的wxOpenID做为参数传递到了你的后台API页面, 这时只需要通过 刚拿到的公众号code换取用户的gzhOpendID即可, 最后就是提醒你, 直接将得来不易的两个关系保存到你的数据表中, 以供下次使用。

获取公众号的OpenID接口URL:string.Format(“https://api.weixin.qq.com/sns/oauth2/access_token?appid=0&secret=1&code=2&grant_type=authorization_code”, gzh_appid, gzh_secret, code)

4、进坑容易出坑也 so easy

这一步很关键, 用户掉进坑不出来, 那么你这小程序也算白折腾了。
在第二步 B 中留的后端URL如果只干了, 获取gzhOpenID也太对不起它超高的颜值了。 微信平台都喜欢给我们留一个redirect_url, 这里我们也给 ‘https//XXX/api_XXX’ 留一个返回URL, 加上第二步的URL则拼接完整后’https//XXX/api_XXX?wxopenid=XXXX&returnurl=https://XXX/newurl.html’,你没看错, 就是html。 这时估计就明白我的用心良苦了。

在第三步获取到用户的gzhOpendID,建立关系后, 通过重定向地址(Response.Redirect(url)),将以上不起眼的newurl.html返回给web-view,这时才总算发辉它的价值了, 转载html并执行

我们打开newurl.html神秘面纱, 发现也不过如此:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 </HEAD>
 <BODY>
 </BODY>
 <SCRIPT LANGUAGE="javascript">
 <!--

	function fan()
	
		wx.miniProgram.navigateBack(
		  delta: 0,
		)
	
 //-->
 </SCRIPT>
</HTML>

看到没也真的是空空如也, 就告诉了web-view怎么掉坑的就怎么出坑(返回一上页), 是不是真 so easy 请在评论区你说了算

5、开启你的互动应用场景

各位码友们应用场景交给你们的留言

— 欢迎拍砖 —

python获取微信小程序openid及用户信息

填坑记录:1.个人微信公众订阅号是不能申请微信认证的。公众号的类型在注册时一旦选择就不能更改,微信公众号认证的功能除个人订阅号外,都可以申请认证,因而个人订阅号不能申请认证。这句话的意思就是个人订阅号无法开发小程序。

2.个体户营业执照(个体户)可申请微信服务号并申请开发小程序,但需微信认证复用资质并用新邮箱注册小程序账号

3.微信开发工具创建微信小程序填写的appid是小程序的appid(不是微信公众号的),不能是个人小程序的appid,个人小程序没有获取用户信息的权限

4.调用接口获取用户信息时填写的appid要与创建时填写的一样

5.openid只能后台获取,提高安全性

6.只获取openid,只调用wx.login获取code交给后台即可,如果还要获取用户详细信息还要接着调用wx.getUserInfo获取encryptedData,iv提交后台解密用户信息

解密方法官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html

小程序代码:

//登录获取code
  login: function () {
    //1、调用微信登录接口,获取code
    wx.login({
      success: function (r) {
        var code = r.code;//登录凭证
        if (code) {
          //2、调用获取用户信息接口
          wx.getUserInfo({
            success: function (res) {
              //3.请求自己的服务器,解密用户信息 获取unionId等加密信息
              wx.request({
                url: app.globalData.loginWXUrl,//自己的服务接口地址
                method: \'post\',
                header: {
                  \'content-type\': \'application/json\'
                },
                data: { encryptedData: res.encryptedData, iv: res.iv, code: code },
                success: function (res) {
                  //4.解密成功后 获取自己服务器返回的结果
                  if (res.data.return_code == 0) {
                    console.log(res.data.data)
                  } else {
                    console.log(\'解密失败\')
                  }

                },
                fail: function () {
                  console.log(\'系统错误\')
                }
              })
            },
            fail: function () {
              console.log(\'获取用户信息失败\')
            }
          })

        } else {
          console.log(\'获取用户登录态失败!\' + r.errMsg)
        }
      },
      fail: function () {
        console.log(\'登陆失败\')
      }
    })
  }

python后台代码:

@app.route(\'/code\', methods=["POST"])
def get_code():
    JSCODE = request.get_json()["code"]
    encryptedData = request.get_json()["encryptedData"]
    iv = request.get_json()["iv"]
    APPID = "小程序appid"
    SECRET = "小程序secret"
    url = \'https://api.weixin.qq.com/sns/jscode2session?appid={appid}&secret={secret}&js_code={code}&grant_type=authorization_code\'.format(appid=APPID,secret=SECRET,code=JSCODE)
    res = requests.get(url)
    openid = res.json().get(\'openid\')
    session_key = res.json().get(\'session_key\')
    pc = WXBizDataCrypt(APPID, session_key)
    data = pc.decrypt(encryptedData, iv) #data中是解密的用户信息
    return json_response(0,data=data)
WXBizDataCrypt中具体解密方法下载官方多种语言示例代码:https://res.wx.qq.com/wxdoc/dist/assets/media/aes-sample.eae1f364.zip
如果导包出现 from Crypto.cipher import AES错误

   python 在 Windows下使用AES时要安装的是pycryptodome 模块   pip install pycryptodome 

   python 在 Linux下使用AES时要安装的是pycrypto模块   pip install pycrypto 

 

以上是关于另劈捷径实现微信小程序与公众号的OpenID建立关联的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序怎么获取openid

微信小程序:java后台获取openId

python获取微信小程序openid及用户信息

微信openid会变吗

微信小程序用户授权登录

微信小程序与微信公众号同一用户登录问题