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

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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

修复国产电脑麒麟系统开机出现initramfs 问题

目录预览 一、问题描述二、原因分析三、解决方案四、知识点呀initramfsBusyBox 五、参考链接 一、问题描述 国产麒麟系统出现 initramfs 模式 二、原因分析 一般在拷贝卡顿过程【强制关机】或者电【脑异常断电】的情况下概率性导致系统分区损坏&#xff0c;重启后大概率就会进…

Java实现Hive UDF详细步骤 (Hive 3.x版本,IDEA开发)

这里写目录标题 前言1. 新建项目2.配置maven依赖3.编写代码4.打jar包5.上传服务器6.代码中引用 前言 老版本编写UDF时&#xff0c;需要继承 org.apache.hadoop.hive.ql.exec.UDF类&#xff0c;然后直接实现evaluate()方法即可。 由于公司hive版本比较高&#xff08;3.x&#x…

goquery库来编写爬虫程序

使用goquery库来编写一个爬虫程序&#xff0c;以下是代码&#xff1a; package main ​ import ("fmt""net/http""log""time""github.com/PuerkitoBio/goquery" ) ​ func main() {// 设置服务器dialer : &net.Dialer{…

day01_Java概述丶环境搭建

前置知识 什么是计算机语言&#xff1f; 计算机语言就是人与计算机之间进行信息交流沟通的一种特殊语言。所谓计算机编程语言&#xff0c;就是人们可以使用编程语言对计算机下达命令&#xff0c;让计算机完成人们需要的功能。 Java语言概述 是美国Sun公司&#xff08;Stanf…

LabVIEW对多个同一类型控件进行操作

LabVIEW对多个同一类型控件进行操作 有时候LabVIEW要多多个同一类的控件进行操作&#xff0c;如对tab中某个page中所有String控件设为dissable。就可以用如下的方式。className是获取不同类型的控件。通过类型选择&#xff0c;可以选择所有的String控件&#xff0c;并可对特定…

1. eulerAngles函数

对线性代数库Eigen3中eulerAngles函数的理解_qingtian11112的博客-CSDN博客作用&#xff1a; 将旋转矩阵转换为欧拉角 Vector3f ea mat.eulerAngles(2, 0, 2); // 等价于 mat AngleAxisf(ea[0], Vector3f::UnitZ())* AngleAxisf(ea[1], Vector3f::UnitX())* AngleAxisf(ea[…

高性能渲染——详解Html Canvas的优势与性能

本文由葡萄城技术团队原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 一、什么是Canvas 想必学习前端的同学们对Canvas 都不陌生&#xff0c;它是 HTML5 新增的“画布”元素&#x…

uniapp黑马优购

配置tabbar 使用 npm install escook/request-miniprogram 进行http请求 挂载到 uni.$http 上 uniapp小程序分包 访问的时候 携带分包目录 /subpkg/goods_detail/goods_detail git分支使用 # 创建并使用分支 git checkout -b home git commit # 推送到远程的home分支…

Redis与Mysql的数据一致性(双写一致性)

双写一致性&#xff1a;当修改了数据库的数据也要同时的更新缓存的数据&#xff0c;使缓存和数据库的数据要保持一致。 一般是在写数据的时候添加延迟双删的策略 先删缓存 再修改数据 延迟一段时间后再次删除缓存 这种方式其实不是很靠谱 一致性要求高 共享锁&#xff1a;读…

Python笔记——pyChram连接linux子系统,使用linux下的Python进行编译

Python笔记——pyChram连接linux子系统&#xff0c;使用linux下的Python进行编译 Linux子系统安装与配置安装前准备安装Linux子系统安装Python3.8配置pyCharm 最近要跑的实验里&#xff0c;python有个机器学习的库windows环境下是没有的&#xff0c;在linux环境下有。虚拟机又不…

蓝桥杯每日一题2023.11.2

