小程序授权登录获取用户信息及手机号

悠悠 2021-08-13 18:20 943阅读 0赞

关于授权登录 ，微信接口调整：[查看内容][Link 1]

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。

一.开发者可使用以下方式获取或展示用户信息

1.使用[ open-data 展示用户基本信息][open-data]

注意：这个只能展示用户信息，不能保存到数据库

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

![20190925101255893.png][]

2.使用[ button 组件，并将 open-type 指定为 getUserInfo 类型][button _ open-type _ getUserInfo]，获取用户基本信息

目前只知道获取手机号，用户信息，其他的邮箱，身份证 暂不支持

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

必须要这个按钮 才可以触发这个弹出框的事件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][]

import Api from '../../dist/js/api';
    let wxparse = require("../../wxParse/wxParse.js");
    Page({
    	data:{
            isLogin: false,
    	},
    	onLoad:function (argument) {
            var mythis = this;
            console.log(this.data.isLogin)
            // 获取用户信息
            wx.getSetting({
                success: res => {
                    if (res.authSetting['scope.userInfo']) {
                        // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                        mythis.setData({
                            isLogin: true
                        });
                        wx.getUserInfo({
                            success: res => {
                                console.log('获取用户信息', res)
                            }
                        })
                    } else {
                        mythis.setData({
                            isLogin: false
                        });
                    }
                }
            })
    	},
        bindGetUserInfo: function (e) {
            console.log(e.detail.errMsg)
            //授权后的处理
            if (e.detail.errMsg =="getUserInfo:ok"){
                //用户信息
                console.log('用户信息',e.detail.userInfo)
                this.setData({
                    isLogin: true
                });
            }
        }
    })

![20190925105912455.png][]

3.手机号码

也是要按钮点击触发，授权，后端解析得到手机号码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 3][]

import Api from '../../dist/js/api';
    let wxparse = require("../../wxParse/wxParse.js");
    Page({
        data: {
            isLogin: false,
            openidInfo:{}
        },
        onLoad: function (argument) {
            var _this = this;
            wx.login({
                success: function (res) {
                    if (res.code) {
                        let params = {
                            code: res.code,
                            type:""
                        }
                        Api.getWxUserInfo(params).then(res => {
                            if (res.success == true) {
                                let userOpen = {
                                    openId: res.data.openId,
                                    userId: res.data.userId,
                                    sessionKey: res.data.session_key
                                }
                                _this.setData({
                                    openidInfo: userOpen
                                })
                            }
                        });
                    } 
                }
            });
        },
        getPhoneNumber: function (e) {
            console.log(e.detail.errMsg)
            //授权后的处理
            if (e.detail.errMsg == "getPhoneNumber:ok") {
                //用户信息
                let params = {
                    encrypdata:e.detail.encryptedData,
                    ivdata: e.detail.iv,
                    sessionkey:this.data.openidInfo.sessionKey
                }
                console.log('参数', params)
                //后端获取参数进行解密
                Api.getPhoneNumber(params).then(datas => {
                    console.log('手机号码',res)
                })
                this.setData({
                    isLogin: true
                });
            }
        }
    })

[Link 1]: https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
[open-data]: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/ca12700ac39741509b3fcf91f2c9187d.png
[20190925101255893.png]: /images/20210813/321045f283d64710b86ec822d6bec7a9.png
[button _ open-type _ getUserInfo]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/0e5c45a9a3634db1a27762e67a2a0193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210813/a0dc73fb3b7b43d78889facbacc690f4.png
[20190925105912455.png]: /images/20210813/e2cabb2dbf6d4463ad56f734a805b5f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 3]: /images/20210813/351844e86f024556b259b7029b8e5d63.png