广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序授权登录的优雅处理方式
  • 918
分享到

微信小程序授权登录的优雅处理方式

2024-04-02 19:04:59 918人浏览 八月长安
摘要

前言 当微信小程序项目中涉及到获取用户信息并实现用户登录时,可以通过微信官方提供的登录能力方便地获取微信的用户身份标识,快速建立小程序内的用户体系。官方文档只是提供如何去调用授权登

前言

微信小程序项目中涉及到获取用户信息并实现用户登录时,可以通过微信官方提供的登录能力方便地获取微信的用户身份标识,快速建立小程序内的用户体系。官方文档只是提供如何去调用授权登录,如果直接原封不动的照搬文档来进行代码编写,这样势必会造成代码的维护性差,所以本篇着重介绍如果更优雅的处理微信小程序的授权登录。

授权登录的基本流程

上图是微信小程序官网提供的授权登录基本流程图,这里我只从前端开发的角度来讲解一下该流程。

  • 通过wx.login()获取临时登录凭证code。
  • 通过调用服务端提供的接口把code传递给服务端,然后服务端会返回给前端openid和sesstion_key。这就代表已经成功完成授权登录了,至于openid和sesstion_key的用途,后面再进行讲解。

大体的登录流程搞清楚之后,就可以进行代码的编写了。因为微信提供的api接口调用不利于代码维护,所以我借助了promise进行封装处理(不了解的可以看es6文档,里面有详细介绍),这样做的好处就是以后可以链式调用接口,也可以结合async/await(ES6语法)将异步接口进行同步处理。

get/post 接口的封装处理

在根目录中创建service文件夹,用于存放与接口相关的代码,在service文件夹创建一个myRequest.js文件并对小程序的get/post请求进行封装处理,代码如下:


//get请求封装(跳页判断)
//通过全局函数getApp可以获取全局变量,需要全局的数据可以在根目录下的app.js进行设置
let app=getApp();
const myGet = (url, data)=>{
 return new Promise((resolve, reject)=>{
 wx.request({
  url: `${app.globalData.Http}${url}`,
  data:data,
  method:"GET",
  //这个authorization就是含有openid和sesstion_key信息的值
  header: { 'authorization': app.globalData.authorization},//获取全局变量中的用户信息,并放入到请求头中
  success:(res)=>{
  if (res.data.code == 409) {
   //409代表用户未进行登录,强制跳到写好的登录页
   wx.navigateTo({
   url: '../login/login'
   })
  } else{
   resolve(res.data);
  }
  },
  fail:(res)=>{
  reject();
  }
 })
 })
}
//post请求封装(跳页判断)
const myPost = (url, data) => {
 return new Promise((resolve, reject) => {
 wx.request({
  url: `${app.globalData.HTTP}${url}`,
  data: data,
  method: "POST",
  header: { 'authorization': app.globalData.authorization},
  success: (res) => {
  if (res.data.code == 409){
   wx.navigateTo({
   url: '../login/login'
   })
  }else{
   resolve(res.data);
  }
  
  },
  fail: (res) => {
  reject();
  }
 })
 })
}
module.exports = {
 myGet,
 myPost,
}

全局变量配置app.js代码如下(注意全局变量数据会在刷新页面或是重新进入小程序之后初始化,并不能永久保存当前的数据状态):


//app.js
App({
 onLaunch: function() {
 //这里可以根据项目实际需求写一些项目初始化需要执行的代码
 },
 globalData: {
 HTTP: "https://shop.yamecent.com/",
 //我们获取openid和sesstion_key之后,会把它存放到小程序内存的authorization中,这样数据不会丢失,除非删除该小程序
 authorization: wx.getStorageSync('authorization') || "",//获取存储在小程序内存中的authorization
 }
})

授权登录接口封装

这部分封装会用到async/await,将异步接口进行同步处理,不了解的可以参看ES6文档说明,在service文件夹下创建login.js代码如下:


const myRequest = require('./myRequest.js');
const app = getApp();
const HTTP = app.globalData.HTTP;
//微信login接口获取code封装 
const myLogin=()=>{
 return new Promise((resolve, reject)=>{
 wx.login({
  success:(res)=>{
  resolve(res.code);
  },
  fail:(res)=>{
  reject(res.errMsg);
  console.log("微信登录获取code失败");
  }
 })
 })
}
//获取openid和session_key接口封装
const getUserMsg=(myUrl,myData)=>{
 return new Promise((resolve,reject)=>{
 wx.request({
  url: myUrl,
  method: "POST",
  data: myData,
  success:(res)=>{
  if(res.data.code==500){
   //获取失败
   wx.showToast({
   title: res.data.msg,
   icon: 'none',
   duration: 2000,
   mask:true,
   })
   resolve(500);//失败是返回500   
  }else{
   resolve(res.data.data);
  }  
  },
  fail:(res)=>{
  reject(res.data.msg);
  console.log("获取openid和session_key接口失败");  
  }
 })
 })
}

