方案技术贴

小程序 一键登录 uni

2021-11-23  本文已影响0人  zhudying

实现小程序一键注册加登录
实现逻辑:
参考微信


登录流程时序
  1. 首先调用微信的登录接口 wx.login,获取临时登录凭证 code。
  2. 把code传给后端,后端会调用微信的code2Session获取session_key、openid,然后返回给前端,因为前端是不能直接请求code2Session获取参数。
  3. 掉用后端接口,把openid给后端,查看当前微信是否被注册。
  4. 假如已经注册,获取token,直接登录。
  5. 假如没有注册,需要通过微信提供方法,获取手机号。
  6. 此时手机号是加密的,需要调用微信提供的方法,解密手机号,前端后端都可以,加密方式为base64,微信提供了方法,java未提供,可以自己写。
  7. 手机号绑定微信,注册加登录。后端逻辑为,手机号已注册,执行绑定微信然后返回token登录;手机号未注册,执行用户手机号+微信号注册然后返回token登录。

html 部分

<button type="default" @tap="appLoginWx">微信手机号一键登录</button>
<button  type="default" open-type="getPhoneNumber" @getphonenumber="getPhone" v-if="showPhone">授权手机号</button>

js部分

  // 微信登录
        async appLoginWx() {
            try {
                this.wechatInfo = await this.getInfo(); // 授权用户信息
                this.login(); // 登录
            } catch (e) {
                if (e.errMsg === 'getUserProfile:fail auth deny') {
                    // 未授权
                } else {
                   // 获取用户信息失败
                }
            }
        },

        // 微信已注册直接登录
        async login() {
            try {
                let loginInfo = await this.userLogin(); // 微信的登录
                this.userInfo = await this.getSession(loginInfo.code);
                // 校验微信有没有被注册
                let check = {
                    identifier: this.userInfo.openid,
                    plant: 'weixin',
                };
                this.checkWechat = await checkUser(check);
                // 微信已注册
                if (this.checkWechat.data) {
                    // 已注册,获取token然后跳转主页
                    let tokenParams = {
                        identifier: this.userInfo.openid,
                        plant: 'weixin',
                        grantType: 'wechat',
                    };
                    getTokenByWechat(tokenParams).then(res => {
                        if (res.code === 200) {
                            // 缓存 token
                            // 缓存 跳转登录
                        }
                    });
                    // 微信未注册,打开授权手机号界面
                } else {
                   this.showPhone = true
                }
            } catch (e) {}
        },
        // 微信未注册手机号注册加登录
        async getPhone(e) {
            // 获取手机号成失败 return
            if (e.detail.errMsg !== 'getPhoneNumber:ok') {
                // 请授权
                return;
            }
            try {
                // 获取明文手机号
                let params = {
                    data: e.detail.encryptedData,
                    iv: e.detail.iv,
                    sessionKey: this.userInfo.sessionKey,
                };
                let phoneInfo = await getPlainTextPhone(params);
                // 无论手机号注册与否,都绑定微信,未注册时要获取用户微信昵称
                bindWechat(data).then(res => {
                    if (res.code === 200) {
                        // 获取 token
                       // 跳转登录
                    }
                });
            } catch (e) {
            }
        },

        // 后端获取session_key、openid接口
        getSession(code) {
            return new Promise((resolve, reject) => {
                    getSessionHand({ code})
                    .then(res => {
                            resolve(res.data);
                        } 
                    });
            });
        },
        // 获取用户授权信息
        getInfo() {
            return new Promise((resolve, reject) => {
                // 获取用户授权信息
                wx.getUserProfile({
                    lang: 'zh_CN',
                    desc: '获取用户信息',
                    success: userInfo => {
                        resolve(userInfo);
                    },
                    fail: err => {
                        reject(err);
                    },
                });
            });
        },

        // 微信的用户登录信息
        userLogin() {
            return new Promise((resolve, reject) => {
                wx.login({
                    provider: 'weixin',
                    success: loginInfo => {
                        resolve(loginInfo);
                    },
                    fail: err => {
                        reject(err);
                    },
                });
            });
        },

补充:
在点击登录前的引导页,session_key 校验

             // 验证 session_key 是否过期
            wx.checkSession({
                success: res => {
                    const token = xxx 缓存;
                    if (token) {
                        // session_key 、 token没有过期,重新获取用户信息跳转到首页
                    } else {
                        // token 过期,到登录页
                    }
                },
                fail: err => {
                    // session_key 过期,到登录页
                }
            })
上一篇 下一篇

猜你喜欢

热点阅读