SpringBoot Secutity集成微信小程序登录

158 阅读1分钟

小程序获取用户信息弹窗

wx.getUserProfile API文档

/pages/user/index.wxml

<view class="container">
    <view class="userinfo">
        <block wx:if="{{!hasUserInfo}}">
            <l-button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </l-button>
            <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        </block>
        <block wx:else>
            <text class="userinfo-nickname">{{userInfo.userName}}</text>
        </block>
    </view>
</view>

/pages/user/index.js

Page({
    data: {
        userInfo: {},
        hasUserInfo: false,
        canIUseGetUserProfile: true,
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let token = wx.getStorageSync('token')
        let userInfo = wx.getStorageSync('userInfo')
        if (token) {
            this.setData({
                canIUseGetUserProfile: true,
            })
            if (userInfo) {
                this.setData({
                    hasUserInfo: true,
                    userInfo: userInfo
                })
            }
        }
    },
    getUserProfile(e) {
        let resUserInfo = {}
        // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
        // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
        wx.getUserProfile({
            desc: '用于绑定个人房源信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
            success: (res) => {
                this.setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true
                })
                resUserInfo.iv = res.iv
                resUserInfo.encryptedData = res.encryptedData
                // 获取用户登录
                wx.login({
                    success(res) {
                        if (res.code) {
                            resUserInfo.wxCode = res.code
                            console.log('登录成功' + JSON.stringify(res))
                            // 发起网络请求
                            wx.request({
                                url: app.globalData.URL + 'auth/wxlogin',
                                method: 'POST',
                                header: {
                                    'content-type': 'application/json;charset=UTF-8'
                                },
                                data: resUserInfo,
                                success: (res) => {
                                    // 本地缓存token
                                    wx.setStorageSync('token', res.data.data.token)
                                    // 保存用户信息
                                    wx.setStorageSync('userInfo', res.data.data.userInfo)
                                }
                            })
                        } else {
                            console.log('登录失败!' + res.errMsg)
                        }
                    }
                })
            }
        })

    },

resUserInfo.iv是用来用来获取用户的加密信息数据的,例如性别、地区等。

未完待续...