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

在这里插入图片描述

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

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

微信授权登录

基于微信账号体系：用户直接使用自己的微信账号进行登录，无需额外注册小程序或应用的独立账户。
一键授权：用户点击“微信登录”按钮后，通过微信授权机制，快速将微信账号信息授权给第三方应用或小程序。
安全可靠：微信作为中间信任方，保证用户身份的真实性，降低账户盗用风险。同时，微信不直接提供用户的敏感信息（如密码、手机号等）给第三方，而是提供经过安全处理的用户标识符（如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);
  }
}

注意事项：

session_key 的一致性：解密手机号需要用到的 session_key 必须与之前登录流程中获取的 session_key 相同。这意味着在请求获取手机号之前，用户应当已经完成常规的微信登录流程，确保服务器端持有正确的 session_key。
用户隐私保护：务必遵循相关法律法规，对收集到的用户手机号进行严格保密，仅用于必要的业务场景，并在用户明确同意的情况下使用。同时，确保数据传输过程的安全性，如使用 HTTPS 协议。

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

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

跨平台手机号授权

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

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

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

在这里插入图片描述