微信小程序常见的两种登录方式详解

更新时间：2024年05月04日 10:20:33 作者：零一行者

这篇文章主要介绍了微信小程序常见的两种登录方式,一种基于手机号码进行登录,另一种是使用用户在公众号下的唯一标识进行登录,需要的朋友可以参考下

小程序登录

小程序有两种登录方式，一种基于手机号码进行登录，另一种是使用用户在公众号下的唯一标识（openid）进行登录(小程序是公众号的一种).

接下来先讲解下，基于 openid 登录。

基于openid登录

先看下图，描述通过微信小程序提供的 code 换取当前用户在小程序中的唯一标识，详细流程可以参数下图：

接下来通过代码实现下大概流程:

获取 code

uni.login({
  success: async (res) => {
    if (res.errMsg === 'login:ok') {
      const { data } = await login({
        code: res.code,
      });
      // 保存用户信息
    }
  },
  fail(e) {
    uni.showToast({
      title: e.message,
    });
  },
});

服务端接收 code 去微信后台换取对应 openid

// nodejs 部分代码
const { appid, secret, grant_type } = require('../config/wx');
router.post('/login', (req, res) => {
  const { code } = req.query;
  const { appid, secret, grant_type } = require('../config/wx');
  const { openid } = await request.get('/sns/jscode2session', {
    appid,
    secret,
    js_code: code,
    grant_type,
  });
});

在数据库中查找对应 openid 是否存在

const { appid, secret, grant_type } = require('../config/wx');
router.post('/login', (req, res) => {
  // 1. 获取 code
  const { code } = req.query;
  // 2. 通过 code 获取 openid 和 session_key
  const { openid } = await request.get('/sns/jscode2session', {
    appid,
    secret,
    js_code: code,
    grant_type,
  });
  // 3. 查找用户是否已经注册
  models.user
    .findOne({
      where: {
        openid,
      },
    })
    .then((user) => {
      if (user) {
        // 3.2 如果用户已经注册，返回用户信息
        res.json(
          new Result({
            data: user,
            msg: '登录成功',
          })
        );
      } else {
        // 3.3 如果用户没有注册，创建用户并返回用户信息
        const username = randomUserName();
        models.user
          .create({
            nickname: username,
            openid,
            avatar: '/uploads/default-avatar.png',
          })
          .then((user) => {
            res.json(
              new Result({
                data: user,
                msg: '登录成功',
              })
            );
          });
      }
    });
});

上面就是一个基于 code 获取 openid，并通过 openid 创建新的用户，并将创建好的用户返回。

为了方便理解，这里简化描述了登录逻辑。在实际业务代码中，通常会使用 openid 、 session key 和用户信息来创建自定义登录凭证（token），并在登录时将用户信息和 token 一起返回给前端。前端会将 token 存储在本地，并在下一次需要登录的业务请求中携带 token，从而实现业务鉴权的功能。这种方式通常使用 JWT（JSON Web Token）等工具来实现。在后续的讲解中，我们将详细介绍这些概念和技术细节。

手机号码快捷登录

获取手机号码的前提：

非个人小程序
认证的小程序
非海外的企业认证

下面是大概业务流程图：

获取对应code

<template>
  <button
    class="login-btn"
    open-type="getPhoneNumber"
    @getphonenumber="getPhoneNumber"
  >
    手机号码登录
  </button>
</template>
<script>
export default {
  setup() {
    // 目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）
    const getPhoneNumber = (e) => {
      const { code, errMsg } = e.detail;
      if (errMsg === 'getPhoneNumber:ok') {
        const { data } = await loginByPhone({
          code,
        });
      } else {
        uni.showToast({
          title: errMsg,
        });
      }
    };
    return {
      getPhoneNumber,
    };
  },
};
</script>

后端处理逻辑

