微信小程序登录流程

2022.5.17 更新：
小程序获取微信用户信息接口wx.getUserProfile会被回收（2022.10.25后），所以文章中的流程可能不再适用。
目前推荐的流程为：wx.login获取用户openid，注册一个默认头像和昵称的用户。后续用户需要更改头像和昵称，可以在个人中心页增加使用微信头像昵称等方式获取对应信息。

相关公告： 小程序用户头像昵称获取规则调整公告

————————————————————————

记录一下开发小程序登录的流程，文章中的流程不一定是最优解，还存在可优化的地方。暂且只是记录一下，以便之后可以快速想起其中重要的流程。

创建小程序登录页面

<view class="container">
    <view class="wechatapp">
        <image class="header" src="/images/wechatapp.png"></image>
    </view>
    <view class="auth-title">申请获取以下权限</view>
    <view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
    <button class="login-btn" lang="zh_CN" bindtap="authorLogin">授权登录</button>
</view>

• 因为需要拿到用户的昵称和头像来注册用户，所以需要使用原生button，并绑定tap事件，才能调用wx.getUserProfile获取到用户信息userInfo，调用wx.getUserProfile时，微信会自动弹窗提示用户授权。注意：wx.getUserInfo已经不推荐使用了。
• 登录页面不是必须的，也可以把登录注册功能放在用户个人中心页面中实现。

注册用户问题分析：

注册用户不仅仅需要用户的昵称和头像，还需要用户的openid，毕竟openid才是用户的唯一标识（若多个小程序绑定同一个开放平台，则unionid是唯一标识，这里暂不考虑）。

获取用户的openid（unionid）通过前端调用wx.login拿到code，使用code换取用户的openid（unionid）。但是code的有效期为5分钟，为了确保code的有效性，需要把code和wx.getUserProfile拿到的userInfo一并传到后端注册用户。

但wx.login和wx.getUserProfile均为异步函数，且wx.getUserProfile必须在bindtap回调才能使用，如何同时获取两个函数的结果值就成了关键的问题：

1. 先调用wx.getUserProfile，成功后再调用wx.login，成功后把拿到的code和userInfo传到登录注册接口。

 authorLogin(){
    wx.getUserProfile({
        desc: '展示用户信息',
        success: (res1) => {
            console.log(res1.userInfo)
            wx.login({
                success: function (res2) {
                    console.log(res2.code)
                    // 发送userInfo和code到登录注册接口
                }
            })
        },
        fail: (err) => {
            console.log(err)
        }
    })
},

• wx.getUserProfile得到的userInfo和解密encryptedData得到的用户信息是一样的，微信修改了用户信息的返回，里面唯一有价值的数据也就用户昵称和头像，其他数据都是默认值（空值），被微信屏蔽了。所以直接使用wx.getUserProfile返回的userInfo即可。当然，想更严谨一点，也可以解密encryptedData拿到userInfo，防止数据被篡改。

2. 使用Promise，先执行wx.login，再执行wx.getUserProfile

wx_login() {
    return new Promise((resolve, reject) => {
        wx.login({
            success(res) {
                resolve(res.code)
            },
            fail(err) {
                reject(err)
            }
        })
    });
},

get_user_profile() {
    return new Promise((resolve, reject) => {
        wx.getUserProfile({
            desc: '展示用户信息',
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err)
            }
        })
    });
},

authorLogin: function () {
	// 需要声明变量，否则调用wx.getUserProfile会失败
    let p1 = this.wx_login();
    let p2 = this.get_user_profile();
    p1.then(code => {
        return code
    }).then(code => {
        return new Promise((resolve, reject) => {
            p2.then(res => {
                resolve({ code, userInfo: res.userInfo })
            }).catch(err => {
                reject(err)
            })
        })
    }).then(res => {
        // 两个函数执行后，发送数据res到登录注册接口
    }).catch((err) => {
        console.log(err);
    })
},

自动登录

完成注册用户后，还需要一个自动登录的功能，否则每次用户进来后都需要调用wx.getUserProfile进行弹窗授权，用户体验不好。
当用户已注册，我们可以通过wx.login静默获取用户的openid，而达到自动登录的效果。

onReady: function () {
	// 可在onReady中执行自动登录，若存在用户登录日志，则尽量不要在onShow中执行，否则会出现很多无意义的日志。
    this.auto_login();
},

auto_login() {
	wx.login({
    	success: function (res) {
           // 登录用户
        }
   });
},

• 用户注册登录后，可以缓存部分用户信息，以便后续业务的获取。
• 此时的登录页流程为：
• 1. [前端]进入登录页 -> [前端]执行自动登录 -> [后端]若用户未注册 -> [后端]返回特定状态码标识 -> [前端]自动登录执行结束，等待用户点击授权按钮。
• 2. [前端]进入登录页 -> [前端]执行自动登录 -> [后端]若用户已注册 -> [后端]返回用户信息 -> [前端]缓存用户信息 -> [前端]执行结束，关闭登录页。