微信小程序用户授权、位置授权及获取微信绑定手机号

1.位置授权

位置授权相对简单,可以直接调用方法wx.getLocation()就可以弹出授权框,

在调用前需要在app.json中设置用途说明

Page({
"permission": {
 "scope.userLocation": {
 "desc": "你的位置信息将用于xxx"
 }
 }
})

授权框

但是存在不少用户会拒绝授权,如果拒绝授权就不会再弹窗,而是直接进入接口 fail 回调,就要手动授权,我们可以通过自定义弹窗来诱导用户授权。我这里用的是wx.showMoadl确认框。

确认框

如果确认就调用wx.opensetting调出授权设置页面

wx.showModal({
   title: '提醒',
   content: '您拒绝了位置授权,将无法使用大部分功能,点击确定重新获取授权',
   success(res) {
   //如果点击确定
   if (res.confirm) {
    wx.openSetting({ //打开设置页
    success(res) { //成功,返回页面回调
     //如果同意了位置授权则userLocation=true
     if (res.authSetting["scope.userLocation"]) { //授权中如果有位置授权则执行逻辑
     /*你的代码*/
     }
    }
    })
   }
   }
  })

授权设置页

完整代码

wx.getLocation({
  success: function(res) {
  app.globalData.lat = res.latitude;
  app.globalData.lon = res.longitude;
  },
  fail() {
  wx.showModal({
   title: '提醒',
   content: '您拒绝了位置授权,将无法使用大部分功能,点击确定重新获取授权',
   success(res) {
   //如果点击确定
   if (res.confirm) {
    wx.openSetting({
    success(res) {
     //如果同意了位置授权则userLocation=true
     if (res.authSetting["scope.userLocation"]) {
     that.onLoad()
     }
    }
    })
   }
   }
  })
  }
 })

2.用户信息授权

用户授权步骤相对会复杂一点,因为现在获取wx.getUserInfo 接口后续将不再出现授权弹窗。需要手动点击去授权,所以也是需要诱导用户去点击按钮。

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">确认</button>

open-type 我用到了两种

  • getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息
  • getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息(下面有)

注意:这里必须是button组件才能触发

这里我将他封装成了一个模拟的弹出框(样式丑陋,自己修改),wxss就不发出来了

模拟弹出框

<!-- wxml -->
<view class='getInfo' wx:if="{{haveInfo}}">
 <view class='content'>
 <view class='text'>我们需要获取您的授权信息</view>
 <view class='btn_block'>
  <button class='btn1' bindtap='no'>拒绝</button>
  <button class='btn2' open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">确认</button>
 </view>
 </view>
</view>

调用bindUserInfo,如果e.detail.userInfo存在,则说明授权成功