题目描述 等差素数列 - 蓝桥云课 (lanqiao.cn) 题目分析 对于此题我们需要求出最小的公差并且长度为10&#xff0c; 1.确保序列开始为素数 2.确定枚举的个数 注意&#xff1a;序列中数只是d的变化&#xff0c;可以通过此计算将开始数字后9个数字都计算出来&#xff0c;d是…

spring解决后端显示时区的问题

spring解决后端显示时区的问题 出现的问题&#xff1a; 数据库中的数据&#xff1a; 解决方法 spring:jackson:date-format: yyyy-MM-dd HH:mm:sstime-zone: Asia/Shanghai

C语言KR圣经笔记 2.11条件表达式 2.12优先级和求值顺序

2.11条件表达式 if (a > b) z a; else z b; 上面的语句计算 a 和 b 中的最大值并存入 z。而使用三元操作符 ? : 的条件表达式&#xff0c;为这个结构及类似结构提供了另一种写法。在如下表达式 expr1 ? expr2 : expr3 中&#xff0c;首先对 expr1 求值。如果值非0 …

[论文笔记]RetroMAE

引言 RetroMAE,中文题目为 通过掩码自编码器预训练面向检索的语言模型。 尽管现在已经在许多重要的自然语言处理任务上进行了预训练,但对于密集检索来说,仍然需要探索有效的预训练策略。 本篇工作,作者提出RetroMAE,一个新的基于掩码自编码器(Masked Auto-Encoder,MAE)…

mathtype最新7.4.10.53绿色版本下载

MathType&#xff0c;一款功能强大的数学公式编辑器&#xff0c;一直深受广大用户的喜爱&#xff0c;给很多的理科生和各位学者、教研机构等带来巨大帮助。 软件的主要使用用户为初中、高中以及大学的学生、老师&#xff0c;理工科专业工作者&#xff0c;可用于编辑数学试卷、…

HTML和CSS的基础-前端扫盲

想要写出一个网页&#xff0c;就需要学习前端开发&#xff08;写网页代码&#xff09;和后端开发&#xff08;服务器代码&#xff09;。 对于前端的要求&#xff0c;我们不需要了解很深&#xff0c;仅仅需要做到扫盲的程度就可以了。 写前端&#xff0c;主要用到的有&#xf…

加速软件开发和交付的革命性方法-DevOps

“ 随着信息技术的快速发展&#xff0c;现代软件开发和交付已经经历了巨大的变革。DevOps&#xff08;Development和Operations的结合&#xff09;已经成为这一变革的关键推动力&#xff0c;让开发团队和运维团队之间的界限变得模糊&#xff0c;以加速软件的开发、测试和部署过…

Django开发使用DRF框架之创建纯净版框架步骤

使用Django开发时&#xff0c;遇到前后端分离的项目&#xff0c;需要创建一个纯净版的Django框架&#xff0c;在使用restframework框架时&#xff0c;有些Django自带的功能或者说是APP用不到&#xff0c;那需要怎么设置呢&#xff0c;需要解决哪些问题&#xff0c;请见下面的详…

第三届iEnglish全国ETP大赛决赛即将启动

如今,寓教于乐的学习方式越来越受到家长和孩子的欢迎,“玩中学”成为一种既能培养兴趣又有助于孩子成长的学习趋势。 以“玩转英语,用iEnglish”为活动主题的第三届全国ETP大赛即将于本周五(11月3日)迎来总决赛的抽签仪式。据主办方iEnglish智能英语学习解决方案相关负责人称,…

【设计模式】第10节:结构型模式之“组合模式”

一、简介 组合模式&#xff1a;将一组对象组织成树形结构&#xff0c;将单个对象和组合对象都看做树中的节点&#xff0c;以统一处理逻辑&#xff0c;并且它利用树形结构的特点&#xff0c;递归地处理每个子树&#xff0c;依次简化代码实现。使用组合模式的前提在于&#xff0…