手机号授权登录

1、获取个人信息,使用uni.getUserProfile,无需button,但获取电话需要open-type="getPhoneNumber"


       

  2、获取头像信息及code

getUserInfo(e) {
                uni.getUserProfile({
                    desc: "获取个人信息",
                    success: (res) => {
                        this.userInfo = res.userInfo
                        console.log(this.userInfo)
 
                        uni.showToast({
                            title: '请授权手机号',
                            mask: false,
                            duration: 1000,
                            icon: 'none',
                        })
                    },
                    fail: getUserProfileFail => {
                        uni.showToast({
                            title: '授权失败',
                            mask: false,
                            duration: 1000,
                            icon: 'none',
                        })
                    }
                })
 
                uni.login({
                    provider: 'weixin',
                    success: (res) => {
                        if (res.code) { //微信登录成功 已拿到code  
                            console.log('微信登录成功 已拿到code', res.code)
                            this.jsCode = res.code //保存获取到的code  
                            uni.request({
                                url: 'https://api.weixin.qq.com/sns/jscode2session',
                                method: 'GET',
                                data: {
                                    appid: this.myAppID, //小程序的APPID  
                                    secret: 'XXXXXXXXXXXXXXX', //小程序的secret,  
                                    js_code: res.code, //wx.login 登录成功后的code  
                                    grant_type: 'authorization_code'
                                },
                                success: (cts) => {
                                    // 换取成功后 暂存这些数据 留作后续操作  
                                    console.log('换取成功', cts)
                                    this.openid = cts.data.openid //openid 用户唯一标识  
                                    this.unionid = cts.data.unionid //unionid 开放平台唯一标识,不一定有  
                                    this.session_key = cts.data.session_key //session_key  会话密钥  
                                }
                            });
                        } else {
                            console.log('登录失败!' + res.errMsg)
                        }
                    }
                })
 
 
            },

 3、根据返回的信息,获取电话号码

onGetPhoneNumber(e) {
                if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户拒绝授权  
                    //拒绝授权后弹出一些提示  
                    uni.showToast({
                        title: '拒绝授权',
                        mask: false,
                        duration: 1000,
                        icon: 'none',
                    })
 
                } else { //允许授权  
                    console.log('允许授权', e.detail.encryptedData)
                    // e.detail.encryptedData //加密的用户信息  
                    // e.detail.iv //加密算法的初始向量  时要用到  
                    let pc = new WXBizDataCrypt(this.myAppID, this.session_key); //下载并引入WXBizDataCrypt
                    let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
                    console.log(data) //data就是最终解密的用户信息 
                    this.mobile = data.phoneNumber
                    this.mobile = this.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
                    console.log(this.mobile)
                    this.logIn()
 
                }
            },

4、由于获取的电话号码需要解码,所以需要下载微信官方的解码文件WXBizDataCrypt

官方地址:服务端获取开放数据 | 微信开放文档

手机号授权登录_第1张图片 

引入并使用:import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";

参考地址:uniapp开发微信小程序获取用户手机号 - DCloud问答

我的这份只是存放

uniapp 微信小程序授权登录和获取电话号码_uni-app open-type="getphonenumber" 不显示-CSDN博客

你可能感兴趣的:(java,前端,服务器)