iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序用户授权最佳实践指南
  • 220
分享到

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

2024-04-02 19:04:59 220人浏览 安东尼
摘要

前言 开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息、你要做人脸识别,就要获取相机权限、你要做位置地图功能、就要获取用户的位置权限,你要将图片保存

前言

开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息、你要做人脸识别,就要获取相机权限、你要做位置地图功能、就要获取用户的位置权限,你要将图片保存在用户的相册,需要获取相册权限等等

微信的 scope 流程:

大多数功能都是没有授权不可用的,一般我会检测是否开启权限,然后如果开启了就继续使用,没开启就给出提示继续请求授权..如果还是拒绝 就给出提示 然后让用户手动去设置页打开...

#正常逻辑

但是这一套写下来可能就是这样的:


wx.getSetting({
    success(res)=>{
        if (!res.authSetting['scope']) {
          console.log('未授权')
              wx.authorize({
                scope: 'scope',
                success() {
                    console.log('授权成功')
                },
                fail() {
                    console.log('授权失败,让用户手动授权')
                    wx.showModal({
                        title: '温馨提示',
                        content: '未打开xxx权限',
                        showCancel: false,
                        success(res) {
                        if (res.confirm) {
                            console.log('用户点击确定')
                            wx.openSetting({
                                success(res) {
                                    console.log(res.authSetting)
                                    res.authSetting = {
                                    "scope.camera": true,
                                    }
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消')
                        }
                        }
                  })
                }
             })
        } else {
          console.log('已授权')
        }
    },
    fail(err)=>{}
})

现在都 1202 年了,这一套写下来,再掺杂着业务逻辑,那真的是惨不忍睹~

我是受不了,花了点时间封装了个函数,只需传入指定的权限名称,就能检测用户是否开启权限,没有开启,会提示,提示还不开就去设置页手动打开(总之必须打开)。

本来想写个代码片段,后来发现工具上在调用 openSetting 时有问题,只好放弃。

#代码细节


// utils/auth.js



module.exports = async function wxAuth(authType) {
  // scopeArr ref: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
  let scopeArr = [
    "userInfo",
    "userLocation",
    "userLocationBackground",
    "address",
    "invoiceTitle",
    "invoice",
    "werun",
    "record",
    "writePhotosAlbum",
    "camera",
  ];
  if (scopeArr.indexOf(authType) == -1) {
    return console.error("请输入正确的授权类型");
  }
  let scope = "scope." + authType;
  let isUserSet = await getSettingSync(scope);
  if (isUserSet) return true;
  let isAuthorize = await authorizeSync(scope);
  if (isAuthorize) return true;
  let showModalMes = await showModalSync(scope);
  // 弹框提示去授权
  if (showModalMes) {
    // 去手动授权
    let openSet = await openSettingSync(scope);
    if (openSet) {
      return true;
    } else {
      return false;
    }
  } else {
    // 拒绝授权
    return false;
  }
};

// 判断用户是否开启该授权
function getSettingSync(scope) {
  return new Promise((resolve, reject) => {
    wx.getSetting({
      success(res) {
        if (!res.authSetting[scope]) {
          console.log("未授权");
          resolve(false);
        } else {
          console.log("已授权");
          resolve(true);
        }
      },
      fail(err) {
        reject();
        console.error("wx.getSetting Error", err);
      },
    });
  });
}
// 请求用户授权
function authorizeSync(scope) {
  return new Promise((resolve, reject) => {
    wx.authorize({
      scope: scope,
      success() {
        resolve(true);
        console.log("授权成功");
      },
      fail() {
        resolve(false);
        console.log("授权失败");
      },
    });
  });
}
// 弹框提示用户手动授权
function showModalSync(scope) {
  return new Promise((resolve, reject) => {
    wx.showModal({
      title: "提示",
      content: `为了更好的用户体验,请您授权 ${scope} 功能`,
      confirmText: "去授权",
      showCancel: false,
      success(res) {
        if (res.confirm) {
          console.log("点击确认");
          resolve(true);
        } else if (res.cancel) {
          resolve(false);
        }
      },
      fail(err) {
        reject();
        console.error(err, "wx.showModal Error");
      },
    });
  });
}
// 调起客户端小程序设置界面,返回用户设置的操作结果
function openSettingSync(scope) {
  return new Promise((resolve, reject) => {
    wx.openSetting({
      success(res) {
        console.log(res.authSetting);
        if (res.authSetting[scope]) {
          resolve(true);
        } else {
          resolve(false);
        }
      },
      fail(err) {
        reject();
        console.error(err, "wx.openSetting Error");
      },
    });
  });
}

#使用

JS 代码参考:


import auth from './../../utils/auth'
Page({
   data:{
     isCameraAuth: false
   },
   onLoad(){
         // 授权代码
    auth('camera').then(() => {
      console.log('授权成功')
      this.setData({
        isCameraAuth: true
      }
    }).catch((err) => {
      console.error('授权失败');
    })
   }
})

wxml 代码参考:


<!-- index.wxml -->
<view>是否授权:{{isCameraAuth}}</view>
<camera wx:if="{{isCameraAuth}}" style="width: 100%; height: 300px;"></camera>

#预览

为此,我制作了一个 Demo,点击Demo 预览 ,即可在开发工具中直接打开预览。

总结

到此这篇关于微信小程序用户授权最佳实践的文章就介绍到这了,更多相关微信小程序用户授权内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序用户授权最佳实践指南

本文链接: https://www.lsjlt.com/news/125417.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序用户授权最佳实践指南
    前言 开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息、你要做人脸识别,就要获取相机权限、你要做位置地图功能、就要获取用户的位置权限,你要将图片保存...
    99+
    2024-04-02
  • 微信小程序用户授权环节实现过程
    目录公共组件权限判断微信授权验证wx.getUserProfile()手机号帐号信息验证在商城项目中,我们需要对部分的页面,进行一个授权的判别,例如购物车,及个人中心,需要完成用户信...
    99+
    2023-01-31
    微信小程序用户授权 小程序授权 微信授权
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)
    🥳🥳Welcome Huihui's Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welc...
    99+
    2023-10-26
    小程序 微信小程序 微信 1024程序员节
  • 怎么在微信小程序中为用户授权
    这期内容当中小编将会给大家带来有关怎么在微信小程序中为用户授权,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息、你要做人脸识...
    99+
    2023-06-14
  • 微信小程序实现授权登录之获取用户信息
    本文实例为大家分享了微信小程序实现获取用户信息的具体代码,供大家参考,具体内容如下 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内...
    99+
    2024-04-02
  • 微信小程序授权登录
    微信小程序—授权登录 一、小程序登录 登录流程时序 说明: 1.小程序端调用 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。 2.服务器调用 code2Session 接口,换取 用户唯一标识 OpenID 和 ...
    99+
    2023-09-01
    微信小程序 小程序 微信 授权登录
  • 微信小程序用户授权获取手机号(getPhoneNumber)
    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触...
    99+
    2024-04-02
  • 微信小程序中wx.getUserInfo如何引导用户授权
    小编给大家分享一下微信小程序中wx.getUserInfo如何引导用户授权,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体如下:首先,在page外定义一个函数用户判断是否为空对象var&...
    99+
    2024-04-02
  • 微信小程序如何开发用户授权登陆
    这篇文章主要介绍了微信小程序如何开发用户授权登陆,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。准备:微信开发者工具下载地址:https://...
    99+
    2024-04-02
  • 微信小程序中如何实现用户登录和授权
    在微信小程序中实现用户登录和授权的流程大致如下: 获取用户授权:在小程序中,需要使用wx.login()和wx.getUserI...
    99+
    2024-04-03
    微信小程序
  • 微信小程序实现授权登录之怎么获取用户信息
    这篇文章主要讲解了“微信小程序实现授权登录之怎么获取用户信息”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序实现授权登录之怎么获取用户信息”吧!小程序登录小程序可以通过微信官方提供的...
    99+
    2023-06-30
  • 微信小程序如何实现用户授权弹窗并拒绝时引导用户重新授权
    小编给大家分享一下微信小程序如何实现用户授权弹窗并拒绝时引导用户重新授权,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先看效果图...
    99+
    2024-04-02
  • ASP 授权最佳实践:保护应用程序免受未经授权的访问
    授权是确保应用程序中只有适当的用户才能访问资源的过程。ASP 授权提供了一组内置的授权机制,可帮助保护您的应用程序免受未经授权的访问。这些机制包括基于角色的授权、基于声明的授权和基于策略的授权。 以下是一些 ASP 授权最佳实践: 使用...
    99+
    2024-02-26
    ASP 授权 ASP.NET Core 安全 ASP 授权最佳实践 ASP.NET Core 身份验证
  • 微信小程序如何调用微信授权窗口
    这篇文章主要介绍了微信小程序如何调用微信授权窗口,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 具体实现app.js的onLaunch(...
    99+
    2024-04-02
  • 微信小程序如何授权获取用户详细信息openid
    这篇文章主要介绍微信小程序如何授权获取用户详细信息openid,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序获取用户的头像昵称openid之类第一种使用wx.getUserIn...
    99+
    2024-04-02
  • 微信小程序如何实现授权登录
    这篇文章给大家分享的是有关微信小程序如何实现授权登录的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、前言由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入...
    99+
    2024-04-02
  • 简单实现微信小程序授权登录
    可以直接复制粘贴,只需要改一些东西就可以了 首先在wxml中用微信自带的button开放属性 授权登录 然后在对应的js中创建一个login方法,因为上面bindtap指向的是login,所以就要创建一个新的方法 login(evt){/...
    99+
    2023-10-04
    php 微信小程序
  • 微信小程序如何授权登录
    小编给大家分享一下微信小程序如何授权登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!注:没有在微信开放平台做开发者资质认证的就...
    99+
    2024-04-02
  • 怎么授权登录微信小程序
    本篇文章为大家展示了怎么授权登录微信小程序,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。授权登录的基本流程上图是微信小程序官网提供的授权登录基本流程图,这里我只从前端开发的角度来讲解一下该流程。通过...
    99+
    2023-06-08
  • 怎么取消微信小程序授权
    取消微信小程序授权的方法:1.打开微信,切换发现选项;2.进入“小程序”选项;3.选择小程序;4.点击“...”符号;5.选择“关于小程序”选项;6.点击“...”符号,点击“设置”选项;7.关闭“使用我的用户信息”选项;具体步骤如下:首先...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作