微信小程序全栈（一）.通过授权登录解密获取用户的openid和unionid

关注

VIP免费原创最新推荐文章于 2024-11-14 11:23:02 发布 1k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

最近做一个微信小程序，有个功能需要甲触发A事件然后B收到甲的消息。毫无疑问就是要获取openid存下来与用户绑定了。然后可能有公众号对接进来，于是还是要求一个unionid。这就不可避免要涉及一个获取流程。

本来我以为是小程序端简简单单获取一下腾讯的接口直接就返回回数据了，后来去官方文档看了一下是前端把密文，偏移量，code发给后台，后台通过腾讯接口发送自己的AppId，AppSecret和认证类型获取一个json对象，再用这个json对象解析出session_key，即会话密钥，从而通过和密文，偏移量解密得出用户的信息放到hashmap里面再进行自己的业务。

wxml文件

<!--pages/authorize/index.wxml-->
<view class="container">
<form bindsubmit="bindSave">
<view style='width:100%;padding-left:30rpx;font-size: 28rpx;margin-top:30rpx;'>1.同意当前小程序获得我的微信头像;</view>
<view style='width:100%;padding-left:30rpx;font-size: 28rpx;margin-top:30rpx;'>2.同意当前小程序获取我的微信昵称等其他信息;</view>
<button open-type="getUserInfo" bindgetuserinfo="login" class="weui-button">授权并登录</button>
</form>
<!-- <view class="logged" >
<image class="logged-icon" src="../../images/"/>
<view class="logged-text">近期你已经授权登陆过{
  
  {title}}</view>
<view class="logged-text">自动登录中</view>
</view> -->
</view>

wxss文件

/* pages/authorize/index.wxss */
page{
  height: 100%;
}

.container{
  background-color: #f5f5f9;
  justify-content: initial;
}

.form-box{
  width: 100%;
  background-color: #fff;
  margin-top: 20rpx;
}
.row-wrap{
    width: 720rpx;
    height: 88rpx;
    line-height: 88rpx;
    margin-left: 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    font-size: 28rpx;
    /*justify-content: space-between;*/
}
.row-wrap .label{
    width: 160rpx;
    color: #000
}
.row-wrap .label-right{
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
}
.row-wrap .label-right input{
    height: 100%;
    font-size: 28rpx;
    padding-right: 30rpx;
}
.row-wrap .right-box{
    margin-right: 30rpx; 
}
.arrow-right{
    width: 15rpx;
    height: 24rpx;
}
.save-btn,
.cancel-btn{
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-top:30rpx; 
    border-radius: 6rpx;
    box-sizing: border-box;
}
.save-btn{
    background-color: #e64340;
    color:#fff;
}
button[type="default"]{
    background-color: #ffffff;
    color:#000;
}
.addr-details{
    height: auto;
    padding: 30rpx 0;
    margin-left:30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    font-size: 28rpx;
}
.addr-details .label{
    margin:auto 0 auto 0;
    width: 160rpx;
    color: #000
}
.addr-details textarea{
    box-sizing: border-box;
    width: 480rpx;
    overflow: scroll;
}
picker {
    min-width: 20rpx;
    height: 100%;
    margin-right: 20rpx;
}
.hui{
    color: #777;
}
.logged {
  margin-top: 100px;
}

.logged .logged-icon {
  display: block;