微信小程序登录功能实现

最新推荐文章于 2024-06-09 11:58:52 发布

CGSX

最新推荐文章于 2024-06-09 11:58:52 发布

阅读量1.2w

点赞数 5

分类专栏：小程序项目培训文章标签：小程序登录 openid

小菜鸟博客出品，可学习，转载，改动，不可抄袭，商用

本文链接：https://blog.csdn.net/s1547156325/article/details/98944702

版权

小程序项目培训专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

微信小程序登录功能实现
小程序部分
后台服务器部分

微信小程序登录功能实现

微信小程序可以调用微信登录的接口，直接用微信登录，原本以为很简单，结果没想到平时小小的一个微信登录按钮，却有这么多东西。其实思路也不是很难，只是了解过程就很轻易就可以写出来了。
感觉微信登录涉及很多东西，就想记录一下，不过，我想我的方法应该不是最合理或者安全的，但是，功能是能很好的实现。
#整体思路
首先使用wx.login()方法用code到后台服务器换取openid，不过我为了能检测用户登录状态，我在后台把获取到的openid存入redis中，并设置一个缓存时间，就相当于一个session，然后把所谓的sesisonId送到前端，因为微信小程序没有cooking，但是有本地存储storage，于是，我把sessionId存入到storage中，用来检测。如果redis和storage中session存在，那么用户在登录状态，反之两者中有一个不存在，便不是登录状态。要退出登录状态也很简单，removeStorage()删除storage中的内容就好了。

小程序部分

由于小程序最新的补丁，以前的那种进入页面直接跳进授权登录页面是不被允许的，必须使用button来使用微信登录方法。如果要获取用户信息，那么就需要属性open-type='getUserInfo'
具体信息可以查看微信小程序文档 https://developers.weixin.qq.com/miniprogram/dev/component/button.html
wxml

<button class='btn1' open-type='getUserInfo'
        bindgetuserinfo='doLogin'>
    <view>微信登录</view>

doLogin(e) {
    wx.login({
      success: (res) => {
        console.log(res);
        // 获取登录临时凭证
        const { code } = res;
        // 调用后端，获取微信的session_key, 

        wx.request({
        //后端url  我的后台是springboot搭建的，也可以是其他的
          url: '',
          method: 'get',
          data: {

            code: res.code
          },
          success: res => {

            // 获取到用户的 sessionId
            var that = this
            console.log("用户的sessionId:" + res.data.sessionId);

            //把获取到的sessionId存入到本地storage中
            wx.setStorage({
              key: 'sessionId',
              data: res.data.sessionId,
            })
            wx.getStorage({
              key: 'sessionId',
              success: function (res) {
                console.log(res.data)
              },
            })
          }
        });
      }
    })
  },

后台服务器部分

ComonUtils 后台向微信服务器换取openid，封装url

package com.noname.demo.comment;


/**
 * 封装微信小程序appid, secret js_code  为获得用户openId
 */
public class ComonUtils {

    public static StringBuffer appendUrl(String code) {

        StringBuffer info = new StringBuffer("https://api.weixin.qq.com/sns/jscode2session?");

        info.append("appid=").append("wx8d87127163bbef11").append("&");

        info.append("secret=").append("9718b02bb9be37ba2eecfdec7ec88c00").append("&");

        info.append("js_code=").append(code).append("&");

        info.append("grant_type=").append("authorization_code");

        return info;
    }
}

RedisOperator

package com.noname.demo.comment;

import java.util.Map;
import java.util.Set;
import java.util.concurrent.TimeUnit;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Component;

/**
 * @Description: 使用redisTemplate的操作实现类 
 */
@Component
public class RedisOperator {
    
//  @Autowired
//    private RedisTemplate<String, Object> redisTemplate;
    
    @Autowired
    private StringRedisTemplate redisTemplate;
    
    // Key（键），简单的key-value操作

    /**
     * 实现命令：TTL key，以秒为单位，返回给定 key的剩余生存时间(TTL, time to live)。
     * 
     * @param key
     * @return
     */
    public long ttl(String key) {
        return redisTemplate.getExpire(key);
    }
    
    /**
     * 实现命令：expire 设置过期时间，单位秒
     * 
     * @param key
     * @return
     */
    public void expire(String key, long timeout) {
        redisTemplate.expire(key, timeout, TimeUnit.SECONDS);
    }
    
    /**
     * 实现命令：INCR key，增加key一次
     * 
     * @param key
     * @return
     */
    public long incr(String key, long delta) {
        return redisTemplate.opsForValue().increment(key, delta);
    }

    /**
     * 实现命令：KEYS pattern，查找所有符合给定模式 pattern的 key
     */
    public Set<String> keys(String pattern) {
        return redisTemplate.keys(pattern);
    }