// 基于手机号登录
router.post('/loginByPhone', async function (req, res) {
  try {
    // 1. 获取 code 和 loginCode
    const { code } = req.body;
    // 2. 获取接口调用凭据，理论上这里需要缓存 access_token，避免频繁调用接口
    const { access_token } = await request.get('/cgi-bin/token', {
      grant_type: 'client_credential',
      appid,
      secret,
    });
    // 3. 获取手机号
    const { phone_info } = await request.post(
      `/wxa/business/getuserphonenumber?access_token=${access_token}`,
      {
        code,
      }
    );
    // 4. 查找用户是否已经注册
    // 4.1 根据 phone 查找用户
    const { purePhoneNumber } = phone_info;
    models.user
      .findOne({
        where: {
          purePhoneNumber,
        },
      })
      .then((user) => {
        if (user) {
          // 4.2 如果用户已经注册，返回用户信息
          res.json(
            new Result({
              data: user,
              msg: '登录成功',
            })
          );
        } else {
          // 4.3 如果用户没有注册，创建用户并返回用户信息
          const username = randomUserName();
          models.user
            .create({
              nickname: username,
              avatar: '/uploads/default-avatar.png',
              phone: phone_info.purePhoneNumber,
            })
            .then((user) => {
              res.json(
                new Result({
                  data: user,
                  msg: '登录成功',
                })
              );
            });
        }
      });
  } catch (error) {
    res.json(
      new Result({
        code: 'BIZ_ERROR',
        msg: error.errmsg || error.message,
      })
    );
  }
});

上面代码，实现获取手机号码并使用手机号码作为唯一标识，进行用户创建和查找的操作。

从登录的角度来看，使用手机号码作为唯一标识符是没有问题的。然而，如果用户尝试使用非手机号码（例如 OpenID）进行登录，并在数据库中找不到匹配的记录时，系统会创建一个新的账号。这可能导致同一个用户在系统中存在多个账号的情况。

为了优化这种情况，可以考虑以下几种方法：

当用户使用 openid 登录后，检测未绑定手机号码时，进行号码绑定
当用户使用手机号码登录时，提前调用 wx.login 获取对应 code，换取 openid 把他与手机号码进行关联

现在基于上面的代码，采用第二种方案，只需要微调下代码就能解决这个问题。

登录时把 wx.login 获取 code 传递给后端

<template>
  <button
    class="login-btn"
    open-type="getPhoneNumber"
    @getphonenumber="getPhoneNumber"
  >
    手机号码登录
  </button>
</template>
<script>
export default {
  setup() {
    // 目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）
    const getPhoneNumber = (e) => {
      const { code, errMsg } = e.detail;
      if (errMsg === 'getPhoneNumber:ok') {
        uni.login({
          success: async (res) => {
            if (res.errMsg === 'login:ok') {
              const { data } = await loginByPhone({
                code,
                loginCode: res.code,
              });
              userStore.setUserInfo(data);
              uni.navigateBack();
            }
          },
          fail(e) {
            uni.showToast({
              title: e.message,
            });
          },
        });
      } else {
        uni.showToast({
          title: errMsg,
        });
      }
    };
    return {
      getPhoneNumber,
    };
  },
};
</script>

服务端基于 loginCode 换取 openid

