微信小程序登录功能实现

微信小程序登录功能实现

  微信小程序可以调用微信登录的接口,直接用微信登录,原本以为很简单,结果没想到平时小小的一个微信登录按钮,却有这么多东西。其实思路也不是很难,只是了解过程就很轻易就可以写出来了。
  感觉微信登录涉及很多东西,就想记录一下,不过,我想我的方法应该不是最合理或者安全的,但是,功能是能很好的实现。
#整体思路
  首先使用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>

js

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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值