[Mini Programa WeChat] 6 días de entrada precisa (Día 6: inicio de sesión autorizado de WeChat para obtener información) con código fuente

1. ¿Por qué utilizar el inicio de sesión autorizado de WeChat?

1. Beneficios

Conveniente y rápido : el inicio de sesión autorizado de WeChat permite a los usuarios iniciar sesión fácilmente en el miniprograma utilizando su propia cuenta de WeChat, eliminando el engorroso proceso de registro y mejorando la experiencia de inicio de sesión del usuario.

Confianza del usuario : WeChat es una de las plataformas sociales más utilizadas y tiene un cierto grado de confianza en los corazones de los usuarios. El uso de WeChat para autorizar el inicio de sesión puede facilitar que los usuarios acepten y confíen en los mini programas.

Adquisición de información del usuario : al iniciar sesión con autorización de WeChat, el mini programa puede obtener la información básica del usuario, como apodo, avatar, género, etc., para facilitar una experiencia de usuario personalizada y brindar servicios más precisos.

2. Desventajas

Restricciones de selección de usuarios : solo los usuarios de WeChat pueden iniciar sesión y utilizar miniprogramas autorizados por WeChat, lo que limita la posibilidad de uso por parte de otros usuarios que no sean de WeChat.

Problemas de privacidad : el uso de WeChat para autorizar el inicio de sesión requiere obtener la información básica del usuario, lo que puede causar problemas de privacidad a los usuarios. Si el miniprograma no tiene una buena política de privacidad y un mecanismo de protección de datos, es posible que los usuarios no estén dispuestos a autorizar el inicio de sesión.

Dependencia de la plataforma : El Mini Programa depende de la plataforma WeChat. Si la plataforma WeChat falla o está restringida, puede afectar el funcionamiento normal del Mini Programa.

2. Inicio de sesión del mini programa

1. Cronograma del proceso de inicio de sesión

Podemos consultar las capacidades abiertas/información del usuario/inicio de sesión del mini programa del sitio web oficial (qq.com) para comprenderlo.

1.1 Descripción

Llame a wx.login() para obtener el código de credencial de inicio de sesión temporal y enviarlo de regreso al servidor del desarrollador.

Llame a la interfaz auth.code2Session a cambio del identificador único del usuario OpenID , el identificador único del usuario UnionID en la cuenta de WeChat Open Platform (si el mini programa actual se ha vinculado a la cuenta de WeChat Open Platform) y la clave de sesión session_key .

Luego, el servidor de desarrollador puede generar un estado de inicio de sesión personalizado basado en la ID del usuario, que puede usarse para identificar la identidad del usuario al interactuar con el front-end y el back-end en la lógica empresarial posterior.

2、wx.iniciar sesión

wx.login es una interfaz utilizada para obtener el código de credencial de inicio de sesión del usuario. Al llamar a wx.login, se puede obtener el código de credencial de inicio de sesión temporal del usuario, que se utiliza en intercambios posteriores para el identificador único openid del usuario y la clave de sesión session_key para implementar el función de inicio de sesión de usuario.

wxml

<!--pages/index/index.wxml-->
<view>
  <button type="primary" class="wx-login-btn" bindgetuserinfo="wxLogin">wx.login>微信直接登录</button>
  <image mode="scaleToFill" src="{
   
   {userInfo.avatarUrl}}" />
  <text>昵称:{
   
   {userInfo.nickName}}</text>
</view>

// pages/index/index.js
Page({
  data: {
    userInfo: {}
  },
  onLoad() {
  }
  wxLogin: function(e) {
    debugger
    console.log('wxLogin')
    console.log(e.detail.userInfo);
    this.setData({
      userInfo: e.detail.userInfo
    })
    if (e.detail.userInfo == undefined) {
      app.globalData.hasLogin = false;
      util.showErrorToast('微信登录失败');
      return;
    }
    
  }
})

3、wx.getUserProfile

wx.getUserProfile es una interfaz que se utiliza para obtener información personal del usuario. Al llamar a wx.getUserProfile, puede obtener el apodo, avatar, género y otra información personal del usuario.

wxml