//封装存储(注意:这里的存储过程是异步的)
const mySetStorage=(key,val)=>{
 return new Promise((resolve, reject) => {
 wx.setStorage({
  key: key,
  data: val,
  success: () => {
  resolve(true);
  },
  fail: () => {
  reject(false);
  }
 })
 }) 
}

//封装获取存储
const myGetStorage=(key)=>{
 return new Promise((resolve,reject)=>{
 wx.getStorage({
  key: 'key',
  success: (res)=>{
  resolve(res.data);
  },
  fail:()=>{
  reject("获取存储失败");
  }
 })
 })
}


//授权方法封装
//sendData是通过授权按钮获取到的用户信息,这里要作为参数传递给后台来保存用户的信息
//cb是授权登录成功之后所要执行的函数,具体是什么功能的函数,要根据项目需求而定,也可能不需要
const myAuthorize = (sendData,cb="") => {
 async function accredit() {
 wx.showLoading({
  title: '认证中',
  mask:true
 })
 let code = await myLogin();//微信登陆获取code接口
 sendData.code=code;
 let author = await getUserMsg(`${HTTP}auth`, sendData);//获取后台openid sesstion_key接口
 wx.hideLoading();
 if(author==500){
  return;
 }
 await mySetStorage("authorization", author.Authorization);//存到内存中,进入小程序中获取并存入app.globalData中
 app.globalData.authorization = author.Authorization;
 typeof cb == "function" && cb(author);//回调所需要用的登陆状态参数
 //这里可以补充一下其它业务逻辑,如tabbar用户购物车数量等逻辑
 wx.showToast({
  title: '成功授权',
  icon: 'success',
  duration: 2000,
  mask: true
 });    

 
 }
 accredit();
}

module.exports = {
 myAuthorize,
 mySetStorage,
 myGetStorage
}

授权登录封装好了之后再看看如何在项目中如何使用,由于微信小程序授权只能通过button来触发,所以使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。login.wxml代码如下:


<button class='btn' open-type="getUserInfo" bindgetuserinfo='GotoLogin'>立即登录</button>

login.js代码如下:


// pages/login/login.js
const myRequest = require('../../common/script/myRequest.js');
const login = require('../../common/script/login.js');
const app = getApp();
const HTTP = app.globalData.HTTP;
Page({

 
 data: {
 
 },
 gotoLogin: function (e) {
 let sendOjb={};//用于存放用户信息
 if (e.detail.errMsg =="getUserInfo:ok"){
  sendOjb = { avatar: e.detail.userInfo.avatarUrl,
     nickname: e.detail.userInfo.nickName, 
     sex: e.detail.userInfo.gender,
     province: e.detail.userInfo.province, 
     city: e.detail.userInfo.city}; 
  login.myAuthorize(sendOjb,()=>{
  wx.navigateBack();//成功之后返回之前的页面,也可以根据项目需求写一些其它的逻辑
  }) 
 }else{
  
 }
 },
 
 onLoad: function (options) {

 },
})

结束语

以上代码复制粘贴到自己的微信小程序项目中就能够正常运行,如有错误或需要改进的地方还请与我联系,我将及时进行改正。

到此这篇关于微信小程序授权登录的优雅处理方式的文章就介绍到这了,更多相关微信小程序授权登录内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序授权登录的优雅处理方式

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

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

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

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

