700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序获取用户的 OpenId (附前端代码)

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

时间:2019-03-03 18:54:06

相关推荐

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

OpenId是什么?

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

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

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

思路:

首先调用wx.login({})获取登录凭证(code)调用接口前,需要把微信小程序的appid 和 secret 告知后端用拿到的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, unionIdvar Params = {code: res.code, //临时登录凭证key: self.globalData.MD5Key};//生成加密keyParams.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, CONNECTsuccess: function(res) {var openid = res.data.RntData.openid //返回openidself.globalData.openid = openid;console.log(openid);}})}})/** 重点结束||||********************************/// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})}})

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。