<!--pages/index/index.wxml-->
<view>
  <button type="primary" class="wx-login-btn" bindtap="getUserProfile">wx.getUserProfile>微信直接登录</button>
  <image mode="scaleToFill" src="{
   
   {userInfo.avatarUrl}}" />
  <text>昵称:{
   
   {userInfo.nickName}}</text>
</view>

// pages/index/index.js
Page({
  data: {
    userInfo: {}
  },
  wxLogin: function(e) {
    debugger
    console.log('wxLogin')
    console.log(e.detail.userInfo);
    this.setData({
      userInfo: e.detail.userInfo
    })
    if (e.detail.userInfo == undefined) {
      app.globalData.hasLogin = false;
      util.showErrorToast('微信登录失败');
      return;
    }
    
  }
})

4. Diferencia

wx.login y wx.getUserProfile son dos interfaces en el subprograma WeChat para iniciar sesión y obtener información del usuario. wx.login se usa para implementar la función de inicio de sesión del usuario, mientras que wx.getUserProfile se usa para obtener la información personal del usuario. Los dos a menudo se usan juntos, llamando a wx.login para obtener el código de credencial de inicio de sesión del usuario y luego llamando a wx.getUserProfile para obtener la información personal del usuario, logrando así una autenticación de usuario y una recopilación de información más completas.

Tienen las siguientes diferencias:

Diferentes funciones :

wx.login: wx.login es una interfaz que se utiliza para obtener el código de credencial de inicio de sesión del usuario. Al llamar a wx.login, se puede obtener el código de credencial de inicio de sesión temporal del usuario, que se utiliza en intercambios posteriores para el identificador único openid y la clave de sesión del usuario. session_key para realizar la función de inicio de sesión del usuario.

wx.getUserProfile: wx.getUserProfile es una interfaz que se utiliza para obtener la información personal del usuario. Al llamar a wx.getUserProfile, se puede obtener el apodo, avatar, género y otra información personal del usuario.

Los métodos de llamada son diferentes :

wx.login: wx.login es una interfaz nativa proporcionada por la biblioteca básica y se puede llamar directamente.

wx.getUserProfile: wx.getUserProfile se introdujo en la versión 2.10.4 de la biblioteca básica. Los permisos correspondientes deben habilitarse en la configuración en segundo plano del mini programa, y la información personal del usuario solo se puede obtener después de que el usuario la autoriza. la primera vez.

Los tipos de valor de retorno son diferentes :

wx.login: la interfaz wx.login devuelve un objeto que contiene el código de credencial de inicio de sesión del usuario.

wx.getUserProfile: la interfaz wx.getUserProfile devuelve un objeto que contiene la información personal del usuario, incluido el apodo, el avatar, el género, etc.

3. Caso

1. backend

Se utiliza para determinar si el usuario ha iniciado sesión

package com.zking.ssm.wxcontroller;

import java.math.BigDecimal;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import com.zking.ssm.annotation.LoginUser;
import com.zking.ssm.model.WxUser;
import com.zking.ssm.service.UserTokenManager;
import com.zking.ssm.service.WxUserService;
import com.zking.ssm.util.ResponseUtil;
import lombok.extern.slf4j.Slf4j;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

import com.alibaba.fastjson.JSONObject;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;


/**
 * 用户服务
 */
@Slf4j
@RestController
@RequestMapping("/wx/user")
@Validated
public class WxUserController {
	@Autowired
	private WxUserService userService;

	/**
	 * 用户个人页面数据
	 * <p>
	 * @param userId
	 *            用户ID
	 * @return 用户个人页面数据
	 */
	@GetMapping("index")
	public Object list(@LoginUser Integer userId, @RequestHeader("X-OA-token") String token) {
		log.info("【请求开始】用户个人页面数据,请求参数,userId:{}", userId);
		log.info("【请求开始】用户个人页面数据,请求参数,token:{}", token);
		if (userId == null) {
			log.error("用户个人页面数据查询失败:用户未登录！！！");
			return ResponseUtil.unlogin();
		}
		WxUser wxUser = userService.selectByPrimaryKey(userId);
		Map<Object, Object> data = new HashMap<Object, Object>();
		data.put("metting_pubs", wxUser.getUserLevel());
		data.put("metting_joins",wxUser.getUserLevel());
		return ResponseUtil.ok(data);
	}

}

