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

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.mzph.cn/news/128055.shtml

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

相关文章

数据结构之栈的实现

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇: Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”…

J2EE项目部署与发布(Linux版本)->jdktomcat安装,MySQL安装,后端接口部署,linux单体项目前端部署

jdk&tomcat安装MySQL安装后端接口部署linux单体项目前端部署 1.jdk&tomcat安装 上传jdk、tomcat安装包 解压两个工具包 #解压tomcat tar -zxvf apache-tomcat-8.5.20.tar.gz #解压jdk tar -zxvf jdk-8u151-linux-x64.tar.gz 配置并且测试jdk安装 #配置环境变量 vim /e…

文件夹批量重命名:如何利用上级目录给多个文件夹进行高效重命名

在文件管理中&#xff0c;我们经常需要处理大量的文件和文件夹。其中&#xff0c;文件名过长或混乱的问题经常让我们感到困扰。这不仅影响了我们的工作效率&#xff0c;还可能导致一些错误。为了解决这个问题&#xff0c;我们可以用云炫文件管理器将“上级目录”批量重命名文件…

网络安全中的渗透测试主要有几个方面

渗透测试中主要有软件测试和渗透测试。 1、测试对象不同   软件测试&#xff1a;主要测试的是程序、数据、文档。 渗透测试&#xff1a;对象主要为网络设备、主机操作系统、数据库系统和应用系统。 2、测试内容不同   软件测试&#xff1a;主要工作内容是验证和确认&#x…

如何将word格式的文档转换成markdown格式的文档

如何将word格式的文档转换成markdown格式的文档 前言 A. 介绍Markdown和Word格式文档 什么是Markdown&#xff1f; Markdown是一种轻量级标记语言&#xff0c;旨在简化文本格式化和排版的过程。它以纯文本形式编写&#xff0c;通过使用简单的标记语法&#xff0c;使文档更具…

使用Objective-C和ASIHTTPRequest库进行Douban电影分析

概述 Douban是一个提供图书、音乐、电影等文化内容的社交网站&#xff0c;它的电影频道包含了大量的电影信息和用户评价。本文将介绍如何使用Objective-C语言和ASIHTTPRequest库进行Douban电影分析&#xff0c;包括如何获取电影数据、如何解析JSON格式的数据、如何使用代理IP技…

响应式设计疑难问题全解析!一篇读懂,立即上手

在我们当前的技术环境中&#xff0c;响应式设计已经成为前端开发的重要部分。其目标是让网站能够以最优的方式在任何设备上工作——不论是大屏电脑、笔记本、平板还是智能手机。这就要求网页能够自适应不同设备的屏幕大小。下面就让我们深入浅出地探讨响应式设计的精髓&#xf…

AI:50-基于深度学习的柑橘类水果分类

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向: 机器学习、深度学…

Qt 使用QtXlsx操作Excel表

1.环境搭建 QtXlsx是一个用于读写Microsoft Excel文件&#xff08;.xlsx&#xff09;的Qt库。它提供了一组简单易用的API&#xff0c;可以方便地处理电子表格数据。 Github下载&#xff1a;GitHub - dbzhang800/QtXlsxWriter: .xlsx file reader and writer for Qt5 官方文档…

主机ping、ssh连接不通本地虚拟机

一、问题描述 在使用vscode remote ssh时&#xff0c;连接timeout&#xff0c;而且主机无论如何也ping不通虚拟机&#xff0c;但是虚拟机可以ping通主机。通过vagrant也可以连接虚拟机。 二、解决方案 试了网上包括设置remote ssh在内的许多方法都不行。重新查看主机和虚拟机…

15种稳定扩散模型的技术示例

推荐Stable Diffusion自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 什么是稳定扩散模型&#xff1f; 潜在扩散模型 &#xff08;LDM&#xff09; 是一种图像生成技术&#xff0c;其工作原理是在潜在表示空间中迭代“去噪”数据&#xff0c;然后将表示解码为完整…

自己动手实现一个深度学习算法——二、神经网络的实现

文章目录 1. 神经网络概述1&#xff09;表示2&#xff09;激活函数3&#xff09;sigmoid函数4&#xff09;阶跃函数的实现5&#xff09;sigmoid函数的实现6)sigmoid函数和阶跃函数的比较7&#xff09;非线性函数8&#xff09;ReLU函数 2.三层神经网络的实现1&#xff09;结构2&…

设置防火墙

1.RHEL7中的防火墙类型 防火墙只能同时使用一张,firewall底层调用的还是lptables的服务: firewalld:默认 &#xff0c;基于不同的区域做规则 iptables: RHEL6使用&#xff0c;基于链表 Ip6tables Ebtables 2.防火墙的配置方式 查看防火墙状态: rootlinuxidc -]#systemct…

建议没用过这个的社区人都来试试!

不是吧&#xff0c;还有社区工作者不知道这个好东西嘛&#xff1f; 就是这个——写作火火&#xff0c;是写报告、方案一把好手啊 直接输入想写的内容&#xff0c;几秒钟报名啊方案啊就来了&#xff0c;不满意可以重新写&#xff0c;直到你满意为止&#xff0c;真的很方便。 …

[一] C++入门

摘要&#xff1a;OOP(面向对象)&#xff0c;namespace&#xff0c;cout and cin&#xff0c;缺省参数&#xff0c;函数重载&#xff0c;引用&#xff0c;内联函数&#xff0c;auto&#xff0c;范围 for&#xff0c;nullptr 20世纪80年代&#xff0c;计算机界提出了OOP(object o…

Hadoop RPC简介

数新网络-让每个人享受数据的价值https://www.datacyber.com/ 前 言 RPC&#xff08;Remote Procedure Call&#xff09;远程过程调用协议&#xff0c;一种通过网络从远程计算机上请求服务&#xff0c;而不需要了解底层网络技术的协议。RPC它假定某些协议的存在&#xff0c;例…

【计算机网络】计算机网络中的基本概念

文章目录 局域网LAN基于网线直连基于集线器组建基于交换机组建基于交换机和路由器组建 广域网WANIP地址端口号协议为什么要有协议知名协议的默认端口 五元组协议分层TCP/IP五层模型封装和分用 网络互连就是将多台计算机连接在一起&#xff0c;完成数据共享。数据共享本质是网络…

查询平均提速 700%,奇安信基于 Apache Doris 升级日志安全分析系统

本文导读&#xff1a; 数智时代的到来使网络安全成为了不可忽视的重要领域。奇安信作为一家领先的网络安全解决方案领军者&#xff0c;致力于为企业提供先进全面的网络安全保护&#xff0c;其日志分析系统在网络安全中发挥着关键作用&#xff0c;通过对运行日志数据的深入分析…

正则表达式续篇

位置锚定&#xff1a; ^:行首锚定&#xff0c;表示以什么为开头 例如&#xff1a; $:行尾锚定&#xff0c;表示以什么为结尾 例如&#xff1a; ^&#xff1a;匹配的是空行 例如&#xff1a; ^root$&#xff1a;匹配整行&#xff0c;而且整行只能有这一个字符串 实验&#x…