微信小程序登录和授权 小白摸索的推荐使用方法和最佳实践
微信小程序登录授权和获取用户信息 wxlogin 和 wx.getUserInfo
参考链接：https://www.cnblogs.com/kenshinobiy/p/9118024.html
之前的问题
- 开发者在首页直接调用 wx.getUserInfo 进行授权，弹框有会使得一部分用户放弃小程序的使用。
- 开发者没有处理用户拒绝弹框的情况，有部分小程序强制要求用户授权头像昵称等信息才能继续使用小程序。
- 用户没有很好的方式重新授权，虽然在前几个版本我们增加了设置页面可以让用户选择重新授权，但是操作还是不够便捷。
- 开发者希望进到首页就获取到用户的unionId，以便和之前已经关注了公众号的用户画像关联起来。
- 开发者默认将 wx.login 和 wx.getUserInfo 绑定使用，这个是由于我们一开始的设计缺陷和实例代码导致： getUserInfo必须通过wx.login 在后台生成session_key 后才能调用。
官方更新的解读参考
- 使用组件来获取用户信息，用户拒绝授权后也可以重新弹窗再次授权
- 若用户满足一定条件(下文有详细介绍)，则可以用wx.login 获取到的code直接换到unionId
- wx.getUserInfo 不依赖 wx.login 就能调用得到数据。
更新后的推荐做法
- 调用wx.login 获取code，然后从微信后端换取到sessionKey，用于解密getUserInfo返回的敏感数据。
- 使用wx.getSetting 获取用户的授权情况
- 如果用户已经授权，直接调用 API wx.getUserInfo 获取用户最新的信息
- 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。
- 获取到用户数据后可以进行展示或者发送给自己的后端。
wx.login
小程序中的代码：
// 其他一切为空，只是直接在onLoad里面放wx.login的效果：
onLoad: function (options) {
wx.login({
complete: (res) => {
console.log("WX.LOGIN", res)
},
})
},
// 注意，每次的code都不一样，下面是两次的结果
// console里面的运行结果是这样的[已经可以获得code了] :
WX.LOGIN {errMsg: "login:ok", code: "081obDqs1Th8pk0kWpqs1WkFqs1obDqa"}
WX.LOGIN {errMsg: "login:ok", code: "001U4H2917r7VL1Pmb491aLV291U4H2G"}
现在，可以将这个code发送到后端，得到sessionKey，后端获取sessionKey的代码：
async function getSessionKey(appid, app_secret, js_code) {
const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${app_secret}&js_code=${js_code}&grant_type=authorization_code`;
const response = await got(url);
const sessionKey = JSON.parse(response.body).session_key;
return sessionKey;
}
getUserInfo
getUserInfo有两种方式： 之前是wx.getUserInfo，
wx.getUserInfo({
success: res => {
console.log("头像:" , avatarUrl: res.userInfo.avatarUrl);
},
});
现在是搞了一个按钮，非得用户点一下，再弹出一个框，用户确认之后，才会获得用户信息：
和 wx.getUserInfo 不同之处在于：
- API wx.getUserInfo 只会弹一次框，用户拒绝授权之后，再次调用将不会弹框
- 组件 由于是用户主动触发，不受弹框次数限制，只要用户没有授权，都会再次弹框
代码如下:
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" >get user infobutton>
后台的代码为：
onGetUserInfo: function (e) {
console.log(e);
},
本例中，如果点击登录按钮，会弹出一个对话框：
如果用户点击拒绝，则getUserInfo失败，这里可以根据判断，如果没有获取到所需的值，则某些关键功能无法进入，让用户有再次授权，下面分别是点击拒绝和点击同意的结果：
从返回值的detail可以看到，第一次detail的errMsg:“getUserInfo:fail auth deny”，第二次的是errMsg:“getUserInfo:ok”，并且返回了其他所需的数据.
unionId 的获取
有了上面的数据，我们可以考虑来获取unionId了！
先看看官方的关于unionId的说法：
考虑很多场景下，业务方申请userinfo授权主要为了获取unionid。我们鼓励开发者在不骚扰用户的情况下 合理获得unionid，而仅在必要时才向用户弹窗申请使用昵称头像。为此，凡使用“获取用户信息组件”获取 用户昵称头像的小程序，在满足以下全部条件时，将可以静默获得unionid。
1、在微信开放平台下存在同主体的App、公众号、小程序。
2、用户关注了某个相同主体公众号，或曾经在某个相同主体App、公众号上进行过微信登录授权。
我们来解读一下上面的2个说法，如果你一定要获取unionId的话，用户关注不关注咱无法知道，但是第一条是咱自己可以做到的啊！所以，既然注册已经花了那么多邮箱，那你干脆在微信开放平台再注册一下吧。
完了我们在看看全部的代码吧：
前端的：
const app = getApp();
Page({
data: {},
onLoad: function (options) {
this.userLogin();
},
onGetUserInfo: function (e) {
console.log(e);
},
userLogin() {
wx.login({
complete: (res) => {
const js_code = res.code;
wx.callCloudFunction('openapi', {
data: {
'$url': "getFullSession",
'js_code': js_code
},
success: skey_res => {
console.log("USER SESSION:", JSON.parse(skey_res))
},
})
},
})
},
})
cloudFUnction/sys_login.js:
const cloud = require('wx-server-sdk');
const got = require('got');
async function getFullSession(js_code) {
const context = cloud.getWXContext();
const appid = context.APPID;
const app_secret = await getappSecret();
const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${app_secret}&js_code=${js_code}&grant_type=authorization_code`;
const response = await got(url);
return response.body;
}
async function getappSecret() {
// 我这里吧app_secret存在数据库中了，代码略了
return APPSECRET
}
看看控制台的输出：
USER SESSION:
{session_key: "eEQ3ZuVlFm/xxxxx==", openid: "xxxx-8Sq0PntK2c", unionid: "oV8g6wF5__xxxxxx"}
直接就有unionId了！
以前还有一个解密什么的，现在直接不要那个了，系统直接给你返回 session_key+openId+unionId，和谐的一B!
最后
咦？ 我界面的那个按钮还没点呢！ unionId直接就给我了！ 这个有点爽啊！好了好了，我们再来回味下：
总结：
1、wx.login完成之后，就可以直接给你openId，unionId（当然得符合一定条件啦）。
2、getUserInfo跟登录不登录没啥关系（这个会不会是我自己的开发账号已经关注了某公众号或者是其他的什么原因，不然总感觉没这么简单呢？）
3、一言蔽之，login是login，getUserInfo是getUserInfo，两码事！ 以后别掺和到一起了！