El método utilizado para implementar la función.

package com.zking.ssm.wxcontroller;

/**
 * @Autho donkee
 * @Since 2022/6/27
 */

import cn.binarywang.wx.miniapp.bean.WxMaPhoneNumberInfo;
import com.alibaba.fastjson.JSONObject;
import com.zking.ssm.annotation.LoginUser;
import com.zking.ssm.model.UserInfo;
import com.zking.ssm.model.WxLoginInfo;
import com.zking.ssm.model.WxUser;
import com.zking.ssm.service.UserToken;
import com.zking.ssm.service.UserTokenManager;
import com.zking.ssm.service.WxUserService;
import com.zking.ssm.util.JacksonUtil;
import com.zking.ssm.util.ResponseUtil;
import com.zking.ssm.util.UserTypeEnum;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import cn.binarywang.wx.miniapp.api.WxMaService;
import cn.binarywang.wx.miniapp.bean.WxMaJscode2SessionResult;
import javax.servlet.http.HttpServletRequest;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * 鉴权服务
 */
@Slf4j
@RestController
@RequestMapping("/wx/auth")
public class WxAuthController {
    @Autowired
    private WxMaService wxService;
    @Autowired
    private WxUserService userService;
    /**
     * 微信登录
     *
     * @param wxLoginInfo
     *            请求内容，{ code: xxx, userInfo: xxx }
     * @param request
     *            请求对象
     * @return 登录结果
     */
    @PostMapping("login_by_weixin")
    public Object loginByWeixin(@RequestBody WxLoginInfo wxLoginInfo, HttpServletRequest request) {

        //客户端需携带code与userInfo信息
        String code = wxLoginInfo.getCode();
        UserInfo userInfo = wxLoginInfo.getUserInfo();
        if (code == null || userInfo == null) {
            return ResponseUtil.badArgument();
        }
        //调用微信sdk获取openId及sessionKey
        String sessionKey = null;
        String openId = null;
        try {
            long beginTime = System.currentTimeMillis();
            //
            WxMaJscode2SessionResult result = this.wxService.getUserService().getSessionInfo(code);
//            Thread.sleep(6000);
            long endTime = System.currentTimeMillis();
            log.info("响应时间:{}",(endTime-beginTime));
            sessionKey = result.getSessionKey();//session id
            openId = result.getOpenid();//用户唯一标识 OpenID
        } catch (Exception e) {
            e.printStackTrace();
        }

        if (sessionKey == null || openId == null) {
            log.error("微信登录,调用官方接口失败：{}", code);
            return ResponseUtil.fail();
        }else{
            log.info("openId={},sessionKey={}",openId,sessionKey);
        }
        //根据openId查询wx_user表
        //如果不存在，初始化wx_user,并保存到数据库中
        //如果存在，更新最后登录时间
        WxUser user = userService.queryByOid(openId);

        if (user == null) {
            user = new WxUser();
            user.setUsername(openId);
            user.setPassword(openId);
            user.setWeixinOpenid(openId);
            user.setAvatar(userInfo.getAvatarUrl());
            user.setNickname(userInfo.getNickName());
            user.setGender(userInfo.getGender());
            user.setUserLevel((byte) 0);
            user.setStatus((byte) 0);
            user.setLastLoginTime(new Date());
            user.setLastLoginIp(IpUtil.client(request));
            user.setShareUserId(1);

            userService.add(user);

        } else {
            user.setLastLoginTime(new Date());
            user.setLastLoginIp(IpUtil.client(request));
            if (userService.updateById(user) == 0) {
                log.error("修改失败：{}", user);
                return ResponseUtil.updatedDataFailed();
            }
        }
        // token
        UserToken userToken = null;
        try {
            userToken = UserTokenManager.generateToken(user.getId());
        } catch (Exception e) {
            log.error("微信登录失败,生成token失败：{}", user.getId());
            e.printStackTrace();
            return ResponseUtil.fail();
        }
        userToken.setSessionKey(sessionKey);
        log.info("SessionKey={}",UserTokenManager.getSessionKey(user.getId()));
        Map<Object, Object> result = new HashMap<Object, Object>();
        result.put("token", userToken.getToken());
        result.put("tokenExpire", userToken.getExpireTime().toString());
        userInfo.setUserId(user.getId());
        if (!StringUtils.isEmpty(user.getMobile())) {// 手机号存在则设置
            userInfo.setPhone(user.getMobile());
        }
        try {
            DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
            String registerDate = df.format(user.getAddTime() != null ? user.getAddTime() : new Date());
            userInfo.setRegisterDate(registerDate);
            userInfo.setStatus(user.getStatus());
            userInfo.setUserLevel(user.getUserLevel());// 用户层级
            userInfo.setUserLevelDesc(UserTypeEnum.getInstance(user.getUserLevel()).getDesc());// 用户层级描述
        } catch (Exception e) {
            log.error("微信登录：设置用户指定信息出错："+e.getMessage());
            e.printStackTrace();
        }
        result.put("userInfo", userInfo);


        log.info("【请求结束】微信登录,响应结果:{}", JSONObject.toJSONString(result));

        return ResponseUtil.ok(result);
    }
    /**
     * 绑定手机号码
     *
     * @param userId
     * @param body
     * @return
     */
    @PostMapping("bindPhone")
    public Object bindPhone(@LoginUser Integer userId, @RequestBody String body) {
        log.info("【请求开始】绑定手机号码,请求参数，body:{}", body);

        String sessionKey = UserTokenManager.getSessionKey(userId);
        String encryptedData = JacksonUtil.parseString(body, "encryptedData");
        String iv = JacksonUtil.parseString(body, "iv");
        WxMaPhoneNumberInfo phoneNumberInfo = null;
        try {
            phoneNumberInfo = this.wxService.getUserService().getPhoneNoInfo(sessionKey, encryptedData, iv);
        } catch (Exception e) {
            log.error("绑定手机号码失败,获取微信绑定的手机号码出错：{}", body);
            e.printStackTrace();
            return ResponseUtil.fail();
        }
        String phone = phoneNumberInfo.getPhoneNumber();
        WxUser user = userService.selectByPrimaryKey(userId);
        user.setMobile(phone);
        if (userService.updateById(user) == 0) {
            log.error("绑定手机号码,更新用户信息出错,id：{}", user.getId());
            return ResponseUtil.updatedDataFailed();
        }
        Map<Object, Object> data = new HashMap<Object, Object>();
        data.put("phone", phone);

        log.info("【请求结束】绑定手机号码,响应结果：{}", JSONObject.toJSONString(data));
        return ResponseUtil.ok(data);
    }
    /**
     * 注销登录
     */
    @PostMapping("logout")
    public Object logout(@LoginUser Integer userId) {
        log.info("【请求开始】注销登录,请求参数，userId:{}", userId);
        if (userId == null) {
            return ResponseUtil.unlogin();
        }
        try {
            UserTokenManager.removeToken(userId);
        } catch (Exception e) {
            log.error("注销登录出错：userId:{}", userId);
            e.printStackTrace();
            return ResponseUtil.fail();
        }

        log.info("【请求结束】注销登录成功!");
        return ResponseUtil.ok();
    }
}

