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

news2025/1/16 14:12:37

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.coloradmin.cn/o/1154389.html

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

相关文章

Intel 系列时序说明

1xx2xx系列时序说明 1.VCCRTC=2.5V+ 3.3V BOARD TO PCH 保存CMOS信息,保持时钟正常运行 电池供电或3V线性给到 2.RTCRST#/SRTCRST# BOARD TO PCH 延时复位 正常3.3V,低到高完成复位,VCCRTC通过电阻延时 3.32.768KHZ=RTCX1 BOARD TO PCH 0.1V-0.6V直通桥 4.VC…

关键词搜索天猫商品数据接口(标题|主图|SKU|价格|优惠价|掌柜昵称|店铺链接|店铺所在地|天猫商品列表API接口)

关键词搜索天猫商品数据接口可以使用天猫官方的API接口实现。以下是一些可能有用的天猫API接口&#xff1a; item_search_tmall - 按关键字搜索天猫商品接口&#xff1a;这个接口可以用于通过关键词搜索天猫商品&#xff0c;获取商品列表。可以在接口中使用不同的关键字进行搜…

关于有效客户关系管理,你需要了解的一切

为了了解客户购买决策的驱动因素或阻碍因素&#xff0c;你需要组织和分析有关客户需求、喜好和厌恶的数据。这正是客户关系管理其中一个重要方面。有效的客户关系管理可以帮助企业与其现有客户和潜在客户建立联系&#xff0c;以提高客户满意度并确保销售周期有利可图。 什么是客…

【HTML】实现填写简历信息

实现页面&#xff1a; 完整源代码&#xff1a; <!DOCTYPE html> <html lang"cn"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Doc…

Jt808应答举例

1.前言 最近客户在集成基于Jt808的产品协议的时候&#xff0c;经常会遇到一些问题&#xff0c;比如没有进行转义&#xff0c;或者转义的时机不对&#xff0c;导致校验码没有进行转义。为了让大家更熟悉Jt808的指令组包&#xff0c;我这里整理了一下转义的步骤。 2.组包 以此…

android 8.1 disable unsupported sensor

如果device不支持某种sensor,可以在android/frameworks/base/core/java/android/hardware/SystemSensorManager.java里将其disabled掉。以disable proximity sensor为例。 public SystemSensorManager(Context context, Looper mainLooper) {synchronized(sLock) {if (!sNativ…

mysql---DCL(用户创建及限制)

DCL: 权限控制语句 grant revoke 数据库用户管理: 创建用户 修改用户的权限 删除用户 grant 要在终端执行。 用户创建语句注释 create user ky32localhost identified by 123456; create user 创建用户的开头 ky32localhost ky32 表示用户的主机名 localhost 新建的…

一文吃透低代码开发与传统IT开发的区别

目录 一、含义不同 二、开发门槛不同 三、两者之间的区别 1、从技术特征来看 2、从目标开发者来看 四、低代码平台使用感受&#xff1f; &#xff08;1&#xff09;自定义模块&#xff0c;满足不同的业务需求 &#xff08;2&#xff09;工作流引擎&#xff0c;简化复杂流程的管…

js判断数据类型的方式详解(面试题)

一.typeof 1.用来判断基本数据类型 null、Object、String判断的结果都为object 二.instanceof 检测构造函数的 prototype 属性是否在某个实例对象的原型链上 不能判断简单数据类型&#xff0c;只能判断复杂数据类型。 复杂数据类型的具体类型不一定判断正确。 手写instanceof…

[软件下载]解决copperliasim(原v-rep)的教育版无法下载的问题

前言 v-rep&#xff08;现在叫做copperliasim,但是v-rep字数比较少&#xff0c;并且叫的人也比较多&#xff0c;故下文皆称vrep&#xff09;是一款优秀的机器人仿真软件&#xff0c;在国内似乎用的人不多&#xff0c;但是国外据说还是比较流行的。 目前或许有不少的朋友在下载…

数的种类 -bitset的应用

很容易想到下面的DP dp&#xff08;i&#xff0c;j&#xff09; 考虑前i个数字看是否能构成j for(int i1;i<n;i)for(int j5e5;j>a[i];j)dp[j]|dp[j-a[i]]; 发现会超时 引入bitset优化 可以让原来的复杂度除以64 是一个经典的冲暴力的手段 #include<bits/stdc.h>…

matlibplot绘图设置标签角度

如下图所示&#xff0c;当我们绘图的时候有时候会遇到标注太长显示不全&#xff0c;这时候需要修改标注的角度来实现&#xff1a; **plt.xticks(rotation70)**设置x轴旋转70度 import matplotlib.pyplot as plt import numpy as np CHN[13.6081.06**i for i in range(1,31)] U…

百度AICA首席AI架构师培养计划第七期毕业,大模型深入产业见成果

10月28日&#xff0c;由深度学习技术及应用国家工程研究中心与百度联合创办的 AICA 首席AI架构师培养计划&#xff0c;迎来第7期毕业典礼&#xff0c;88位学员获得AI架构师认证。截至目前&#xff0c;AICA已累计为业界培养了410位产业AI领军人才。同时&#xff0c;AICA第7期毕业…

光环云出席国际数据经济产业合作大会,成为国际数据经济产业园首批生态合作企业

光环云作为临港新片区国际数据港全球云算服务生态合作伙伴受邀出席会议&#xff0c;与跨境数科等单位共同参与共建国际数据港启动仪式&#xff0c;光环云执行董事兼CEO吴曼以《AGI-x时代跨境数据流动》为主题作主旨演讲。 10月27日&#xff0c;国际数据经济产业合作大会在临港新…

史上最短苹果发布会;三星、LG、高通联手进军 XR 市场丨 RTE 开发者日报 Vol.74

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

CVE-2023-1698:WAGO系统远程代码执行漏洞复现

文章目录 WAGO系统远程代码执行漏洞(CVE-2023-1698)复现0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 WAGO系统远程代码执行漏洞(CVE-2023-1698)复现 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术…

六、W5100S/W5500+RP2040树莓派Pico<UDP Server数据回环测试>

文章目录 1. 前言2. 协议简介2.1 简述2.2 优点2.3 UDP Server的步骤2.4 应用 3. WIZnet以太网芯片4. UDP Sever回环测试4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 测试现象 5. 注意事项6. 相关链接 1. 前言 UDP是一种无连接的网络协议&#xff0c;它提供了一种简…

MS-NAS

方法 作者未提供代码

EtherCAT的4种寻址方式解析

我们知道&#xff0c;一个EtherCAT数据帧&#xff08;frame&#xff09;里面包含很多个报文&#xff08;datagram&#xff09;&#xff0c;不管是什么样式的报文&#xff0c;它们的目的只有一个&#xff0c;就是读写从站寄存器或内存。所以寻址就是以什么方式访问哪个从站的哪个…

剑指offer(C++)-JZ5:替换空格(算法-其他)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 题目描述&#xff1a; 请实现一个函数&#xff0c;将一个字符串s中的每个空格替换成“%20”。 例如&#xff0c;当字符串为We A…