微信小程序开发用户授权登录

微信官方的开放文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

说明：
小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器
开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。
临时登录凭证code只能使用一次

OpenID:
在关注者与公众号产生消息交互后，公众号可获得关注者的OpenID
1.1 普通用户的标识，对当前公众号唯一
1.2 不同的公众号，同一个用户，openid不同
unionid
同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。
也就是说：
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的unionid是唯一的。
实践方法
1、调用 wx.login 获取 code。
2、使用 wx.getSetting 获取用户的授权情况
2.1 如果用户已经授权，直接调用 API wx.getUserInfo 获取用户最新的信息；
2.2 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。
3、将获取到的用户数据连同wx.login返回的code一同传给后端

import {me,xmini,
} from '../config/xmini';
import api from '../api/index';
import {clone
} from '../utils/index';
const app = getApp();
module.exports = {authCode: 0,// 登录的逻辑updatedAuthCode(callback) {const that = thiswx.login({success(auth) {if (auth.code) {console.log('auth code :', auth);that.authCode = auth.code;callback && callback.call(that, auth.code)}}})},// 获取用户信息getUserInfo(res) {// 登录前，先清除下之前登录相关的缓存数据app.clearUserInfo();//这里是清除登录相关信息xmini.store.dispatch('setUserInfo', {})xmini.store.dispatch('setAddresses', []);console.log(res)const detail = res.detail;console.log(detail)if (detail.errMsg == 'getUserInfo:ok') {console.log('xxxx')wx.showLoading({title: '登录中...',})this.postLogin({data: {code: this.authCode,// userInfo: res.userInfo,encryptedData: encodeURIComponent(detail.encryptedData),iv: encodeURIComponent(detail.iv),},success: loginRes => {//更新codethis.updatedAuthCode();wx.hideLoading();},fail: loginErr => {//wx.showToast(loginErr.errmsg)}});// })} else {// 失败！if (detail.errMsg === 'getUserInfo:fail auth deny' || detail.errMsg === 'getUserInfo:fail:auth deny') {// 获取用户信息授权失败，展示引导wx.showModal({title: '提示',content: '需要你到授权，才能使用完整版的好食期',confirmText: '知道了',showCancel: false,success(res) {console.log(res)}});}}},getPhoneNumber(e) {console.log('getPhoneNumber:', e)if (e.detail.errMsg == 'getPhoneNumber:ok') {// 更新code 解析手机号wx.showLoading();api.userAuthPrepose({type: 2,code: this.authCode,encryptedData: encodeURIComponent(e.detail.encryptedData),iv: encodeURIComponent(e.detail.iv),}, (res) => {//更新codethis.updatedAuthCode();let userInfo = clone(xmini.store.state.user.userInfo)userInfo.authPhone = true;//这里更新存储的用户信息和地址xmini.store.dispatch('setUserInfo', userInfo) xmini.store.dispatch('setAddresses');}, (err) => {//更新codethis.updatedAuthCode();console.log(err);})// })}},postLogin({ data = {}, success, fail }){const that = this;api.login({isLoading: false,type: 2,...data,}, (res) => {const { data } = res;const userId = data.user_id;// 更新codethat.updatedAuthCode()// data.userId = userId;if (userId) {console.log('登录成功');xmini.piwikUpdate({isTrackWorking: true,userId: data.user_id || '',openId: data.wechat_open_id || '',});// data.authPhone=false; //!!test// 更新storexmini.store.dispatch('setUserInfo', data)success && success.call(that, res);} else {wx.showToast('用户登录信息有误，请重新登录');fail && fail.call(that, res);}//更新收货地址xmini.store.dispatch('setAddresses');}, (err) => {// 更新codethat.updatedAuthCode()//更新收货地址xmini.store.dispatch('setAddresses');fail && fail.call(that, err);return true;});},// 更新登录updatedLogin({ success, fail}) {const that = this;// 获取 用户是否授过权wx.getSetting({success(res) {console.log(res.authSetting)// 判断权限if (res.authSetting['scope.userInfo']) {// 获取login codethat.updatedAuthCode((code) => {console.log(code);// 获取用户信息wx.getUserInfo({success(res) {// console.log(res);// 登录that.postLogin({data: {code,encryptedData: encodeURIComponent(res.encryptedData),iv: encodeURIComponent(res.iv),},success: res => {console.log(res);success && success(res);},fail: err => {// console.log(err);fail && fail(err);}})},fail(err) {fail && fail(err);}})// end})// end}}})},
};

小结：在真实的业务场景中，我们希望，用户进入小程序时，未登录情况下可以正常浏览商品，对小程序有个基本的认知，不要直接弹出框要求用户授权，否则会干扰用户，导致新用户的流失，当用户需要使用一些高级功能和场景，这个时候再去要求用户授权，这样用户授权的几率会大大提高。