Aplicación de cuenta de prueba de la plataforma pública WeChat, use las herramientas de desarrollo HBuilder X y WeChat para lograr la función de inicio de sesión autorizada y el inicio de sesión único

Solicitud de cuenta de prueba

Proceso de respuesta de medición de números: el cliente envía una solicitud y el servidor de WeChat reenvía la solicitud al servidor de desarrollo después de recibir la solicitud.Después del procesamiento, se envía al servidor de WeChat y luego se devuelve al cliente.

1. Abra la plataforma pública de WeChat y haga clic en Probar aplicación de cuenta. Dirección: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login,

Escanee la autorización a través de WeChat para ingresar a la página de administración del número de prueba. Puedes ver tu ID de desarrollador

La URL en el número de prueba debe tener su propio servidor para escribir la interfaz correspondiente. Haga clic para enviar WeChat enviará datos como la URL y juzgará si la URL está configurada correctamente de acuerdo con el resultado devuelto; el token es una cadena definida por usted mismo

Finalmente, escanee el código para agregar su WeChat como desarrollador

Descargue la herramienta de tránsito NATAPP: penetración de intranet Una herramienta de mapeo de intranet doméstica de alta velocidad basada en ngrok

Después de la descarga, regístrese en la página web, realice la autenticación con el nombre real, solicite un túnel gratuito, se generará la información del túnel y se activará natapp.

Ingrese el authtoken generado por la información del túnel natapp -authtoken y presione Enter

En este momento, se generará su propio nombre de dominio y deberá abrir siempre natapp durante la prueba.

Si tiene una cuenta oficial de empresa, entonces no necesita los pasos anteriores, puede configurar directamente el desarrollador WX

创建小程序测试：使用微信开发者工具通过扫码登陆，点击创建选择小程序即可，AppID为刚才申请的。选择需要编写的模板即可

Use las herramientas de desarrollo HBuilder X y WeChat para lograr la función de inicio de sesión autorizado

Primero, debe importar la plantilla del proyecto en HBuilder, configurar el directorio de las herramientas de desarrollo de WeChat en la configuración de seguridad y luego hacer clic para ejecutar el simulador de applet, de modo que las herramientas de desarrollo de WeChat se abran automáticamente después de ejecutarse.

Cree el código principal login.vue de la página de inicio de sesión, principalmente para llamar a la API proporcionada por WeChat para obtener el código del usuario, que también obtiene la información básica del usuario en el front-end y la envía al back-end.

