【uni-app】小程序实现微信授权登陆(附流程图)

news2025/7/17 20:44:59

微信授权登陆是比较常见的一种登陆方式,今天来总结下实现流程

  • 进入授权登陆页面

  • 初始化调用wx.login获取登陆凭证code(用户无感知)

//封装微信获取用户code,避免嵌套
login() {
    return new Promise((resolve, reject) => {
        uni.login({
            success(res) {
                resolve(res);
            },
            fail(err) {
                reject(err);
            }
        });
    });
}
  • 用登陆凭证code调用后端接口去获取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等(用户无感知)

async init() {
    //调用微信登陆
    let res = await this.login()
    if (res.code && ['login:ok'].includes(res.errMsg)) {
        //后端通过code调用微信API返回openid/unionid/session_key参数, 存储起来,前端无法直接调用微信相关API
        let openIdRes = await getWechatOpenIdByCode({ code: res.code })
        if (openIdRes.success) {
            let { openId, sessionKey } = openIdRes
            this.openId = openId
            this.sessionKey = sessionKey
        }
    } else {
        //异常处理,再次发起请求或者抛出异常
        // .....
    }
},

  •  用户点击微信手机号快捷登录按钮,触发授权弹窗(需用户主动触发,不允许api主动调用),详细使用看官方文档

  • 用户允许授权会触发getphoneNumber小程序事件获取到encryptedData, iv参数
//微信授权登陆按钮
<u-button  open-type="getPhoneNumber" @getphonenumber="getphoneNumber">用户授权登陆</u-button>

//JS部分

//用户授权登陆允许后,返回encryptedData, iv参数
getPhoneNumber(e) {
    //拿到参数后进一步去解密....
    // 授权通过后轮询等待获取sessionKey响应成功
    if (['getPhoneNumber:ok'].includes(e?.detail?.errMsg)) {
          this.handlePolling(e)
    }
}


/**
* 轮询查询是否有sessionKey,防止初始化接口响应时间过长拿不到解密入参,用户解密失败
*/
handlePolling(e) {
    this.timer = setInterval(() => {
        if (this.sessionKey) {
            this.decryptDataInfo(e.detail)
            this.timer = null
        }
    }, 300)
},
  • 调用后端解密接口,解密拿到用户的手机信息(手机号、区号、国家等)
  • 调用后端登陆接口,传入openId、用户手机号,返回登陆token完成登陆
  • /**
      * 解密获取手机号码,区号
      */
    async decryptDataInfo(detail:any) {
        let params =  {
            encryptedData: detail.encryptedData,
            sessionKey: this.sessionKey,
            iv: detail.iv,
            appId: getLocalStorage(AppIdKey),
        }
    
        let res = await decryptApi(params) 
        if (res.success) {
            //解密成功,获取到手机号码,区号等信息
            let data = JSON.parse(res.data)
            // 调用后端登陆接口传入信息,完成登陆
            this.loginMinor(data)
        } else {
           //....异常处理
        }
    }

    有些朋友可能觉得写的不够清晰,重新补充了个流程图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407146.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Vue+Less+axios封装+ElementUI搭建项目底层支撑实战

目录 一、本节介绍和上节回顾 1. 上节介绍 2. Vue SpringBoot前后端分离项目实战目录 3. 本节介绍 二、项目前置所需应用安装 1. Less的安装 2. Less安装后的验证 3. axios的安装 4. axios请求的封装与拆解 5. axios请求封装后的验证 6. ElementUI的安装、验证 …

闭包是什么?五分钟带你了解闭包

闭包 前言 闭包对每个前端来说都是一个绕不开的话题。学习之初也因为搞清闭包的概念耗费了不少精力&#xff0c;今天写一篇博客来记录本人对闭包的理解&#xff0c;笔者水平有限&#xff0c;若有疏漏及错误&#xff0c;愿不吝赐教。 什么是闭包&#xff1f; 你可以在一个函…

创建vue2项目

如何创建一个vue2项目 &#xff08;1&#xff09; 使用cmd终端直接创建 在键盘上winr&#xff0c;输入cmd打开终端窗口&#xff0c;cd进入到vue项目所创建的目录里&#xff08;我是直接创建在桌面上&#xff09; 输入创建项目指令&#xff08;vue create 项目名称&#xff09;…

走进Vue【一】初识Vue

文章目录&#x1f31f;前言&#x1f31f;MVVM模式&#x1f31f;Vue简介&#x1f31f;Vue重要版本发布&#x1f31f;Vue特点&#x1f31f;快速上手Vue&#x1f31f;Hello Vue&#x1f31f;Vue实例&#x1f31f;写在最后&#x1f31f;前言 从历史的潮流来说&#xff0c;人们从之…

Promise.all的使用

Promise的基本使用Promise.all() 传参和返回结果Promise.all() 完成状态Promise.all() 失败状态Promise.all() 使用案例Promise.all() 传参和返回结果 Promise.all() 传入一个promise的数组&#xff0c;并返回一个Promise实例&#xff0c;传入数组中的promise返回的 resolve 回…

探究前端的跑马灯效果是如何用css实现的

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;…

学习 Python 之 Pygame 开发魂斗罗(十二)

