微信小程序登录流程

438 阅读1分钟

小程序登录

1、获取用户手机号

前端部分

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)  // 动态令牌
    console.log(e.detail.errMsg) // 回调信息(成功失败都会返回)
    console.log(e.detail.errno)  // 错误码(失败时返回)
  }
})

后端部分

1、获取access_token

GET https://api.weixin.qq.com/cgi-bin/token
参数:
grant_type:'client_credential',
appid:'appid',//小程序后台获取
secret:'secret',//小程序后台获取

2、获取手机号

POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
请求体参数{code:前端传的code}

微信截图_20250101213836.png

2、获取openid和session_key

前端部分

 wx.login({
     success:({code})=>{
       console.log(code);
     }
})

后端部分

GET https://api.weixin.qq.com/sns/jscode2session
参数:
js_code:'code',//前端传的code
appid:'appid',//小程序后台获取
secret:'secret',//小程序后台获取
返回:
wx.setStorageSync('openid',res.data.openid)
wx.setStorageSync('session_key',res.data.session_key)

3、获取用户信息

基于openid 和 手机号 关联绑定。根据手机号查找库里有没有用户信息。有 生成token返回前端。前端调用户接口。完成登录

4、订阅消息的发送

前端部分

wx.requestSubscribeMessage({
  tmplIds: ['xxxx'], // 在微信公众平台配置的模板ID
  success(res) {
    console.log('res',res);
    if (res['xxx'] === 'accept') {
      wx.setStorageSync('pushPermission', true);
      console.log('用户同意接收推送通知');
    }
  },
  fail(err) {
    console.log('请求订阅消息失败', err);
  }
});

后端部分

POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token='+asstoken
请求体参数:
{
    "touser": openid,//用户的openid
    "template_id": "xxx",//发送消息的模板id,后台配置
    "page": "pages/home/home?cur=one",
    "data": {
        "character_string1": {
            "value": '2020-01-23',
        },
        "time2": {
            "value": "2020-01-23",
        },
        "thing3": {
            "value": "感谢您的使用。",
            "color": "#173177"
        }
    }
}

微信截图_20250101214822.png

微信截图_20250101215525.png