// 基于手机号登录
router.post('/loginByPhone', async function (req, res) {
  try {
    // 1. 获取 code 和 loginCode
    const { code, loginCode } = req.body;
    // 2. 获取接口调用凭据，理论上这里需要缓存 access_token，避免频繁调用接口
    const { access_token } = await request.get('/cgi-bin/token', {
      grant_type: 'client_credential',
      appid,
      secret,
    });
    // 3. 获取 openid
    const { openid } = await request.get('/sns/jscode2session', {
      appid,
      secret,
      js_code: loginCode,
      grant_type,
    });
    // 4. 获取手机号
    const { phone_info } = await request.post(
      `/wxa/business/getuserphonenumber?access_token=${access_token}`,
      {
        code,
        openid,
      }
    );
    // 5. 查找用户是否已经注册
    // 5.1 根据 openid 查找用户
    models.user
      .findOne({
        where: {
          openid,
        },
      })
      .then((user) => {
        if (user) {
          // 5.2 如果用户已经注册，返回用户信息
          res.json(
            new Result({
              data: user,
              msg: '登录成功',
            })
          );
        } else {
          // 5.3 如果用户没有注册，创建用户并返回用户信息
          const username = randomUserName();
          models.user
            .create({
              nickname: username,
              openid,
              avatar: '/uploads/default-avatar.png',
              phone: phone_info.purePhoneNumber,
            })
            .then((user) => {
              res.json(
                new Result({
                  data: user,
                  msg: '登录成功',
                })
              );
            });
        }
      });
  } catch (error) {
    res.json(
      new Result({
        code: 'BIZ_ERROR',
        msg: error.errmsg || error.message,
      })
    );
  }
});

这种方案被视为最佳的解决方案，能够有效解决多账号和绑定手机号码等问题。实际上，采用哪种方式取决于具体的业务场景，因为在某些情况下，用户可能会担心手机号码泄露而不愿采用这种方式。

注意

获取手机号码是需要收费，每次调用需要 0.03 元。
wx.login 与 getPhoneNumber 中获取的 code 不是同一个

总结

基于 openid 或手机号码快捷登录
获取手机号码前置条件
如何解决多账号的问题
讲解前端、后端、微信登录过程中完整交互流程，方便更好去理解小程序登录

以上就是微信小程序常见的两种登录方式详解的详细内容，更多关于小程序登录方式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js+css3实现简单时钟特效
这篇文章主要为大家详细介绍了js+css3实现简单时钟特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JS验证输入的是否是数字及保留几位小数问题
这篇文章主要介绍了JS验证输入的是否是数字及保留几位小数问题，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-05-05
深入探究JavaScript中RunJs的特性及用途
JavaScript已经成为现代Web开发的中流砥柱,实时调试、快速原型设计以及代码的即时反馈通常需要开发者使用多个工具和手段,现代工具的涌现为我们带来了更好的解决方案,而RunJs就是其中之一,本文将带您深入探讨RunJs的特性、用途,需要的朋友可以参考下
2023-08-08
JavaScript日期时间格式化函数分享
这篇文章主要介绍了JavaScript日期时间格式化函数分享,需要的朋友可以参考下
2014-05-05
JS设计模式之命令模式概念与用法分析
这篇文章主要介绍了JS设计模式之命令模式概念与用法,简单描述了命令模式的原理、功能并结合javascript实例形式分析了命令模式相关定义与使用技巧,需要的朋友可以参考下
2018-02-02
RxJS的入门指引和初步应用
这篇文章主要介绍了RxJS的入门指引和初步应用，RxJS是一个强大的Reactive编程库，提供了强大的数据流组合与控制能力，但是其学习门槛一直很高，本次分享期望从一些特别的角度解读它在业务中的使用，而不是从API角度去讲解。,需要的朋友可以参考下
2019-06-06
深入理解javascript中concat方法
本文主要介绍了javascript中concat方法，主要分为2小节内容：1.concat方法的基础介绍；2.从实例中感受concat方法。需要的朋友一起来看下吧
2016-12-12
JS实现网页时钟特效
这篇文章主要为大家详细介绍了JS实现网页时钟特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
Javascript 拖拽的一些高级的应用(逐行分析代码，让你轻松了拖拽的原理)
这篇文章主要介绍了Javascript 拖拽的一些高级的应用(逐行分析代码，让你轻松了拖拽的原理),需要的朋友可以参考下
2015-01-01
JS异步任务的并行、串行及二者结合用法
让多个异步任务按照我们的想法执行，是开发中常见的需求，今天我们就来捋一下，如何让多个异步任务并行，串行，以及并行串行相结合，感兴趣的朋友跟随小编一起看看吧
2023-10-10