2. Interfaz

Para obtener contenido preciso, consulte los documentos oficiales de WeChat Open Documents .

El método de inicio de sesión wx.getUserProfile se envía al backend y la clave privada se utiliza para operar y guardar.

var util = require('../../../utils/util.js');
var user = require('../../../utils/user.js');
const app = getApp();
    getUserProfile(e) {
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
        // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
            desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            success: (res) => {
                //console.log(res);
                // debugger
                user.checkLogin().catch(() => {
                    user.loginByWeixin(res.userInfo).then(res => {
                      app.globalData.hasLogin = true;
                    //   debugger
                      wx.navigateBack({
                        delta: 1
                      })
                    }).catch((err) => {
                      app.globalData.hasLogin = false;
                      if(err.errMsg=="request:fail timeout"){
                        util.showErrorToast('微信登录超时');
                      }else{
                        util.showErrorToast('微信登录失败');
                      }
                      this.setData({
                        lock:false
                      })
                    });
                  });
            },
            fail: (res) => {
                app.globalData.hasLogin = false;
                console.log(res);
                util.showErrorToast('微信登录失败');
            }
        });
    },
onLoad: function(options) {
        // 页面初始化 options为页面跳转所带来的参数
        // 页面渲染完成
        if (wx.getUserProfile) {
          this.setData({
            canIUseGetUserProfile: true
          })
        }
        //console.log('login.onLoad.canIUseGetUserProfile='+this.data.canIUseGetUserProfile)
    }