下载Word文档
猜你喜欢
  • 微信小程序授权登录的优雅处理方式
    前言 当微信小程序项目中涉及到获取用户信息并实现用户登录时,可以通过微信官方提供的登录能力方便地获取微信的用户身份标识,快速建立小程序内的用户体系。官方文档只是提供如何去调用授权登...
    99+
    2022-11-11
  • 微信小程序授权登录
    微信小程序—授权登录 一、小程序登录 登录流程时序 说明: 1.小程序端调用 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。 2.服务器调用 code2Session 接口,换取 用户唯一标识 OpenID 和 ...
    99+
    2023-09-01
    微信小程序 小程序 微信 授权登录
  • 微信小程序如何授权登录
    小编给大家分享一下微信小程序如何授权登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!注:没有在微信开放平台做开发者资质认证的就...
    99+
    2022-10-19
  • 怎么授权登录微信小程序
    本篇文章为大家展示了怎么授权登录微信小程序,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。授权登录的基本流程上图是微信小程序官网提供的授权登录基本流程图,这里我只从前端开发的角度来讲解一下该流程。通过...
    99+
    2023-06-08
  • 【微信授权登录】uniapp开发小程序,实现获取微信授权登录功能
    一、解题思路: 微信授权登录(获取用户信息) 1.先获取用户信息——用户授权允许后,通过调用uni.login 可以获取到code。 2.拿着获取到的code去调用——登录接口,可以获取到token。 3.把token存入缓存。就可以在页面...
    99+
    2023-08-16
    小程序 微信 javascript
  • 简单实现微信小程序授权登录
    可以直接复制粘贴,只需要改一些东西就可以了 首先在wxml中用微信自带的button开放属性 授权登录 然后在对应的js中创建一个login方法,因为上面bindtap指向的是login,所以就要创建一个新的方法 login(evt){/...
    99+
    2023-10-04
    php 微信小程序
  • 微信小程序如何实现授权登录
    这篇文章给大家分享的是有关微信小程序如何实现授权登录的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、前言由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入...
    99+
    2022-10-19
  • Vue3项目中优雅实现微信授权登录的方法
    目录前言 准备 实现思路 上代码 总结 前言 微信授权登录是做微信公众号开发一直绕不开的话题,而且整个授权登录流程的实现,是需要前后端配合一起完成的。在过去前后端还未分离的年代,也...
    99+
    2022-11-12
  • 微信小程序开发之用户授权登录的方法
    这篇文章将为大家详细讲解有关微信小程序开发之用户授权登录的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。准备:微信开发者工具下载地址:https://developers.weixin.qq.com/...
    99+
    2023-06-14
  • 如何实现微信小程序之授权登录
    这篇文章主要介绍如何实现微信小程序之授权登录,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.实现思路自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof...
    99+
    2023-06-14
  • 通过大白话理解微信小程序的授权登录
    目录前言大白话讲步骤:1. 前端写一个button 按钮点击调用一个方法2. 前端点击button后,该调用的该方法里面写wx.login( ) 方法,这时候你会获得一些数据3. 后...
    99+
    2022-12-08
    微信小程序授权登录怎么实现 微信小程序重新授权登录 微信小程序授权登录代码
  • 微信小程序的授权登录-Java 后端 (Spring boot)
    微信开发文档链接:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 1. 前提 一个可以测试的微信小程序此微信小程序的APP...
    99+
    2023-10-18
    微信小程序 java spring boot
  • 如何实现uni-app微信小程序授权登录
    小编给大家分享一下如何实现uni-app微信小程序授权登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、appID相关申请和配置1. appid获取方式登录微...
    99+
    2023-06-22
  • 【Springboot】整合wxjava实现 微信小程序:授权登录
    文章目录 一、wxjava是什么二、使用步骤1.引入依赖2.配置yml3.小程序的配置4.后端的业务逻辑代码controllerserviceimpldto 5.前端的业务逻辑代码新建...
    99+
    2023-09-09
    微信小程序 spring boot 小程序
  • 微信小程序授权登录功能如何实现
    这篇文章主要介绍“微信小程序授权登录功能如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序授权登录功能如何实现”文章能帮助大家解决问题。微信授权登录我们的项目开发有时候用到用户的一些信...
    99+
    2023-07-05
  • uni-app 微信小程序授权登录的实现步骤
    目录一、appID相关申请和配置1. appid获取方式2. appID配置二、获取用户基础数据2.1. 获取用户信息2.2. 获取用户信息2三、调用登录api3.1. 登录api3...
    99+
    2022-11-12
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)
    🥳🥳Welcome Huihui's Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welc...
    99+
    2023-10-26
    小程序 微信小程序 微信 1024程序员节
  • 微信小程序登录方法之授权登陆及获取微信用户手机号
    目录先看一下小程序的登陆流程第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。​​​​​第二步,获取用户信息,点击事件,获...
    99+
    2022-11-13
  • springboot+jwt+微信小程序授权登录获取token的方法实例
    目录前言配置XcxAuthenticationProviderXcxAuthenticationToken小程序授权登录前言 我们有时候在开发中,遇到这样的问题,就是我们需要小程序授...
    99+
    2022-11-13
  • 微信小程序实现授权登录之获取用户信息
    本文实例为大家分享了微信小程序实现获取用户信息的具体代码,供大家参考,具体内容如下 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作