跨平台手机号：微信手机号授权登录、微信授权登录双登录实现账户生态融合，新时代的身份密钥

在这里插入图片描述

小程序厂商的多样性体现在开发工具、服务领域、商业模式等多方面，各厂商凭借独特的技术优势、行业解决方案和市场策略，满足不同企业和用户需求。与此同时，随着移动互联网发展，手机号统一登录成为提升用户体验、简化登录流程的关键趋势。

通过手机号统一登录，开发者可以实现发布在不同厂商平台的小程序，实现账号的统一。

  • 首先，判断用户是否存在，如果存在执行登录相关操作，不存在绑定用户信息并注册。
  • 其次，用户存在执行登录相关操作时，判断手机号是否相同（用户手机号可能换绑），相同则登录，不相同登录并提示重新绑定或者不登录提示其他登录方式。

微信小程序的登录流程机制基于微信提供的官方接口，旨在让小程序能够安全、便捷地获取微信用户的授权信息，进而实现用户在小程序内的快速登录。

微信授权登录

  • 基于微信账号体系：用户直接使用自己的微信账号进行登录，无需额外注册小程序或应用的独立账户。

  • 一键授权：用户点击“微信登录”按钮后，通过微信授权机制，快速将微信账号信息授权给第三方应用或小程序。

  • 安全可靠：微信作为中间信任方，保证用户身份的真实性，降低账户盗用风险。同时，微信不直接提供用户的敏感信息（如密码、手机号等）给第三方，而是提供经过安全处理的用户标识符（如openid、unionid等）。

  • 跨平台与设备同步：用户在任何设备或平台上，只要使用相同的微信账号登录，都能获得一致的登录状态，无需记忆多个账户和密码。

微信手机号登录

  • 一键授权：用户只需在小程序内点击“授权并登录”按钮，即可通过微信授权机制快速获取其绑定的手机号，无需手动输入，极大地简化了登录过程，提升了用户体验。

  • 数据安全：微信在传输过程中对用户的手机号进行加密处理，小程序端接收到的是加密后的数据（包括encryptedData和iv）。只有配合小程序登录时获取的session_key，才能在服务器端解密出真实的手机号，有效保障了用户隐私数据的安全。

  • 账户关联：对于已注册但未绑定微信的小程序用户，手机号登录功能可实现微信账号与其原有账户的快速关联，方便用户使用同一手机号在不同设备或场景下无缝切换登录状态。

一、微信授权登录

1、流程概述

微信小程序登录流程主要包括以下几个步骤：

  • 小程序端发起登录请求

    • 使用 wx.login() API 获取微信临时登录凭证（code）。
    • wx.login() 是小程序内发起登录请求的关键接口，调用后微信客户端会返回一个 code，此 code 只能用于换取微信用户的基本信息，且具有时效性。

  • 将临时登录凭证发送给开发者服务器

    • 将上述 code 通过 HTTPS 请求发送给小程序的后端服务器。
    • 后端服务器需使用这个 code 向微信服务器请求换取更详细的用户信息。

  • 开发者服务器向微信服务器交换用户信息

    • 后端服务器使用 code、AppID 和 AppSecret 调用微信接口 https://api.weixin.qq.com/sns/jscode2session。
    • 微信服务器验证后返回 openid、session_key 以及 unionid（若适用）。

  • 处理返回的用户信息

    • 开发者服务器根据返回的 openid 确定用户唯一身份，session_key 用于后续的数据加密解密操作。
    • 通常，服务器会基于这些信息生成自定义的登录态（如 session 或 JWT token），并将其返回给小程序端。

  • 小程序端存储登录态

    • 小程序接收到服务器返回的自定义登录态后，将其存储在本地（如 Storage 或 StorageSync）。
    • 在后续的网络请求中携带此登录态，以证明用户已登录。

  • 维持登录状态

    • 使用 wx.checkSession() 检查当前用户登录状态是否有效。
    • 若登录态已失效，重新执行登录流程；否则继续使用现有登录态。

2、流程实战

步骤1：小程序端发起登录请求