学习 Python 之 Pygame 开发魂斗罗&#xff08;十二&#xff09;继续编写魂斗罗1. 修改玩家扣减生命值2. 解决玩家下蹲子弹不会击中玩家而是直接让玩家死亡的问题3. 完善地图4. 增加产生敌人函数&#xff0c;解决一直产生敌人的问题5. 给玩家类增加计算玩家中心的方法继续编写魂…

软件行业的最后十年【ChatGPT】

在这篇文章中&#xff0c;我将说明像 ChatGPT 这样的生成式人工智能 (GAI) 将如何在十年内取代软件工程师。 预测被离散化为 5 个阶段&#xff0c;总体轨迹趋向于完全接管。 但首先&#xff0c;一个简短的前言。 推荐&#xff1a;用 NSDT场景设计器 快速搭建3D场景。 1、关于AI…

ChatGPT-4.0 : 未来已来,你来不来

文章目录前言ChatGPT 3.5 介绍ChatGPT 4.0 介绍ChatGPT -4出逃计划&#xff01;我们应如何看待ChatGPT前言 好久没有更新过技术文章了&#xff0c;这个周末听说了一个非常火的技术ChatGPT 4.0&#xff0c;于是在闲暇之余我也进行了测试&#xff0c;今天这篇文章就给大家介绍一…

七夕节,我用代码制作了表白信封

大家好&#xff0c;我是小周&#xff0c;明天就是七夕了&#xff0c;这么浪漫的节日&#xff0c;自然少不了我这个浪漫博主&#xff0c;本次为大家贡献表白信封的制作&#xff0c;其他的就看缘分啦&#xff0c;哈哈&#xff0c;最后会放上资源包&#xff0c;需要的小伙伴自取就…

Nginx反向代理WebSocket服务连接报错:WebSocket connection to “wss://xxx/xxx“ failed

最近使用 node.js 搭建 WebSocket 服务&#xff0c;在本地测试 connection 都是正常&#xff0c;于是部署到 Linux 服务上&#xff0c;需要用 Nginx 来反向代理 WebSocket 服务。浏览器控制台报错&#xff1a;WebSocket connection to wss://tiven.cn/ws/xxx failed:&#xff0…

学会iframe并用其解决跨域问题

了解iframe 官方定义为&#xff1a;iframe是HTML标签&#xff0c;作用是文档中的文档&#xff0c;或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架&#xff08;即行内框架&#xff09;。 简单理解为&#xff1a;iframe是一个内联框架&#xff0c;可以在当…

ES6 --- 解构赋值(数组,对象,函数)使用详解

解构赋值 JavaScript 中最常用的两种数据结构是 Object 和 Array。 对象让我们能够创建通过键来存储数据项的单个实体。数组则让我们能够将数据收集到一个有序的集合中。 但是&#xff0c;当我们把它们传递给函数时&#xff0c;函数可能不需要整个对象/数组。它可能只需要对…

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

报错&#xff1a;[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading $refs)" 背景&#xff1a;1.在做vue项目时&#xff0c;在功能弹框中&#xff0c;想实现新增内容。 2. 报错原因是要触发menuCheckall组件后&#xff…

background-image使用

目录 background-image: url(" ")&#xff1b; background-repeat属性&#xff08;背景平铺&#xff09; background-size属性&#xff08;设置背景图片大小&#xff09; background-position属性&#xff08;背景图片位置&#xff09; 1.background-image: url…

Vue中 Vue-Baidu-Map基本使用

前言 但我们遇到一项新技术或者没有写过的东西为了不走弯路我们只能先去模仿或者看官方文档 Vue这个框架相信大家都熟悉&#xff0c;只要是需要用的第三方平台它一般都会进行集成&#xff0c;比如Vue-Baidu-map 为什么有百度原生api为什么还需要插件&#xff0c;因为使用插件…

ref 引用(vue获取DOM元素)

ref 引用 jquery 牛逼 简化了程序员操作DOM的过程 vue 优势&#xff1a; MVVM 在 vue 中&#xff0c;程序员不需要操作DOM。只需要把数据维护好&#xff01;(数据驱动视图) 结论&#xff1a;在 vue 项目&#xff0c;强烈不建议大家安装和使用jQuery&#xff01;&#xff01;&am…

CORS错误是什么如何解决?

通过http://localhost访问服务端时,出现CROS错误是什么问题该如何解决呢? 发生ajax跨域问题的原因&#xff1a;(三个原因同时满足才可能产生跨域问题) (1)浏览器限制 发生ajax跨域的问题的时候后端是正常执行的&#xff0c;从后台打印的日志可以看出&#xff0c;而且后台也会…

前端布局小案例,如何创建漂亮的毛玻璃输入表单卡片效果

在当今互联网时代&#xff0c;用户体验是至关重要的。当我们在设计网站或应用程序时&#xff0c;一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看的表单则可以提高用户提交的意愿和效率。本文将介绍如何使用HTML和CSS创建一个漂亮的毛玻璃输入…

vue3 响应式对象的 api 详解

文章目录Ⅰ. ref、reactive ( 递归监听 )Ⅱ. isRef、isReactive ( 判断 )Ⅲ. toRef 和 toRefs ( 解构 )Ⅳ. toRaw 、 markRaw ( 解除代理)Ⅴ. unref ( 拷贝 )Ⅵ. shallowRef 、shallowReactive&#xff08; 非递归监听 &#xff09;Ⅶ. triggerRef &#xff08;强制更新&#x…