微信小程序-授权登录(手机号码)

1、WXBizDataCrypt.js-下载地址  

2、UNIAPP代码

<template>
    <view class="work-container">
        <view class="login">
            <view class="content">
                <button class="button_wx" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
                    <u-icon name="weixin-fill" color="#FFFFFF" size="50"></u-icon>
                    <text class="button_text">授 权 登 录</text>
                </button>
            </view>
        </view>
    </view>
</template>

<script>
import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";//必要解密js
    let that;
    export default {
        data() {
            return {
                appid: '',//必要
                secret: '',//必要

                code: '',//临时登录凭证
            };
        },
        mounted() {
            that = this;
            that.isLogin();
            that.getWxCode();

        },
        methods: {
            isLogin() {
                try {
                    const phoneNumber = uni.getStorageSync('phoneNumber');
                    if (phoneNumber) {//自动登录
                        // 业务登录方法
 
                    }
                } catch (e) {
                    // error
                }
            },
            // 获取临时登录凭证
            getWxCode() {
                wx.login({
                    success: res => {
                        console.log('获取用户临时登录凭证code:', res.code);
                        that.code = res.code;
                    }
                })
            },
            // 获取手机号的回调函数
            getPhoneNumber(e) {
                const {
                    errMsg,
                    encryptedData,
                    iv
                } = e.detail;
                if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
                    console.log('用户拒绝授权=>');
                } else {
                    console.log('用户同意授权=>', errMsg);
                    console.log('用户手机号加密数据:', e.detail.encryptedData);
                    console.log('加密算法的初始向量:', iv);
                    console.log('开始校验登录凭证code=>');
                    //登录凭证校验,返回用户唯一标识、会话密钥
                    uni.request({
                        url: 'https://api.weixin.qq.com/sns/jscode2session',//微信登录凭证校验接口
                        data: {
                            appid: that.appid,
                            secret: that.secret,
                            js_code: that.code,
                            grant_type: 'authorization_code'
                        },
                        success(sessionRes) {
                            console.log('登录凭证code校验成功=>');
                            const {
                                openid,
                                session_key
                            } = sessionRes.data;
                            console.log('用户唯一标识:', openid);
                            console.log('会话密钥:', session_key);
                            console.log('开始解密用户手机号=>');
                            var pc = new WXBizDataCrypt(that.appid, session_key);
                            //解密用户数据
                            var data = pc.decryptData(encryptedData, iv);

                            if (data) {
                                console.log('用户手机号解密成功: ', data.phoneNumber);
                                uni.setStorageSync("phoneNumber", data.phoneNumber);
                                // 业务登录方法
                                // that.startLogin(data.phoneNumber);
 
                            }
                        }
                    });
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .login {
        min-height: 100vh;
    }
 
    .content {
        margin-top: 500rpx;
    }
 
    .button_wx {
        background-color: #07c160;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        font-size: 30rpx;
        width: 601rpx;
        height: 100rpx;
        border-radius: 2.5rem;
    }
 
    .button_text {
        font-size: 20px;
        margin-left: 0.5em;
    }
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(四)上市企业实施IPD成功案例分享之——天士力

众所周知&#xff0c;药物有创新药和仿制药两种&#xff0c;其实这是根据新药研发的方式划分的&#xff0c;而创新药则经历一个从无到有的过程。无论是仿制药还是创新药&#xff0c;都是基于市场需求为前提进行的研发过程&#xff0c;药物研发立项同样需要满足治疗人类的疾病&a…

Android 13 Handler详解

1.Handler 简介 Handler 是一套 Android 消息传递机制。在多线程应用场景中&#xff0c;将子线程中需要更新 UI 的操作消息&#xff0c;传递到 UI 主线程&#xff0c;从而实现子线程通知 UI 更新最终实现异步消息处理。说白了是用于线程之间的通信。 Handler主要有4个重要类&a…

学习笔记|两因素析因设计的方差分析|效应量|统计分析策略|《小白爱上SPSS》课程:SPSS第九讲 | 两因素析因设计的方差分析,超级详细

目录 学习目的软件版本原始文档两因素析因设计的方差分析一、实战案例二、统计策略三、SPSS操作1、正态性检验2、方差分析 四、结果解读Tips&#xff1a;效应量越大越好吗&#xff1f;统计分析策略 五、简单效应操作及结果1、SPSS操作2、结果解读 六、规范报告1、规范表格2、规…

关于宝塔面板提示“upgrade your ACME client to support TLSv1.2 or better”的解决办法

今天续期SSL证书的时候提示“upgrade your ACME client to support TLSv1.2 or better”&#xff0c;这一般是旧系统情况下TLS版本过低&#xff1a;acme.sh版本低于2.8所引起的&#xff0c;也就是提示&#xff1a;升级你的系统至 TLS 1.2 协议或更高版本。 但是国内服务器无法…

创建javaEE项目(无maven),JSP(九大内置对象)、Servlet(生命周期)了解

一、Servlet和jsp 0.创建web项目(无maven)&#xff1a; 1.创建一个普通的java项目 2.项目根目录右键&#xff0c;添加模板 3.配置tomcat服务器 4.配置项目tomcat依赖 1.Servlet(Server Applet)服务端小程序 用户通过浏览器发送一个请求&#xff0c;服务器tomcat接收到后&…

python 练习 在列表元素中合适的位置插入 输入值

目的&#xff1a; 有一列从小到大排好的数字元素列表&#xff0c; 现在想往其插入一个值&#xff0c;要求&#xff1a; 大于右边数字小于左边数字 列表元素&#xff1a; [1,4,6,13,16,19,28,40,100] # 方法&#xff1a; 往列表中添加一个数值&#xff0c;其目的方便元素位置往后…

GB28181协议如何注册

前言 GB28181协议是视频监控领域的国家标准&#xff0c;本文将解析如何在FFmpeg中增加对GB28181协议的支持&#xff0c;使其可以与支持GB28181协议的设备进行通信与控制&#xff0c;实现设备的注册、保活以及流媒体的传输。 1.背景介绍 GB28181协议指的是国家标准GB/T 28181…

360加固APP后启动崩溃—注意加固前后签名是否一致

如下截图所示&#xff0c;我今天就是遇到了这个问题&#xff0c;这个问题是比较好解决&#xff0c;但如果官网有显眼指引说明会不会对开发者更友好些呢&#xff1f; 首先我们给360的加固包是带有自己的签名的&#xff0c;然后经360加固过后&#xff08;免费的加固服务&#xf…

适合短视频团队使用的批量剪辑软件,支持免费试用,建议都去试试

全能的批量剪辑是什么样&#xff1f;大致就是既要能写脚本、又要能高效剪辑、并完成矩阵分发&#xff0c;从各个环节助力团队提升工作效率。 推荐超级编导这款批量剪辑工具&#xff0c;吸取同类批量剪辑软件的优点&#xff0c;弥补其他软件的不足&#xff0c;根据国内外2000短…

20.4 OpenSSL 套接字AES加密传输

在读者了解了加密算法的具体使用流程后&#xff0c;那么我们就可以使用这些加密算法对网络中的数据包进行加密处理&#xff0c;加密算法此处我们先采用AES算法&#xff0c;在网络通信中&#xff0c;只需要在发送数据之前对特定字符串进行加密处理&#xff0c;而在接收到数据后在…

提高微星笔记本Linux下散热性能,MSI-EC 驱动新补丁发布

导读近日消息&#xff0c;今年早些时候&#xff0c;Linux 6.4 中添加了 MSI-EC 驱动程序&#xff0c;允许对 Linux 系统微星笔记本电脑进行更多控制。 MSI-EC 驱动程序近日迎来新补丁&#xff0c;为微星笔记本带来 Cooler Boost 功能。该功能允许提高笔记本电脑的风扇转速&…

3DEXPERIENCE云端项目管理小工具--Project Planner项目策划者角色

云端3DEXPERIENCE平台提供了一个协作环境&#xff0c;使企业和个人能够以全新的方式实现创新。它将人员、创意、数据和解决方案连接到一个始终在线且可用的协作和交互环境中&#xff0c;可以帮助您的企业提高执行力、生产率并加速创新。 3DEXPERIENCE中的Project Planner项目策…

【Linux虚拟机】 JDK、Tomcat、MySQL安装配置讲解

目录 一、上传安装包到服务器 二、JDK与Tomcat安装 2.1 解压安装包 2.2 配置JDK环境变量 2.3 配置Tomcat环境 三、MySQL安装配置 3.1 删除默认数据库 3.2 安装mysql安装包 3.3 mysql初始化操作 四、后端接口部署 4.1 导入项目.war 4.2 新建数据库 4.3 运行服务器项目…

mysql 增删改查基础命令

数据库是企业的重要信息资产&#xff0c;在使用数据库时&#xff0c;要注意(查和增,无所谓,但是删和改,要谨慎! ) 数据库管理系统(DBMS) :实现对数据的有效组织&#xff0c;管理和存取的系统软件 mysgl 数据库是一个系统&#xff0c; 是一个人机系统&#xff0c;硬件, gs,数据库…

算法与数据结构-回溯算法

文章目录 如何理解“回溯算法”&#xff1f;两个回溯算法的经典应用0-1 背包正则表达式 如何理解“回溯算法”&#xff1f; 笼统地讲&#xff0c;回溯算法很多时候都应用在“搜索”这类问题上。不过这里说的搜索&#xff0c;并不是狭义的指我们前面讲过的图的搜索算法&#xf…

MSQL系列(十二) Mysql实战-为什么索引要建立在被驱动表上

Mysql实战-为什么索引要建立在被驱动表上 前面我们讲解了BTree的索引结构&#xff0c;也详细讲解下 left Join的底层驱动表 选择原理&#xff0c;那么今天我们来看看到底如何用以及如何建立索引和索引优化 开始之前我们先提一个问题&#xff0c; 为什么索引要建立在被驱动表上…

选择适合制造业的企业邮箱平台

自2010年成立以来&#xff0c;J公司已从一家小型有限责任公司发展成为全球领先的工业内窥镜研发、生产和销售企业。公司的产品制造采用国际先进技术和一流生产工艺&#xff0c;专业为客户提供定制解决方案&#xff0c;产品已广泛应用于锅检特检、机械制造、发电、石油、燃气、化…

一款成熟的文件外发审计管控系统,应该具备哪些价值?

在信息化高速发展的时代&#xff0c;电子文件泄密事件层出不穷&#xff0c;比如文本文档、图像、音频、视频、电子表格等&#xff0c;都是日常会接触到的文件类型。像制造业企业&#xff0c;会有比较多的上下游协作交流&#xff0c;外发的电子文档以明文的形式提供给合作伙伴&a…

当女朋友要求你用Python画一个粉粉的Hello Kitty的时候

先看效果图 完整代码 import math import turtle as t# 计算长度、角度 t1:画笔对象 r:半径 angle:扇形&#xff08;圆形&#xff09;的角度 def myarc(t1, r, angle):arc_length 2 * math.pi * r * angle / 360 # angle角度的扇形的弧长n int(arc_length / 3) 1 # 线段…

【K8S】二进制安装

常见的K8S安装部署方式 ●Minikube Minikube是一个工具&#xff0c;可以在本地快速运行一个单节点微型K8S&#xff0c;仅用于学习、预览K8S的一些特性使用。 部署地址&#xff1a;https://kubernetes.io/docs/setup/minikube ●Kubeadm☆ Kubeadm也是一个工具&#xff0c;提…