// 小程序端
wx.login({success(res) {if (res.code) {// 发送 code 到开发者服务器换取用户信息const code = res.code;sendCodeToServer(code);} else {console.log('获取 code 失败：' + res.errMsg);}},fail(err) {console.error('登录失败：', err);}
});

步骤2：将临时登录凭证发送给开发者服务器

// 小程序端
function sendCodeToServer(code) {const requestUrl = 'https://your-backend-server.com/login';wx.request({url: requestUrl,method: 'POST',data: { code },success(res) {handleLoginResponse(res.data);},fail(err) {console.error('请求后端服务器失败：', err);}});
}

步骤3：开发者服务器向微信服务器交换用户信息

开发者服务器端（如使用 Node.js）：

const request = require('request');function exchangeCodeForUserInfo(code, appId, appSecret) {const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`;return new Promise((resolve, reject) => {request(url, (error, response, body) => {if (!error && response.statusCode === 200) {const userInfo = JSON.parse(body);resolve(userInfo);} else {reject(error || new Error('Failed to exchange code for user info'));}});});
}

步骤4：处理返回的用户信息

开发者服务器端（继续使用 Node.js 示例）：

exchangeCodeForUserInfo(code, appId, appSecret).then(userInfo => {const { openid, session_key } = userInfo;// 基于 openid 生成或查找用户记录// 生成自定义登录态（如 session 或 JWT token）// 返回自定义登录态给小程序端const response = {statusCode: 200,body: { token: generatedToken },};return response;}).catch(handleError);function handleError(error) {// 处理错误，返回合适的错误响应
}

步骤5：小程序端存储登录态

// 小程序端
function handleLoginResponse(loginResponse) {const token = loginResponse.token;wx.setStorageSync('userToken', token); // 保存登录态到本地 Storage
}// 后续网络请求中携带登录态
function makeAuthenticatedRequest(url, data) {const token = wx.getStorageSync('userToken');wx.request({url,data: { ...data, token },// ...});
}

步骤6：维持登录状态

// 小程序端
function checkAndRefreshSession() {wx.checkSession({success() {// 登录态有效，无需重新登录console.log('Session is valid, no need to re-login.');},fail() {// 登录态已过期，需要重新执行登录流程console.log('Session has expired, re-initiating login process.');initiateLogin();},});
}// 在适当的地方（如 App 启动、页面加载等）调用 checkAndRefreshSession()
checkAndRefreshSession();

总结起来，微信小程序登录流程机制的核心在于通过官方接口获取并交换临时登录凭证，进而获得用户唯一标识（如 openid）并在小程序端和服务器端之间建立有效的登录状态。小程序端负责发起登录请求、存储和携带登录态，而开发者服务器则负责与微信服务器交互，验证凭证并生成自定义登录态。整个过程确保了用户数据的安全传输与隐私保护，同时简化了用户的登录操作。

二、微信小程序手机号登录

微信小程序实现手机号登录的流程机制，实际上是将手机号作为用户身份标识，结合微信提供的“获取用户手机号”功能来实现快速登录或账户关联。以下是对这一流程的详解与举例：

1、流程概述

微信小程序手机号登录流程主要包括以下几个步骤：

  • 启用获取手机号功能

    • 在小程序管理后台开启“获取用户手机号”权限。

  • 小程序端请求用户授权

    • 使用带有 open-type="getPhoneNumber" 的 <button> 组件，引导用户授权获取手机号。

  • 用户授权并获取加密手机号

    • 用户同意授权后，小程序端通过回调函数接收加密的手机号数据（encryptedData、iv）以及 session_key。

  • 将加密数据发送至开发者服务器

    • 小程序端将加密数据及 session_key 通过 HTTPS 请求发送给后端服务器。

  • 开发者服务器解密手机号

    • 后端服务器使用 session_key 和 iv 对 encryptedData 进行解密，得到明文手机号。

  • 手机号与用户账户关联或注册新用户

    • 首先，判断用户是否存在，如果存在执行登录相关操作，不存在绑定用户信息并注册。
    • 其次，用户存在执行登录相关操作时，判断手机号是否相同（用户手机号可能换绑），相同则登录，不相同登录并提示重新绑定或者不登录提示其他登录方式。

二、流程实战

步骤1：启用获取手机号功能

在小程序管理后台，进入“开发”->“开发设置”，找到“用户信息”部分，勾选“获取用户手机号”权限，并按照要求填写相关信息。

步骤2：小程序端请求用户授权

<!-- 小程序端wxml文件 -->
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">授权并登录</button>

// 小程序端js文件
Page({onGetPhoneNumber(e) {const { detail: { encryptedData, iv, errMsg } } = e;if (errMsg === 'getPhoneNumber:ok') {// 用户同意授权，发送加密数据至服务器sendEncryptedDataToServer(encryptedData, iv);} else {console.log('获取手机号失败：', errMsg);}},
});

步骤3：用户授权并获取加密手机号

用户在小程序内点击授权按钮后，微信客户端会弹出授权界面，用户同意后，小程序端通过 onGetPhoneNumber 回调函数接收到加密的手机号数据。

步骤4：将加密数据发送至开发者服务器

// 小程序端
function sendEncryptedDataToServer(encryptedData, iv) {const requestUrl = 'https://your-backend-server.com/loginWithPhone';wx.request({url: requestUrl,method: 'POST',data: { encryptedData, iv },success(res) {handleLoginResponse(res.data);},fail(err) {console.error('请求后端服务器失败：', err);}});
}

步骤5：开发者服务器解密手机号

开发者服务器端（如使用 Node.js）：

const crypto = require('crypto');
const { decode, encrypt, decrypt } = require('wx-crypto'); // 或使用其他微信数据解密库function decryptPhoneNumber(encryptedData, iv, sessionKey) {const decodedData = decode(encryptedData);const decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv);let decrypted = decipher.update(decodedData, 'base64', 'utf8');decrypted += decipher.final('utf8');try {const result = JSON.parse(decrypted);return result.phoneNumber;} catch (err) {throw new Error('Failed to parse decrypted phone number data');}
}// 假设已从前端请求中获取到 encryptedData 和 iv
const phoneNumber = decryptPhoneNumber(encryptedData, iv, sessionKeyFromLoginStep);

步骤6：手机号与用户账户关联或注册新用户

第一步：通过微信登录接口获取用户身份标识

微信小程序提供了wx.login()接口，允许小程序获取微信用户的临时登录凭证（code）。小程序端调用此接口后，会收到一个code，然后将此code发送到开发者服务器。服务器端使用该code、小程序的AppID和AppSecret向微信服务器发起请求，换取用户的唯一标识（openid）和其他基础信息（如unionid，如果有绑定公众号的话）。这些标识可以用来唯一识别用户，不论他们是否更换设备或清除小程序数据，只要他们仍使用同一个微信账号登录，openid和unionid都会保持不变。

小程序端代码示例：

wx.login({success: res => {if (res.code) {// 发送 code 到开发者服务器sendCodeToServer(res.code);} else {console.log('微信登录失败：' + res.errMsg);}},fail: err => {console.log('微信登录失败：' + err.errMsg);}
});

服务器端使用code换取用户信息（示例使用Node.js）：

const axios = require('axios');
const { appId, appSecret } = require('./config');function exchangeCodeForUserInfo(code) {return axios.get(`https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`).then(response => response.data).catch(error => {console.error('兑换 code 失败：', error);throw error;});
}

第二步：通过用户身份标识处理执行登录相关操作

开发者服务器端：

async function handleLoginWithPhone(encryptedData, iv, sessionKey) {const phoneNumber = decryptPhoneNumber(encryptedData, iv, sessionKey);const { openid, unionid, session_key } = await exchangeCodeForUserInfo(code);// 通过用户标识，进行数据库查询const userExists = await checkUserExistence(openid, unionid);if (userExists) { //判断用户是否存在// 根据手机号查找用户const userPhoneNumber = await userService.findByPhoneNumber(phoneNumber);if (userPhoneNumber) { //判断用户手机号是否存在// 手机号已存在，登录成功const token = generateUserToken(user.id);return { status: 'success', token };} else {// 手机号不存在，登录成功并提示手机号有变动return { status: 'success', token , phoneChange: true};}} else {// 用户不存在，用户注册// 处理注册逻辑... return { status: 'register' };}
}

小程序端根据服务器返回的状态进行相应处理

function handleLoginResponse(response) {if (response.status === 'success') {const token = response.token;wx.setStorageSync('userToken', token); // 存储登录态navigateToHome(); // 跳转至首页或其他逻辑} else if (response.status === 'register_or_bind_required') {showRegisterOrBindPrompt(); // 引导用户注册或绑定已有账户} else {console.error('Unknown login response:', response);}
}

注意事项：

  1. session_key 的一致性：解密手机号需要用到的 session_key 必须与之前登录流程中获取的 session_key 相同。这意味着在请求获取手机号之前，用户应当已经完成常规的微信登录流程，确保服务器端持有正确的 session_key。

  2. 用户隐私保护：务必遵循相关法律法规，对收集到的用户手机号进行严格保密，仅用于必要的业务场景，并在用户明确同意的情况下使用。同时，确保数据传输过程的安全性，如使用 HTTPS 协议。

综上所述，微信小程序实现手机号登录的流程机制是利用微信提供的接口获取用户授权的手机号，通过服务器端解密后与现有账户进行关联或引导用户进行注册，从而实现基于手机号的快速登录。这一机制简化了用户登录过程，但同样要求开发者充分关注数据安全与用户隐私保护。

微信授权登录利用微信账号体系为用户提供快速、安全的登录方式，适用于依赖微信生态的应用或小程序。而手机号登录则通过微信授权获取用户绑定的手机号，实现基于手机号的登录或账户关联，尤其适用于希望整合微信账号与自身账户体系的场景。两种登录方式都强调用户隐私保护和数据安全，开发者在实现过程中需遵循微信平台规定，确保合规操作。

跨平台手机号授权

随着移动互联网发展，手机号统一登录成为提升用户体验、简化登录流程的关键趋势。小程序厂商纷纷响应，通过集成微信或其他第三方平台的手机号授权功能，实现用户一键授权，快速获取并验证手机号，无缝衔接自有账户体系。此举不仅增强了登录便捷性，还确保了数据传输安全，有助于构建跨平台账户统一管理，提升用户粘性与数据整合能力。

可以按照以上微信手机号授权登录、微信授权登录的机制实现其他小程序厂商平台的登录注册，实现跨平台手机号机制。

在尊重用户隐私的前提下，小程序厂商遵循相关法规及平台政策，明确告知授权目的，妥善处理手机号信息，共同营造安全、便捷、个性化的登录环境，推动小程序生态繁荣发展。

在这里插入图片描述

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

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

相关文章

要养生也要时尚，益百分满足你的所有需求

要养生也要时尚，益百分满足你的所有需求

要养生也要时尚&#xff0c;益百分满足你的所有需求 艾灸是个好东西&#xff0c;尤其是在近几年的时候&#xff0c;艾灸就像一阵浪潮席卷进了人们的日常生活之中&#xff0c;我们可以在街边看到大大小小的艾灸馆&#xff0c;有些评价比较高的艾灸馆门前甚至还排起了长长的队伍…
阅读更多...
FasterViT：英伟达提出分层注意力，构造高吞吐CNN-ViT混合网络 | ICLR 2024

FasterViT：英伟达提出分层注意力，构造高吞吐CNN-ViT混合网络 | ICLR 2024

论文设计了新的CNN-ViT混合神经网络FasterViT&#xff0c;重点关注计算机视觉应用的图像吞吐能力。FasterViT结合CNN的局部特征学习的特性和ViT的全局建模特性&#xff0c;引入分层注意力&#xff08;HAT&#xff09;方法在降低计算成本的同时增加窗口间的交互。在包括分类、对…
阅读更多...
【InternLM 实战营第二期笔记】Lagent AgentLego 智能体应用搭建

【InternLM 实战营第二期笔记】Lagent AgentLego 智能体应用搭建

理论知识 Lagent 是什么 Lagent 是一个轻量级开源智能体框架&#xff0c;旨在让用户可以高效地构建基于大语言模型的智能体。同时它也提供了一些典型工具以增强大语言模型的能力。 Lagent 目前已经支持了包括 AutoGPT、ReAct 等在内的多个经典智能体范式&#xff0c;也支持了…
阅读更多...
C语言指针+-整数、指针-指针、指针关系运算、指针和数组、二级指针、指针数组

C语言指针+-整数、指针-指针、指针关系运算、指针和数组、二级指针、指针数组

文章目录 前言一、指针 - 整数二、指针 - 指针三、指针的关系运算四、指针和数组五、二级指针六、指针数组指针数组可以将几个一维数组模拟成二维数组 总结 前言 C语言指针整数、指针-指针、指针关系运算、指针和数组、二级指针、指针数组等介绍&#xff0c;还包括指针数组将几…
阅读更多...
武汉大学博士，华为上班5年多，月薪多少。。。

武汉大学博士，华为上班5年多，月薪多少。。。

最近&#xff0c;一位来自武汉大学的博士研究生透露了自己在华为公司工作五年后的薪酬情况。 据他透露&#xff0c;他在2018年加入华为时的月薪为2.4万&#xff0c;随着时间的推移&#xff0c;到了2023年&#xff0c;他的月薪已经增长至4.4万&#xff01;此外&#xff0c;他还透…
阅读更多...
AI时代的GPU集群网络算力分析

AI时代的GPU集群网络算力分析

浅谈GPU集群网络、集群规模和集群算力 引言在生成式AI&#xff08;GenAI&#xff09;和大模型时代&#xff0c;不仅需要关注单个GPU卡的算力&#xff0c;更要关注GPU集群的总有效算力。单个GPU卡的有效算力可以通过该卡的峰值算力来测算&#xff0c;例如&#xff0c;对于Nvidia…
阅读更多...
网络工程师----第十一天

网络工程师----第十一天

OSPF&#xff1a; 对称加密算法&#xff1a; 也称为私钥加密或单密钥算法&#xff0c;是一种加密方式&#xff0c;其中加密和解密使用相同的密钥。这种算法的优点包括加密解密速度快、计算量小&#xff0c;适用于大量数据的加密。然而&#xff0c;它的缺点是密钥的安全性难以保…
阅读更多...
深度相机（3D相机）

深度相机（3D相机）

传统的RGB彩色相机称为2D相机&#xff0c; 只能得到2D的图像信息&#xff0c; 无法得到物体与相机的距离信息&#xff0c;也就是深度信息。 顾名思义&#xff0c; 深度相机除了获取2D信息&#xff0c;还能得到深度信息&#xff0c;也叫RGBD相机&#xff0c; 或3D相机。 顺便提…
阅读更多...
被删除的照片和视频能找回吗？如何恢复手机删除的照片和视频？

被删除的照片和视频能找回吗？如何恢复手机删除的照片和视频？

手机里的照片和视频是我们记录生活的每一个瞬间&#xff0c;也是工作学习等场合经常用到的东西&#xff0c;一旦不慎丢失&#xff0c;将对我们造成很大损失。那么我们该如何恢复手机删除的照片和视频呢&#xff1f;通过掌握正确的恢复方法&#xff0c;能够最大程度地保护手机中…
阅读更多...
网络常识!!!

网络常识!!!

网络常识!!! 一:网络的发展史二:关键的概念三:IP地址四:端口号二级目录二级目录二级目录二级目录三级目录 一:网络的发展史 从游戏方面发展历程进行理解: 从单机游戏-----游戏支持局域网对战-------游戏支持广域网对战-------移动端 (1)局域网对战:在同一个网吧里,不同的游戏…
阅读更多...
2016年新华三杯复赛实验试题

2016年新华三杯复赛实验试题

2016年新华三杯复赛实验试题 拓扑图 配置需求 考生根据以下配置需求在 HCL 中的设备上进行相关配置。 以太网接口配置 将 S1、S2 的以太网接口 G1/0/1 至 G1/0/16 的模式用命令 combo enable copper 激活为电口。 虚拟局域网 为了减少广播&#xff0c;需要规划并配置 VLA…
阅读更多...
Seurat -- Introduction to scRNA-seq integration 跟随学习记录

Seurat -- Introduction to scRNA-seq integration 跟随学习记录

文章目录 数据是如何转换的原始ifnb数据对象Splits object后的数据对象数据对象构建完成后的标准流程Normalization后的数据对象scale 后的数据对象 不同的样本进行整合JoinLayers干了什么 数据是如何转换的 seurat object 中assays R N A l a y e r s RNAlayers RNAlayersco…
阅读更多...
新的全息技术突破计算障碍

新的全息技术突破计算障碍

一种突破性的方法利用基于Lohmann透镜的衍射模型实时创建计算机生成全息图&#xff08;CGH&#xff09;&#xff0c;在保持3D可视化质量的同时&#xff0c;大大降低了计算负荷要求。 全息显示为制作逼真的三维图像提供了一条令人兴奋的途径&#xff0c;这种图像给人以连续深度…
阅读更多...
在 Slurm 上运行 Jupyter

在 Slurm 上运行 Jupyter

1. 背景介绍 现在的大模型训练越来越深入每个组了&#xff0c;大规模集群系统也应用的愈发广泛。一般的slurm系统提交作业分为2种&#xff0c;一种是srun&#xff0c;这种所见即所得的申请方式一般适用于短期的调试使用&#xff0c;大概一般允许的时间从几个小时到1天左右&…
阅读更多...
flutter 设置启屏页 flutter_native_splash 坑记录

flutter 设置启屏页 flutter_native_splash 坑记录

flutter_native_splash | Flutter packageCustomize Flutters default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.https://pub.dev/packages/flutter_native_splash 发现一直白屏 原因是 代码中 下面…
阅读更多...
图书租赁系统

图书租赁系统

网上出版的电子书只有购买服务&#xff0c;如果也有租赁服务就好了。例如&#xff0c;读者可以租个1个小时&#xff0c;1个小时到期&#xff0c;读者就不能阅读该书。 图中借阅结束时间是2024-04-23 13:36:29&#xff0c;到期后该书就会从列表中消失。 BookOrderMapper.xml &…
阅读更多...
vue3+elementui-plus实现无限递归菜单

vue3+elementui-plus实现无限递归菜单

效果图 实现方式是&#xff1a;通过给定的数据结构层数来动态生成多级菜单 menu.vue<template><el-menu:default-active"activeIndex"class"el-menu-demo"mode"horizontal"select"handleSelect"background-color"#f8f…
阅读更多...
直流负载在新能源领域的作用有哪些

直流负载在新能源领域的作用有哪些

直流负载在新能源领域的作用主要体现在以下几个方面&#xff1a; 新能源如太阳能、风能等&#xff0c;其发电过程中产生的电能为直流电。传统的电力系统主要采用交流电&#xff0c;因此在新能源并网时需要进行逆变器转换。然而&#xff0c;逆变器在转换过程中会存在一定的能量损…
阅读更多...
【话题】为什么选择成为了一名程序员？

【话题】为什么选择成为了一名程序员？

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 背景沉迷游戏回归学习机缘巧合兴趣驱动的选择职业发展的考虑兴趣与职业发展的结合结论文章推荐 背景 选择程序员之路&#xff1a;兴趣驱动还是职业发展&#xff1f; 在…
阅读更多...
IntelliJ IDEA2020下使用Maven构建Scala 项目

IntelliJ IDEA2020下使用Maven构建Scala 项目

1.创建maven文件 2.进入pom.xml导入依赖 <!--添加spark的依赖--><dependency><groupId>org.apache.spark</groupId><artifactId>spark-core_2.12</artifactId><version>3.2.1</version></dependency><!--添加scala依…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023