微信小程序实现微信和账号密码同时登录 |
您所在的位置：网站首页 › win10怎么创建账号密码登录微信账户 › 微信小程序实现微信和账号密码同时登录 |
微信小程序实现微信和账号密码同时登录
|
前言 微信小程序是一种轻量级的应用程序，可以在微信中直接使用，无需下载和安装。在微信小程序中，用户可以使用微信账号登录，也可以使用账户密码登录。本文将介绍如何在微信小程序中实现微信和账户密码同时登录。 正文开始需求分析要在微信小程序中实现微信和账户密码同时登录，您需要进行以下步骤： 创建一个登录页面，让用户选择使用微信登录还是账户密码登录。对于微信登录，您可以使用微信开发者工具提供的 API 进行登录。用户在登录页面点击微信登录按钮后，调用微信登录 API，获取到用户的微信 OpenID 和 SessionKey，然后将这些信息发送到您的服务器进行验证和处理。对于账户密码登录，您需要让用户输入用户名和密码，然后将这些信息发送到您的服务器进行验证和处理。无论是微信登录还是账户密码登录，您的服务器都需要验证用户的身份，并返回一个登录凭证（例如一个 token）给小程序。小程序在接收到登录凭证后，可以将其保存在本地，以便用户下次打开小程序时无需再次登录。需求实现1、登录界面设计 登录界面设计2、MySql数据库设计 MySql数据库设计3、微信登录--前端部分在微信小程序中，可以使用 wx.login() 方法来获取用户的登录凭证 code。然后，可以将 code 发送到后端服务器端，后端使用微信提供的 API 进行解析，获取用户唯一的openId ，根据openId判断是否存在该用户，存在则登录，反之则进行信息注册，并登录，最后将登录凭证以及登录用户信息返回给前端。 代码语言：javascript复制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 代码语言：java复制String url = "https://api.weixin.qq.com/sns/jscode2session"; HashMap 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 查询数据库中是否存在该用户记录。 代码语言：java复制SysUser sysUser = new SysUser(); sysUser.setOpenid(openid); List user = sysUserService.list(sysUser);如果存在该用户记录，表示该用户已经注册过，则进行登录操作，并将登录凭证以及用户信息返回给小程序，如果不存在该用户记录，表示该用户还未注册，则进行注册操作，这里我的做法是，将openid,以及默认用户名作为主要信息，存入数据库，存入成功后，再执行登录操作。 代码语言：java复制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()为封装的登录流程方法，具体如下： 代码语言：java复制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; }完整代码代码语言：java复制@ApiOperation("微信登录") @GetMapping("/wxLogin") public AjaxResult wxLogin(@RequestParam String code) { String url = "https://api.weixin.qq.com/sns/jscode2session"; HashMap 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 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 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 setUserInfo(SysUser userInfo) { String jwt = JwtUtil.createToken(userInfo.getUserId(), userInfo.getUserName(), userInfo.getOpenid()); //jwt包含了当前登录的员工信息 loginInfo.setUserId(userInfo.getUserId()); Map map = new HashMap(); map.put("userinfo", userInfo); map.put("token", jwt); return map; }5、账号密码登录--前端部分对于账号密码登录，相比对于程序员来说，是很熟悉的，我们向后端传递账号密码进行登录即可。 代码语言：javascript复制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、账号密码登录--前端部分在服务器端，获取到前端传递的账号和密码，进行查询数据库操作，如果找到该用户，即可登录成功，并返回相关用户信息。 代码语言：java复制@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 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，使用账户密码登录时需要验证用户的用户名和密码，保存登录凭证时需要注意安全性问题。通过以上步骤，可以实现微信和账户密码同时登录的功能。 我正在参与 2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表 |
【本文地址】
今日新闻 |
推荐新闻 |