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

前言

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

正文开始

需求分析

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

• 创建一个登录页面，让用户选择使用微信登录还是账户密码登录。
• 对于微信登录，您可以使用微信开发者工具提供的 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，使用账户密码登录时需要验证用户的用户名和密码，保存登录凭证时需要注意安全性问题。通过以上步骤，可以实现微信和账户密码同时登录的功能。