微信小程序实现lot开发09 接入微信登录

微信登录的流程一般查看微信小程序开发文档就能解决,我们来梳理一下:首先我们需要通过调取wx.login接口获取临时交换openId的凭证码code,然后拿这个临时凭证码code去访问指定的某个小程序APPID的openId和登录态记录session_key,同一个小程序每一个用户的openId都是固定且唯一的,我们可以将这个openid存入开发者服务器实现登录验证的业务。

主要的问题出现在:AppID与sercet对应错误,主要的错误码为41008与40029,分别是code没获取到以及AppID验证失败。

我们看一下代码:

Page({
   /**
   * 页面的初始数据
   */
  data: {
      // code存放变量
      js_code:"",
      // 用户非隐蔽信息
      rawData:"",
      // 用户加密签名
      signature:"",
      // 封装用户信息
      userInfo:"",
      // 获取的登录唯一凭证
      openid:"",
      // 临时登录的会话密钥,可以作为登录状态的记录信号
      session_key:""
  },
  login(){
    var th = this;
    // 授权获取当前用户信息
    wx.getUserProfile({
      desc: '用于登录校验',
      success(res){
         console.log(res);
        //  接收这个响应信息里的用户信息
         var userInfo = res.userInfo;
         th.setData({
           userInfo: userInfo,
           rawData: res.rawData,
           signature: res.signature 
         })
      }
    })
    // 调用login接口获取临时交换凭证code
      wx.login({
        success: function(res){
          console.log(res.code);
          // 将获取的临时凭证存放起来
          th.setData({
            js_code: res.code
          });
        }
      });
      // 设置延时是先进行授权结束后再回调这个微信登录的openId换取函数
        setTimeout(function(){
        let code = th.data.js_code;
        wx.request({
          // 注意反引号
          url: `https://api.weixin.qq.com/sns/jscode2session?appid=你的AppID值&secret=你的小程序密钥&js_code=${code}&grant_type=authorization_code`,
          success(res){
            console.log(res);
            // 将获取的两个关键信息存储
            th.setData({
              openid: res.data.openid,
              session_key: res.data.session_key
            })
            console.log(th.data.openid);
            console.log(th.data.session_key);
          }
        })
      },2000);
  },
  /**
   * 生命周期函数--监听页面加载
   */

  onLoad(options) {

  },

..........省略下面.......
}

页面代码就一个按钮:

<button type="primary" open-type="getUserInfo" bindtap="login">
  授权微信登录
</button>
<image src="{{userInfo.avatarUrl}}" style="height: 40px;width: 40px;"></image>
<text>{{userInfo.nickName}}</text>

每一个小程序在测试环境时都会有一个project.config.json文件,里面具备配置的小程序id,我们需要将你设置的AppID在这里也更改一下。 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ForestSpringH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值