    /**
     * 实现命令：DEL key，删除一个key
     * 
     * @param key
     */
    public void del(String key) {
        redisTemplate.delete(key);
    }

    // String（字符串）

    /**
     * 实现命令：SET key value，设置一个key-value（将字符串值 value关联到 key）
     * 
     * @param key
     * @param value
     */
    public void set(String key, String value) {
        redisTemplate.opsForValue().set(key, value);
    }

    /**
     * 实现命令：SET key value EX seconds，设置key-value和超时时间（秒）
     * 
     * @param key
     * @param value
     * @param timeout
     *            （以秒为单位）
     */
    public void set(String key, String value, long timeout) {
        redisTemplate.opsForValue().set(key, value, timeout, TimeUnit.SECONDS);
    }

    /**
     * 实现命令：GET key，返回 key所关联的字符串值。
     * 
     * @param key
     * @return value
     */
    public String get(String key) {
        return (String)redisTemplate.opsForValue().get(key);
    }

    // Hash（哈希表）

    /**
     * 实现命令：HSET key field value，将哈希表 key中的域 field的值设为 value
     * 
     * @param key
     * @param field
     * @param value
     */
    public void hset(String key, String field, Object value) {
        redisTemplate.opsForHash().put(key, field, value);
    }

    /**
     * 实现命令：HGET key field，返回哈希表 key中给定域 field的值
     * 
     * @param key
     * @param field
     * @return
     */
    public String hget(String key, String field) {
        return (String) redisTemplate.opsForHash().get(key, field);
    }

    /**
     * 实现命令：HDEL key field [field ...]，删除哈希表 key 中的一个或多个指定域，不存在的域将被忽略。
     * 
     * @param key
     * @param fields
     */
    public void hdel(String key, Object... fields) {
        redisTemplate.opsForHash().delete(key, fields);
    }

    /**
     * 实现命令：HGETALL key，返回哈希表 key中，所有的域和值。
     * 
     * @param key
     * @return
     */
    public Map<Object, Object> hgetall(String key) {
        return redisTemplate.opsForHash().entries(key);
    }

    // List（列表）

    /**
     * 实现命令：LPUSH key value，将一个值 value插入到列表 key的表头
     * 
     * @param key
     * @param value
     * @return 执行 LPUSH命令后，列表的长度。
     */
    public long lpush(String key, String value) {
        return redisTemplate.opsForList().leftPush(key, value);
    }

    /**
     * 实现命令：LPOP key，移除并返回列表 key的头元素。
     * 
     * @param key
     * @return 列表key的头元素。
     */
    public String lpop(String key) {
        return (String)redisTemplate.opsForList().leftPop(key);
    }

    /**
     * 实现命令：RPUSH key value，将一个值 value插入到列表 key的表尾(最右边)。
     * 
     * @param key
     * @param value
     * @return 执行 LPUSH命令后，列表的长度。
     */
    public long rpush(String key, String value) {
        return redisTemplate.opsForList().rightPush(key, value);
    }

}

AppUserModel 封装openid和session_key

package com.noname.demo.entity;

public class AppUserModel {

    String openid;

    String session_key;

    public String getOpenid() {
        return openid;
    }

    public void setOpenid(String openid) {
        this.openid = openid;
    }

    public String getSession_key() {
        return session_key;
    }

    public void setSession_key(String session_key) {
        this.session_key = session_key;
    }
}

LoginController

  /**
     * 获取用户openid, 并将session存入redis，发送到前端
     * @param code
     * @return
     */
    @RequestMapping(value = "/doLogin", method = RequestMethod.GET)
    public Map<String, Object> appDoLogin(String code){
        Map<String, Object> map = new HashMap<>();
        if(code == null){
            map.put("success", false);
            return map;
        }

        String url = new ComonUtils().appendUrl(code).toString();
        RestTemplate restTemplate = new RestTemplate();

        //用restTemplate请求url，得到openid和session_key

        String reponse = restTemplate.getForObject(url, String.class);
        if(reponse == null){
            map.put("success", false);
            return map;
        }

        System.out.println(reponse);
        String openid = "";
        String session_key = "";
        String[] strings = reponse.split(",");
        openid = strings[1].substring(10, strings[1].length()-2);
        session_key = strings[0].substring(16, strings[0].length()-1);

        AppUserModel appUserModel = new AppUserModel();
        appUserModel.setOpenid(openid);
        appUserModel.setSession_key(session_key);

        //将openid和session_key存入redis,之后传到前端的sessionId就是
        //"userSession:" + appUserModel.getOpenid()

        redis.set("userSession:" + appUserModel.getOpenid(), appUserModel.getSession_key(),
                60*10);
        //System.out.println(openid);
        map.put("sessionId","userSession:" + appUserModel.getOpenid());
        map.put("success", true);

        return map;
    }

以上小程序登录功能就实现了。
后台代码 https://github.com/d1547156325/orderingSystem