código completo

// pages/auth/login/login.js
var util = require('../../../utils/util.js');
var user = require('../../../utils/user.js');
const app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        canIUseGetUserProfile: false, // 用于向前兼容
        lock:false
    },
    onLoad: function(options) {
        // 页面初始化 options为页面跳转所带来的参数
        // 页面渲染完成
        if (wx.getUserProfile) {
          this.setData({
            canIUseGetUserProfile: true
          })
        }
        //console.log('login.onLoad.canIUseGetUserProfile='+this.data.canIUseGetUserProfile)
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },
    getUserProfile(e) {
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
        // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
            desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            success: (res) => {
                //console.log(res);
                // debugger
                user.checkLogin().catch(() => {
                    user.loginByWeixin(res.userInfo).then(res => {
                      app.globalData.hasLogin = true;
                    //   debugger
                      wx.navigateBack({
                        delta: 1
                      })
                    }).catch((err) => {
                      app.globalData.hasLogin = false;
                      if(err.errMsg=="request:fail timeout"){
                        util.showErrorToast('微信登录超时');
                      }else{
                        util.showErrorToast('微信登录失败');
                      }
                      this.setData({
                        lock:false
                      })
                    });
                  });
            },
            fail: (res) => {
                app.globalData.hasLogin = false;
                console.log(res);
                util.showErrorToast('微信登录失败');
            }
        });
    },
    wxLogin: function(e) {
        if (e.detail.userInfo == undefined) {
          app.globalData.hasLogin = false;
          util.showErrorToast('微信登录失败');
          return;
        }
        user.checkLogin().catch(() => {
            user.loginByWeixin(e.detail.userInfo).then(res => {
              app.globalData.hasLogin = true;
              wx.navigateBack({
                delta: 1
              })
            }).catch((err) => {
              app.globalData.hasLogin = false;
              if(err.errMsg=="request:fail timeout"){
                util.showErrorToast('微信登录超时');
              }else{
                util.showErrorToast('微信登录失败');
              }
            });
      
          });
    },
    accountLogin() {
        console.log('开发中....')
    }

})

El usuario obtiene información

página

<!--pages/ucenter/user/user.wxml-->
<form bindsubmit="formSubmit">
    <view class='personal-data'>
        <view class='list'>
            <view class='item acea-row row-between-wrapper'>
                <view>头像</view>
                <view class='pictrue'>
                    <image src='{
    
    {userInfo.avatarUrl}}'></image>
                </view>
            </view>
            <view class='item acea-row row-between-wrapper'>
                <view>名字</view>
                <view class='input'><input type='text' disabled='true' name='nickname' value='{
    
    {userInfo.nickName}}'></input></view>
            </view>
            <view class='item acea-row row-between-wrapper'>
                <view>手机号码</view>
                <button name='phone' class='phone' value='{
    
    {userInfo.phone}}' wx:if="{
    
    {!userInfo.phone}}" bindgetphonenumber="getPhoneNumber" hover-class='none' open-type='getPhoneNumber'>
                    点击获取
                </button>
                <view class='input acea-row row-between-wrapper' wx:else>
                    <input type='text' disabled='true' name='phone' value='{
    
    {userInfo.phone}}' class='id'></input>
                    <text class='iconfont icon-suozi'></text>
                </view>
            </view>

            <view class='item acea-row row-between-wrapper'>
                <view>ID号</view>
                <view class='input acea-row row-between-wrapper'>
                    <input type='text' value='1000{
    
    {userInfo.userId}}' disabled='true' class='id'></input>
                    <text class='iconfont icon-suozi'></text>
                </view>
            </view>
        </view>
        <button class='modifyBnt' bindtap="exitLogin">退 出</button>
    </view>
</form>

Obtener información del usuario

  onShow: function () {
    let that = this;
    //获取用户的登录信息
    let userInfo = wx.getStorageSync('userInfo');
    this.setData({
      userInfo: userInfo,
      hasLogin: true
    });

  }