likes
comments
collection
share

微信小程序实现微信和账号密码同时登录

作者站长头像
站长
· 阅读数 24

前言

微信小程序是一种轻量级的应用程序，可以在微信中直接使用，无需下载和安装。在微信小程序中，用户可以使用微信账号登录，也可以使用账户密码登录。本文将介绍如何在微信小程序中实现微信和账户密码同时登录。

正文开始

需求分析

要在微信小程序中实现微信和账户密码同时登录，您需要进行以下步骤：

  • 创建一个登录页面，让用户选择使用微信登录还是账户密码登录。
  • 对于微信登录，您可以使用微信开发者工具提供的 API 进行登录。用户在登录页面点击微信登录按钮后，调用微信登录 API，获取到用户的微信 OpenID 和 SessionKey，然后将这些信息发送到您的服务器进行验证和处理。
  • 对于账户密码登录，您需要让用户输入用户名和密码，然后将这些信息发送到您的服务器进行验证和处理。
  • 无论是微信登录还是账户密码登录，您的服务器都需要验证用户的身份，并返回一个登录凭证（例如一个 token）给小程序。
  • 小程序在接收到登录凭证后，可以将其保存在本地，以便用户下次打开小程序时无需再次登录。

需求实现

1、登录界面设计

微信小程序实现微信和账号密码同时登录

2、MySql数据库设计

微信小程序实现微信和账号密码同时登录

3、微信登录--前端部分

在微信小程序中，可以使用 wx.login() 方法来获取用户的登录凭证 code。然后，可以将 code 发送到后端服务器端，后端使用微信提供的 API 进行解析，获取用户唯一的openId ，根据openId判断是否存在该用户，存在则登录，反之则进行信息注册，并登录，最后将登录凭证以及登录用户信息返回给前端。

wx.login({
  provider: 'weixin',
  success: (loginRes) => {
    console.log(loginRes);
    wxLogin({
      code: loginRes.code
    }).then((res) => {
      uni.setStorageSync("token", res.data.token);
      uni.setStorageSync("userInfo", res.data.userinfo)
    })
  }
});

4、微信登录--后端部分

在服务器端，获取到前端传递的code,可以使用微信提供的 API 获取用户的 OpenID 和 SessionKey

String url = "https://api.weixin.qq.com/sns/jscode2session";
HashMap<String, Object> paramMap = new HashMap<>();
paramMap.put("appid", "微信小程序appid");
paramMap.put("secret", "微信小程序secret");
paramMap.put("js_code", code);
paramMap.put("grant_type", "authorization_code");
String result = HttpUtil.get(url, paramMap);
JSONObject json = JSON.parseObject(result);
String openid = json.getString("openid");
String SessionKey = json.getString("SessionKey");

解析出登录用户的openId，使用该 OpenID 查询数据库中是否存在该用户记录。

SysUser sysUser = new SysUser();
sysUser.setOpenid(openid);
List<SysUser> user = sysUserService.list(sysUser);

如果存在该用户记录，表示该用户已经注册过，则进行登录操作，并将登录凭证以及用户信息返回给小程序，如果不存在该用户记录，表示该用户还未注册，则进行注册操作，这里我的做法是，将openid,以及默认用户名作为主要信息，存入数据库，存入成功后，再执行登录操作。

if (user.size() == 0) {
  // 将获取到的信息注册到数据库,然后执行登录操作
  sysUser.setUserName("默认用户");
  sysUserService.save(sysUser);
  SysUser userParams = new SysUser();
  userParams.setOpenid(openid);
  List < SysUser > saveUser = sysUserService.list(userParams);
  if (saveUser.size() == 1) {
    return success(setUserInfo(saveUser.get(0)));
  } else {
    return error("注册信息异常");
  }
} else {
  // 执行登录操作，并返回用户信息和token
  return success(setUserInfo(user.get(0)));
}

注：Java代码中存在的 setUserInfo()为封装的登录流程方法，具体如下：

public Map < String, Object > setUserInfo(SysUser userInfo) {
  String jwt = JwtUtil.createToken(userInfo.getUserId(),userInfo.getUserName(),userInfo.getOpenid()); //jwt包含了当前登录的信息
  loginInfo.setUserId(userInfo.getUserId());
  Map < String, Object > map = new HashMap <> ();
  map.put("userinfo", userInfo);
  map.put("token", jwt);
  return map;
}

完整代码