<button class="confirm-btn" @click="wxlogin" :disabled="logining">登录</button>
//对应逻辑
methods: {
			wxlogin(){
			uni.getUserProfile({
					desc:"获取资料",
					success: (res) => {
						console.log(res)
						this.encryptedData=res.encryptedData
						this.rawData=res.rawData
						this.iv=res.iv
						this.signature=res.signature
						this.avatarUrl=res.userInfo.avatarUrl
						this.name=res.userInfo.nickName
					}
				});//获取用户资料
				uni.login({
				  provider: 'weixin',
				  success: (res) => {
					
					 this.code=res.code;
					// console.log(this.code);
					
				  }
				});
				console.log(this.name)
				console.log(this.avatarUrl)
				//发送请求
				uni.request({
					url:"http://localhost:8081/api/dsxs/company/token",
					method:"POST",
				 data: {
					// encryptedData:this.encryptedData,
					// rawData:this.rawData,
					// iv:this.iv,
					// signature:this.signature,
					code:this.code,
					img:this.avatarUrl,
					name:this.name
				    },
					success: (e) => {
						
						console.log("向后端请求成功");
					}
					
				})
			},

El backend puede obtener el openID y session_key del usuario a través del appID, appSecret y el código aplicados previamente desde el frontend

Cree un proyecto springboot y agregue dependencias

 <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>4.7.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--lombok用来简化实体类-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.3.1</version>
        </dependency>

        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.0</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

Después de configurar la clase de entidad y el código relacionado con los datos, coloque su appID y appSecret en el archivo de configuración

wx.open.app_id=xxxxxxxx
wx.open.app_secret=xxxxxxxxx

Crear una clase para obtener información de configuración

@Component
//@PropertySource("classpath:application.properties")
public class ConstantPropertiesUtil implements InitializingBean {
    //读取配置文件并赋值
    @Value("${wx.open.app_id}")
    private String appId;
    @Value("${wx.open.app_secret}")
    private String appSecret;

    public static String WX_OPEN_APP_ID;
    public static String WX_OPEN_APP_SECRET;

    @Override
    public void afterPropertiesSet() throws Exception {
        WX_OPEN_APP_ID = appId;
        WX_OPEN_APP_SECRET = appSecret;
    }
}

Escriba la capa de control de inicio de sesión del usuario.Mi lógica de implementación aquí es obtener el ID abierto del usuario como el identificador único del usuario de acuerdo con el código enviado desde el front-end. Primero, consulte la base de datos para saber si hay un usuario actual y cree un token para devolver la información correspondiente al front-end. Debido a que el front-end está escrito para pasar el código y la información del usuario al mismo tiempo, el usuario saltará a la página de autorización después de hacer clic para iniciar sesión. Si el usuario hace clic para rechazar, la información del usuario no se pasará, solo la código. En este momento, mi lógica de procesamiento es Se juzga si hay información del usuario. De lo contrario, no se almacena en la base de datos. Dado que el usuario hace clic en la autorización tendrá tiempo para responder, se realiza un breve proceso de hibernación.

public class LoginController {
    @Autowired
    private UserService userService;

    @PostMapping("token")
    public R login(@RequestBody LoginBO loginBO) throws IOException, InterruptedException {
    //拼接对应信息
        StringBuffer baseAccessTokenUrl = new StringBuffer()
                .append("https://api.weixin.qq.com/sns/jscode2session")
                .append("?appid=%s")
                .append("&secret=%s")
                .append("&js_code=%s")
                .append("&grant_type=authorization_code");
        String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),
                ConstantPropertiesUtil.WX_OPEN_APP_ID,
                ConstantPropertiesUtil.WX_OPEN_APP_SECRET,
                loginBO.getCode());
         //像网站发送请求
        OkHttpClient client = new OkHttpClient();
        Request request = new Request.Builder().url(accessTokenUrl).build();
        Response response = client.newCall(request).execute();
        //请求成功会返回对应信息，解析为json
        if (response.isSuccessful()){
            String body = response.body().string();
            JSONObject jsonObject = JSONObject.parseObject(body);
            String session_key = jsonObject.getString("session_key");
            String openid = jsonObject.getString("openid");
            HashMap<String, Object> map = new HashMap<>();
            Thread.sleep(1000);
            //判断数据中有无当前用户
            User userInfo = userService.getByOpenId(openid);
            if (userInfo==null){
                User user = new User();
                user.setOpenid(openid);

                if (loginBO.getName().equals("")){
                    return R.error().message("授权失败");
                }
                user.setNickName(loginBO.getName());
                user.setAvatarUrl(loginBO.getImg());
                user.setStat(1);
                userService.save(user);
                userInfo = userService.getByOpenId(openid);
            }
                String token = JwtHelper.createToken(userInfo.getOpenid(),userInfo.getNickName(),userInfo.getAvatarUrl());
                map.put("token",token);
                map.put("nickname",userInfo.getNickName());
                map.put("img",userInfo.getAvatarUrl());
                return R.ok().data(map);
        }
        return R.error().message("授权失败，请重试");
    }

Crear JWT para generar una clase de herramienta de token

public class JwtHelper {
    //过期时间  毫秒
    private static long tokenExpiration = 60*60*1000;
    //自定义秘钥
    private static String tokenSignKey = "123456";
    public static String createToken(String openid,String nickName,String img) {
        String token = Jwts.builder()
                //设置分组
                .setSubject("DSXS-USER")
                //设置字符串过期时间
                .setExpiration(new Date(System.currentTimeMillis() + tokenExpiration))
                //私有部分
                .claim("userId", openid)
                .claim("userName", nickName)
                .claim("img",img)
                //设置秘钥
                .signWith(SignatureAlgorithm.HS512, tokenSignKey)
                .compressWith(CompressionCodecs.GZIP)
                .compact();
        return token;
    }
    //从生成token字符串获取userId值
    public static String getUserId(String token) {
        if(StringUtils.isEmpty(token)) return null;
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        String userId = (String)claims.get("userId");
        return (String)claims.get("userId");
    }
    public static String getUserName(String token) {
        if(StringUtils.isEmpty(token)) return "";
        Jws<Claims> claimsJws
                = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("userName");
    }
    public static String getImg(String token) {
        if(StringUtils.isEmpty(token)) return "";
        Jws<Claims> claimsJws
                = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("img");
    }

Crear un método para obtener información del usuario basado en token

//根据token获取用户信息
    @GetMapping("auth/getUserInfo")
    public R getUserInfo(HttpServletRequest request) {
        try{
            String userId = AuthContextHolder.getUserId(request);
            String userName = AuthContextHolder.getUserName(request);
            String userImg = AuthContextHolder.getUserImg(request);
            User user = new User();
            user.setOpenid(userId);
            user.setNickName(userName);
            user.setAvatarUrl(userImg);
            return R.ok().data("userInfo",user);
        }catch (ExpiredJwtException e){
            System.out.println("token失效");
        }
        return R.error().message("token失效");
    }

Si hay otros métodos de implementación, bienvenido a discutir