微信小程序授权用户信息

授权获取用户信息

文章目录

    • 授权获取用户信息
      • 效果图
      • 参考API
      • wxml
      • js

授权获取用户信息需要经过用户授权同意才能调用

  • 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
  • 如果用户已授权,可以直接调用接口;
  • 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

ps: 抽时间记录下,以下是个人使用方案(仅供参考),欢迎大神们指教…

效果图

在这里插入图片描述

参考API

wx.login

wx.getSetting

wx.getUserInfo

ps: 授权登录独立在一个页面中,当没有token时跳转到此页面,当用户触发按钮时会弹窗询问用户是否授权

如果已授权,下次直接跳过此页面

wxml

<view class='authBox' wx:if="{{canIUse}}">
    <view class='bottom'>
        <button type='primary' style='background-color:{{backgroundccolor}}' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            授权登录
        </button>
    </view>
</view>

<view wx:else>请升级微信版本</view>

js

const app = getApp();
var http = require('../../utils/request.js');


Page({
    data: {
        //判断小程序的API,回调,参数,组件等是否在当前版本可用。
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        backgroundccolor: app.globalData.backgroundColor,
    },
    onLoad: function (options) {
        var that = this;
        // 获取页面来源
        var from = options.from; //from是a页面传递过来的名称
        from = from == undefined || from == null ? 'index' : from;
        var from_return = '/pages/' + from + '/' + from

        var from_url = '/pages/loginReg/loginReg?from=' + from
        that.setData({
            from_url: from_url,
            from_return: from_return,
        })

        //获取登录凭证(code)
        that.getcode();

        // 查看是否授权
       	that.checkUserAuth();
    },

	/**
    * 查看是否授权 如已授权则自动登录
    */
   	checkUserAuth: function() {
       var that = this;
        wx.getSetting({
            success: function (res) {
                if (res.authSetting['scope.userInfo']) {
                    wx.getUserInfo({
                        success: function (res) {
                            //   console.log('查看是否授权');
                            that.queryUsreInfo(res.encryptedData, res.iv);       
                        }
                    });
                }
            }
        })
  	}) 
  	
	/**
	* 获取登录凭证(code)
	*/
    getcode:function(){
        wx.login({
            success: res => {
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
                app.globalData.user_code = res.code
            }
        })
    },
    
    /**
	* 授权登录
	*/
    bindGetUserInfo: function (e) {
        var that = this;
        if (e.detail.userInfo) { //允许授权
            that.queryUsreInfo(e.detail.encryptedData, e.detail.iv);
        } else {
            //用户按了拒绝按钮
        }
    },

    /**
    * 获取用户信息接口
    */
    queryUsreInfo: function (encryptedData,iv) {
        //用户按了允许授权按钮
        var that = this;
        //插入登录的用户的相关信息到数据库
        var params = {
            code: app.globalData.user_code,
            encryptedData: encryptedData,
            iv: iv,
            // nickName: e.detail.userInfo.nickName,
        }
        http.postReq("login/user/test", params, function (res) {
            if (parseInt(res.code) == 200) {
                var data = res.data;
				
                //请忽略,这里是处理后台返回数据的业务(每个人需求不一样)
                var bc_userinfo = {};
                for (var index in data) {
                    if (index == 'userinfo') {
                        var userinfodata = data[index]
                        for (var key in userinfodata) {
                            bc_userinfo[key] = userinfodata[key];
                        }
                    } else {
                        bc_userinfo[index] = data[index];
                    }
                }

                wx.setStorageSync('userinfo', bc_userinfo);
                //成功后跳回原来的页面
                wx.switchTab({
                    url: that.data.from_return
                })
            } else {
                feedbackApi.showToast({ title: res.msg, mask: false })
                //获取code
                that.getcode();
            }
        })
    },
})


http://www.niftyadmin.cn/n/1581701.html

相关文章

微信小程序知识记录(有时间会更新其他)

recored 后续会不定期更新其他&#xff0c;写的不好&#xff0c;欢迎大神前来指教。 文章目录recored修改data中属性对象赋值第一种&#xff1a;第二种&#xff1a;微信小程序解析富文本数据处理富文本图片问题完整代码wxmljs后台返回数据效果图微信小程序模板消息wxmljs微信小…

微信小程序scroll-view

scroll-view 使用scroll-view可滚动到对应区域, 注意: 使用竖向滚动时&#xff0c;需要给scroll-view一个固定高度&#xff0c;通过 WXSS 设置 height。 效果图 下图&#xff1a; 标题采用scroll-x横向滚动&#xff0c;内容采用scroll-y纵向滚动&#xff0c;当点击某个分类时滚…

微信小程序自定义navbar

自定义导航栏 项目中需求: 导航栏在插画上, 这时需要采用自定义导航栏实现. 在json配置中把navigationStyle设置为custom, 这时只会保留右上角胶囊按钮. 公共的导航栏编写一个自定义组件调用. 欢迎大神们指教… 文章目录自定义导航栏效果图创建组件jsonwxmlwxssjs组件使用步骤:…

微信小程序蓝牙BLE开发实战——API及流程介绍(一)

微信小程序蓝牙BLE实战开发(一) 迟来的更新。从4月份以来项目中断续在对接好几个共享产品&#xff0c;关于蓝牙BLE设备&#xff0c;通过蓝牙与设备之间通信进行使用产品。开发中也遇到不少问题哈&#xff0c;后面抽时间续篇。写得不好&#xff0c;请各位大神多多指教。 此篇主…

微信小程序蓝牙BLE开发实战——案例(二)

微信小程序蓝牙BLE开发实战(二) 上篇主要介绍在开发过程中应用到相关API操作。接下来介绍个人在项目开发中应用蓝牙BLE一些事情。 由于时间比较仓促, 有些注释没那么详细。请理解~写的不好欢迎各位大神指点。 文章目录微信小程序蓝牙BLE开发实战(二)项目介绍效果图扫码使用格子…

微信小程序蓝牙BLE开发实战——遇到问题及踩坑(三)

微信小程序蓝牙BLE开发实战(三) 对于我这种小白&#xff0c;遇到问题是常见的哈。这里记录下&#xff0c;避免日后再踩坑 文章目录微信小程序蓝牙BLE开发实战(三)1. iPhone6及6plus无法搜索到设备&#xff1f;解决方案&#xff1a;2. IOS无法获取mac地址,如何连接设备呢?解决方…

微信小程序蓝牙BLE开发——关于进制转换(四)

微信小程序蓝牙BLE开发——进制转换 这段时间开发共享设备&#xff0c;对接蓝牙BLE设备通信协议&#xff0c;过程中用到一些进制转换, 记录下方便使用。 有些参考大神们&#xff0c;感谢分享。 文章目录微信小程序蓝牙BLE开发——进制转换关于字节理解ArrayBuffer转16进制字符串…

微信小程序——根据当前定位查询附近商家

使用微信内置地图查看位置 项目需求&#xff1a; 根据当前的定位位置&#xff0c;查看附近有哪些商家&#xff0c;并可查看商家具体位置。 文章目录使用微信内置地图查看位置步骤效果图具体实现wxmljs1. 初始数据及调用2. 获取用户当前设置3. 获取当前位置4. 获取附近商家列表…