@ApiOperation("微信登录")
@GetMapping("/wxLogin")
public AjaxResult wxLogin(@RequestParam String code) {
    String url = "https://api.weixin.qq.com/sns/jscode2session";
    HashMap<String, Object> paramMap = new HashMap<>();
    paramMap.put("appid", "微信小程序appid");
    paramMap.put("secret", "微信小程序secret");
    paramMap.put("js_code", code);
    paramMap.put("grant_type", "authorization_code");
    String result = HttpUtil.get(url, paramMap);
    JSONObject json = JSON.parseObject(result);
    String openid = json.getString("openid");
    SysUser sysUser = new SysUser();
    sysUser.setOpenid(openid);
    List<SysUser> user = sysUserService.list(sysUser);
    System.out.println(user.size());
    if (user.size() == 0) {
        // 将获取到的信息注册到数据库,然后执行登录操作
        sysUser.setUserName("IT Tool用户");
        sysUserService.save(sysUser);
        SysUser userParams = new SysUser();
        userParams.setOpenid(openid);
        List<SysUser> saveUser = sysUserService.list(userParams);
        if (saveUser.size() == 1) {
            return success(setUserInfo(saveUser.get(0)));
        } else {
            return error("微信登录注册信息异常");
        }
    } else {
        // 执行登录操作，并返回用户信息和token
        return success(setUserInfo(user.get(0)));
    }
}

public Map<String, Object> setUserInfo(SysUser userInfo) {
    String jwt = JwtUtil.createToken(userInfo.getUserId(), userInfo.getUserName(), userInfo.getOpenid()); //jwt包含了当前登录的员工信息
    loginInfo.setUserId(userInfo.getUserId());
    Map<String, Object> map = new HashMap<>();
    map.put("userinfo", userInfo);
    map.put("token", jwt);
    return map;
}

5、账号密码登录--前端部分

对于账号密码登录，相比对于程序员来说，是很熟悉的，我们向后端传递账号密码进行登录即可。

let res = await login(user);
if (res.code == "200") {
  uni.setStorageSync("token", res.data.token);
  uni.setStorageSync("userInfo", res.data.userinfo)
} else {
  uni.showToast({
    title: res.msg,
    icon: "error",
    duration: 2000
  });
}

6、账号密码登录--前端部分

在服务器端，获取到前端传递的账号和密码，进行查询数据库操作，如果找到该用户，即可登录成功，并返回相关用户信息。

@ApiOperation("账号密码登录")
@GetMapping("/login")
public AjaxResult login(@RequestParam String userName, @RequestParam String password) {
    if (userName != null && password != null) {
        SysUser sysUser = new SysUser();
        String newPassword = new Md5Hash("IT TOOL" + password).toHex();
        sysUser.setUserName(userName);
        sysUser.setPassword(newPassword);
        List<SysUser> user = sysUserService.list(sysUser);
        if (user.size() == 1) {
            return success(setUserInfo(user.get(0)));
        } else {
            return error("用户名或密码错误");
        }
    } else {
        return error("用户名或密码不能为空");
    }
}

7、微信登陆和账号密码进行关联

在实际需求中，同一用户即可使用微信登陆，也能使用账号密码登录，那么如何实现呢，方法很简单。 1、用户首次进行微信登录时，当登录成功后，可进行弹框提示，提示用户，设置用户头像以及用户名，而在用户设置中，可设置当前微信账户密码，此时，微信登录以及账号密码关联成功。

2、用户首次进行账号密码登录，判断该用户openId是否为空，如果为空，提示用户，绑定当前用户微信，实现原理为当前用户的账号密码和openId都存在。

8、安全性考虑

为了保护用户的隐私和安全，需要采取一些措施来保护用户的登录信息。例如：

  • 使用 HTTPS 加密传输数据，防止数据被窃听和篡改。
  • 使用安全的存储方式保存用户的密码，例如使用哈希算法加密密码。
  • 对于微信登录，需要验证用户的 OpenID 和 SessionKey 是否合法，防止伪造登录信息。
  • 对于账户密码登录，需要使用验证码等方式防止暴力破解密码。

总结

在微信小程序中实现微信和账户密码同时登录，需要创建登录页面，使用微信提供的 API 获取用户的 OpenID 和 SessionKey，使用账户密码登录时需要验证用户的用户名和密码，保存登录凭证时需要注意安全性问题。通过以上步骤，可以实现微信和账户密码同时登录的功能。