bindGetUserInfo(e) {
 //用户点击允许授权
 if (e.detail.userInfo) {
  //业务逻辑
 }

授权成功后即可再调用wx.getUserInfo(),就可以获得用户信息

完整代码

bindGetUserInfo(e) {
 //用户点击允许授权
 if (e.detail.userInfo) {
  this.setData({
  haveInfo: false
  })
  // 获取用户信息
  wx.getSetting({
  success: res => {
   if (res.authSetting['scope.userInfo']) {
   wx.getUserInfo({
    success: res => {
    app.globalData.userInfo = res.userInfo
    //业务代码
    }
   })
   }
  }
  })
 }
 }

3.获取用户手机授权

用户手机授权也是需要诱导用户去点击按钮触发的授权框,所以也是要自定义。

和获取用户信息的自定义框不同的是按钮属性

<button class='btn2' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确认</button>

bindgetphonenumber函数调用成功会返回三个值:

其中我用到的是encryptedData、iv,将这两个发给后端去解码,可以获得三个值(写入数据库就交给后端了,就不用再多个步骤)

  • phoneNumber:用户绑定的手机号(国外手机号会有区号)
  • purePhoneNumber:没有区号的手机号
  • countryCode:区号

如果获取成功才会返回三个值,失败则不会,所以我们判断是否授权获取手机可以直接用那三个值判断

我的代码↓

//获取用户手机
 getPhoneNumber(e) {
 if (e.detail.encryptedData) {
  this.setData({
  havePhone: false
  })
  wx.request({
  url: app.globalData.url + 'xiao_bindphone',
  method: 'POST',
  header: {
   "Content-Type": "application/x-www-form-urlencoded"
  },
  data: {
   user_id: app.globalData.user_id,
   sessionKey: app.globalData.sessionKey,
   encryptedData: e.detail.encryptedData,
   iv: e.detail.iv
  },
  success(res) {
   //业务代码
  }
  })
 }
 },

三个授权就写到这啦,下面写下我的流程和逻辑

————————————————————————————————

如果是新用户进入小程序的话,提交code到后端,后端在数据库创建新的用户,此时的新用户数据只有少量数据的(如后端自己创建的id),所以我们需要将能获取到的值传给后端完善数据库。

一、判断数据库中此用户是否有头像和名称,没有则需要授权用户数据(传头像和名称),将得到的头像和名称传到后端完善数据库,此时需要用到用户信息的授权,即wx.getUserInfo。

二、判断数据库中此用户是否有手机号,没有则调用获取手机号授权,即getPhoneNumber。

三、关于位置授权是项目需要,可调用wx.getLocation。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

  • 微信小程序实现授权登录

    前言:由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发.官方连接:点击打开链接 1.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否授权了,如果没有授权的话就显示下面"界面简介"的第一个图,让用户去执行授权的操作.如果已经授权了,则直接跳过这个页面,进入首页. 2.界面简介 3.源码

  • 微信小程序授权获取用户详细信息openid的实例详解

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如

  • 微信小程序位置授权处理方法

    这两天在做小程序调取地图的时候遇到一个问题,如果用户第一次拒绝了位置权限请求.那么就不会再次唤起授权弹出.需要我们引导用户去开启. 具体做法如下. 在 aap.json中加入授权配置 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } 在 page页面中使用,需要有几个注意的地方,初次使用的时候,去申请权限.这里我是放在onSh

  • 微信小程序如何像vue一样在动态绑定类名

    小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块.模块只有通过 module.exports 或者 exports 才能对外暴露接口. 通俗的将就是自身独立,作用域只作用于该模块,与js互不影响. 主要代码 modu

  • 微信小程序 后台https域名绑定和免费的https证书申请详解

    微信小程序 后台https域名绑定和免费的https证书申请详解 微信小程序在11月3号发布了,这是一个全新的生态,没有赶上微信公众号红利的开发者,运营者可别错过这趟车了. 但是微信的后台需要全https,之前我还不相信,后台注册了后进后台才发现,服务器配置如下图 从后台的服务器配置可以看出 (1)微信小程序后台只支持https,如果公司后台还没支持https的,赶紧要升级了 (2)API请求,文件上传,socket 文件上传和下载,必须是在后台配置的,否则微信不允许你下载       另外,h

  • 微信小程序之数据双向绑定与数据操作

     微信小程序之数据双向绑定与数据操作 数据双向绑定是指js部分数据发生变化是html部分的数据也会发生变化,当然html部分数据发生变化js部分数据也会发生变化,从而使界面很方便的实现动态数据显示,一般拥有数据双向绑定的前端框架都为mvvm结构.数据双向绑定是个好东西,an1 an2 vue  也都有数据双向绑定的机制,而且基本都差不多,抄来抄去嘛!!下面以一个列表为例子来说下数据双向绑定及数据的操作. 1.把要进行数据双向绑定的属性放在page的data里,然后在html里使用{{属性名}}即

  • 微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等

    1)网络 API 列表: wx.request 发起网络请求 wx.uploadFile 上传文件 wx.downloadFile 下载文件 wx.connectSocket 创建 WebSocket 连接 wx.onSocketOpen 监听 WebSocket 打开 wx.onSocketError 监听 WebSocket 错误 wx.sendSocketMessage 发送 WebSocket 消息 wx.onSocketMessage 接受 WebSocket 消息 wx.closeS

  • 微信小程序用户授权最佳实践指南

    前言 开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息.你要做人脸识别,就要获取相机权限.你要做位置地图功能.就要获取用户的位置权限,你要将图片保存在用户的相册,需要获取相册权限等等 微信的 scope 流程: 大多数功能都是没有授权不可用的,一般我会检测是否开启权限,然后如果开启了就继续使用,没开启就给出提示继续请求授权..如果还是拒绝 就给出提示 然后让用户手动去设置页打开... #正常逻辑 但是这一套写下来可能就是这样的: wx.getSetting({

  • 微信小程序用户后台定位及录音授权及请求示例

    目录 官方文档 小程序授权 获取用户授权设置 提前发起授权请求 scope 列表 授权有效期 注意事项 后台定位 案例:个人信息getUserInfo 录音等,可以写在onLaunch中 官方文档 <https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html> https://developers.weixin.qq.com/miniprogram/dev/api/open-api

  • 微信小程序用户授权,以及判断登录是否过期的方法

    初始界面: 判断用户是否过期(如果未过期则重新登录): 获取用户信息: 获取用户的信息并在前台显示: 主要实现两个功能: ①判断登录是否过期,如果过期则就重新登录,如果没过期就提示未过期 ②获取用户的信息,并在前台显示 index.wxml <button bindtap="login">登录</button> <button bindtap="checksession">登录是否过期</button> <but

  • 微信小程序用户授权获取手机号(getPhoneNumber)

    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber. 实现思路: 1.通过wx.login获取code,从而获取到用户的openID和sessionKey 2.通过getPhoneNumber获取encryptedData,iv 3.通过参数[encryptedData] .[iv] .[sessionKey]  请求后

  • 微信小程序登录方法之授权登陆及获取微信用户手机号

    目录 先看一下小程序的登陆流程 第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器. ​​​​​第二步,获取用户信息,点击事件,获取用户授权,用户同意后然后返回信息 ​​第三步,获取用户手机号 结束语 先看一下小程序的登陆流程 使用说明注意: 调用 auth.code2Session 接口,换取 用户唯一标识 OpenID . 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_k

  • 微信小程序用户位置权限的获取方法(拒绝后提醒)

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于wx.openLocation的坐标 2. wx.chooseLocation 需要授权,打开地图选择位置 第一次调用方法时先出现 允许权限之后之后再出现 如果第一次就不允许,则一直调用wx.chooseLocation的fail方法 3. wx.openLocation 需要授权,使用微信内置地图查

  • 微信小程序用户信息encryptedData详解

    之前做过一个版本是根据encryptData和Session_key解密得到完整的用户信息(包含union_id)的方法去获取用户信息,由于小程序升级,如今需要废弃encryptData的方式去获取用户信息,改成使用encryptedData的方式获取用户信息. 新的数据解密方法 接口如果涉及敏感数据(如wx.getUserInfo当中的 openId 和unionId ),接口的明文内容将不包含这些敏感数据.开发者如需要获取敏感数据,需要对接口返回的加密数据( encryptedData )进

  • 微信小程序 用户数据解密详细介绍

    微信小程序 用户数据解密 官方指引图: 引导图一步一步操作 1.获取code onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 let that = this wx.login({ success: function (res) { // success let code = res.code that.setData({ code: code }) wx.getUserInfo({ success: function (res)

  • .NET微信小程序用户数据的签名验证和解密代码

    微信小程序时下大热,抱着学习的心态了解了一下,目前没有搜到完整的.NET用户数据签名验证和解密代码,于是就写了一点. 简单使用方法: 1.客户端调用wx.getUserInfo方法,服务端创建WeChatLoginInfo类的实例接收客户端发来的数据: 2.服务端新建WeChatAppDecrypt类的实例,初始化此类时需传入appId与AppSecret用于验证: 3.调用WeChatAppDecrypt类中的Decrypt方法,传入步骤1中获取的WechatLoginInfo实例: 4.得到

随机推荐