微信小程序获取用户的 OpenId (附前端代码)

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:OpenId是什么?openid是表示用户在你的当前应用中的

OpenId是什么?

openid是表示用户在你的当前应用中的 唯一标识 ,比如小程序,微信公众号等,这些都算是一个应用,如果你有多个应用,同一个用户的openId可能并不相同

**下图是获取OpenId的过程微信的官方文档和时序图**

微信小程序获取用户的 OpenId (附前端代码)

**小程序登录的时序图**

微信小程序获取用户的 OpenId (附前端代码)

思路:

  1. 首先调用wx.login({})获取登录凭证(code)
  2. 调用接口前,需要把微信小程序的appid 和 secret 告知后端
  3. 用拿到的code 换取 openid

实例:

App({
onLaunch: function() {
    var self = this;
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

/** 重点来了****************
    |
    |
    |
    |
*********/
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        var Params = {
          code: res.code, //临时登录凭证
          key: self.globalData.MD5Key
        };
        //生成加密key
        Params.key = self.MD5(Params.code + "&" + self.getNowTime() + "&" + Params.key);
        wx.request({
          url: 'https://testurl/api/test/GetOpenId', //此处填写第三方的接口地址
          data: '=' + JSON.stringify(Params),
          header: {
            'content-type': 'application/json'
          },
          method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          success: function(res) {
            var openid = res.data.RntData.openid //返回openid
            self.globalData.openid = openid;
            console.log(openid);
          }
        })
      }
    })
    /** 重点结束
    |
    |
    |
    |
********************************/
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  }
})

是不是很好奇,为什么会多了一步,用第三方服务器去访问微信接口的过程呢?

如果appid和secret存在本地或者前端直接去获取,很容易被抓包从而导致用户信息泄露,因此,用第三方服务器去请求微信接口,能确保openID的安全性


以上所述就是小编给大家介绍的《微信小程序获取用户的 OpenId (附前端代码)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++ How to Program (5th Edition) (How to Program)

C++ How to Program (5th Edition) (How to Program)

Harvey & Paul) Deitel & Associates / Prentice Hall / 2005-01-05 / USD 98.00

With over 250,000 sold, Harvey and Paul Deitel's C++ How to Program is the world's best-selling introduction to C++ programming. Now, this classic has been thoroughly updated! The Deitels' groundbreak......一起来看看 《C++ How to Program (5th Edition) (How to Program)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

SHA 加密
SHA 加密

SHA 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具