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

关于授权登录 ,微信接口调整:查看内容

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

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

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

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

小程序授权登录获取用户信息及手机号_第1张图片

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

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

小程序授权登录获取用户信息及手机号_第2张图片

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

小程序授权登录获取用户信息及手机号_第3张图片

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
            });
        }
    }
})

 

3.手机号码

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

小程序授权登录获取用户信息及手机号_第4张图片

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
            });
        }
    }
})

 

你可能感兴趣的:(微信小程序开发)