[Inicio de sesión de Wechat] Inicio de sesión del código de escaneo de Wechat para la aplicación / sitio web

Tabla de contenido

1. Documentación de desarrollo

1. Inicie sesión en WeChat en la aplicación de aplicación móvil (Android / Apple)

2. Inicio de sesión con código de escaneo WeChat en la aplicación del sitio web

3. Solicite una cuenta en la plataforma abierta WeChat

Dos, desarrollo de interfaz empresarial

1. Configuración

2. El primer paso: solicitar CÓDIGO

3. Paso 2: Obtenga access_token a través del código

4. Método de herramienta

5. Prueba

1. Documentación de desarrollo

1. Inicie sesión en WeChat en la aplicación de aplicación móvil (Android / Apple)

Listo para trabajar

El inicio de sesión de la aplicación móvil WeChat es un sistema de inicio de sesión autorizado WeChat OAuth2.0 basado en el estándar de protocolo OAuth2.0 .

Antes de realizar el acceso de inicio de sesión autorizado WeChat OAuth2.0, registre una cuenta de desarrollador en la plataforma abierta de WeChat, tenga una aplicación móvil aprobada y obtenga el AppID y AppSecret correspondientes. Después de solicitar el inicio de sesión de WeChat y pasar la auditoría, puede comenzar a acceder En el proceso .

En la actualidad, el inicio de sesión de WeChat en aplicaciones móviles solo proporciona métodos de inicio de sesión nativos, que requieren que los usuarios instalen un cliente de WeChat para cooperar.
Para las aplicaciones de Android, se recomienda mostrar siempre el botón de inicio de sesión de WeChat. Cuando el cliente de WeChat no está instalado en el teléfono móvil del usuario, guíe al usuario para que descargue e instale el cliente de WeChat.
Para las aplicaciones de iOS, considerando las regulaciones relevantes en las Pautas de revisión de la App Store de iOS, se recomienda que los desarrolladores primero verifiquen el teléfono móvil del usuario al iniciar sesión en WeChat.

Descripción del proceso de autorización

El inicio de sesión autorizado de WeChat OAuth2.0 permite a los usuarios de WeChat iniciar sesión de forma segura en aplicaciones o sitios web de terceros utilizando la identidad de WeChat. Una vez que el usuario de WeChat está autorizado a iniciar sesión en aplicaciones de terceros que tienen acceso a WeChat OAuth2.0, el tercero puede obtener las credenciales de llamada de la interfaz del usuario ( access_token) ), a través de access_token, podemos llamar a la interfaz de relación de autorización de la plataforma abierta WeChat, para obtener información abierta básica de los usuarios de WeChat y ayudar a los usuarios a realizar funciones abiertas básicas.

El inicio de sesión autorizado de WeChat OAuth2.0 actualmente admite el modo de código de autorización, que es adecuado para la autorización de aplicaciones con el lado del servidor. El proceso general de este modelo es:

El tercero inicia una solicitud de inicio de sesión de autorización de WeChat. Una vez que el usuario de WeChat permite que se autorice la aplicación de un tercero, WeChat iniciará la aplicación o la redireccionará al sitio web del tercero y traerá el parámetro de código de ticket temporal de autorización;
Agregue AppID y AppSecret a través del parámetro de código e intercambie por access_token a través de API;
Las llamadas de interfaz se realizan a través de access_token para obtener recursos de datos básicos del usuario o ayudar a los usuarios a implementar operaciones básicas.

Obtenga el diagrama de secuencia de access_token:

Nota: consulte el documento oficial de desarrollo del sitio web para obtener más detalles, aquí hay solo un extracto: https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_Login/Development_Guide.html

2. Inicio de sesión con código de escaneo WeChat en la aplicación del sitio web

El inicio de sesión de WeChat de la aplicación del sitio web es un sistema de inicio de sesión autorizado WeChat OAuth2.0 basado en el protocolo estándar OAuth2.0. Antes de realizar el acceso de inicio de sesión de autorización de WeChat OAuth2.0, registre una cuenta de desarrollador en la plataforma abierta de WeChat, tenga una aplicación de sitio web aprobada y obtenga el AppID y AppSecret correspondientes . Después de solicitar el inicio de sesión de WeChat y pasar la auditoría, puede comenzar a acceder En el proceso.

El terminal de PC es realmente similar al terminal de aplicación móvil. Cuando desarrollamos el back-end, proporcionamos una interfaz unificada para los terminales de PC y APP. Algunas diferencias se tratan en la capa de lógica empresarial específica. Para conectarse a WeChat, consulte el sitio web oficial: https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

3. Solicite una cuenta en la plataforma abierta WeChat

En el documento de desarrollo anterior para la interfaz de inicio de sesión de WeChat, el trabajo de preparación ha indicado claramente: Antes del acceso de inicio de sesión autorizado de WeChat OAuth2.0, registre una cuenta de desarrollador en la plataforma abierta de WeChat y tenga una aplicación móvil / aplicación web aprobada. Y obtenga el AppID y AppSecret correspondientes, solicite el inicio de sesión de WeChat y pase la revisión, puede comenzar el proceso de acceso. Para obtener más detalles, inicie sesión para postularse: https://open.weixin.qq.com/

La siguiente es una aplicación de sitio web que he solicitado aprobación. Simplemente créala paso a paso y complétala paso a paso. El dominio de devolución de llamada autorizado final puede escribir el nombre de dominio de tu sitio web, sin agregar http o https, como: www.baidu.com

Dos, desarrollo de interfaz empresarial

Nota: Debido a que el front-end y el back-end están separados, aquí solo se muestra el proceso de desarrollo empresarial que proporciona interfaces back-end.

El proyecto se construye usando SpringBoot , y el centro de configuración y el centro de registro usan nacos , y cierta información de configuración se puede colocar en nacos.

1. Configuración

(1) Aplicación de sitio web-PC

Coloque la información relevante de la aplicación del sitio web (PC) solicitada en la plataforma abierta WeChat en el archivo de configuración (appId, appSercet, etc.). Por supuesto, la dirección de la interfaz de WeChat es básicamente fija y también se puede escribir en la clase constante.

Entre ellos, la configuración de callBack es la dirección de devolución de llamada (dirección de red pública) después de obtener el código autorizado por WeChat, que puede ser una interfaz de back-end o una interfaz de front-end (el front-end y el back-end están separados, y el back-end es ajustado por el front-end).

(2) Aplicaciones móviles-Android, IOS

Entre ellos, la dirección de la interfaz de WeChat es la misma que la del PC, por lo que no es necesario configurar

2. El primer paso: solicitar CÓDIGO

La información de configuración aquí se obtiene y proporciona de manera uniforme por la interfaz de back-end, sin el front-end codificado, de modo que pueda modificar directamente el centro de configuración en el futuro; luego, el front-end inicia una llamada a la parte de WeChat. Una vez que el usuario está autorizado, volverá a llamar y devolverá el código .

(1) Aplicación de sitio web-PC

    /**
     * pc端获取微信二维码地址
     * <p>
     * 返回code地址等参数给前端,由前端js请求跳转二维码
     * 用户扫码确认授权后，微信会回调返回code、state
     * <p>
     *
     * @return
     * @throws
     */
    @RequestMapping("/pc/weixin/login/getCodeUrl")
    public Result getCodeUrl() throws Exception {
        //String codeUrl = "https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE";
        String codeUrl = pcConfig.getCodeUrl();

        // state用于保持请求和回调的状态，授权请求后原样带回给第三方。
        // 该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
        // 注：这里采用AES加密,使用当前时间作为明文加密，x小时内有效
        String encryptState = AesUtils.encrypt(DateUtils.getNowYYYYMMdd(), AesUtils.getAssetsDevPwdField());

        Map<String,String> map = new HashMap<>();
        map.put("appId",pcConfig.getAppId());
        map.put("redirectUrl",pcConfig.getCallBack());
        map.put("scope",pcConfig.getScope());
        map.put("state",encryptState);
        map.put("codeUrl",codeUrl);

        return Result.success(map);
    }

(2) Aplicaciones móviles-Android, IOS

    /**
     * APP获取移动应用的appId等配置
     *
     * @return
     * @throws
     */
    @RequestMapping("/app/weixin/login/getAppConfig")
    public Result getAppConfig() throws Exception {

        String appId = appConfig.getAppId();

        // 采用AES加密,使用当前时间作为明文加密，x小时内有效
        String encryptState = AesUtils.encrypt(DateUtils.getNowYYYYMMdd(), AesUtils.getAssetsDevPwdField());
        Map<String, String> map = new HashMap<>();
        map.put("appId", appId);
        map.put("state", encryptState);

        return Result.success(map);
    }

Cuando el usuario autoriza a WeChat a iniciar sesión, WeChat devolverá la llamada y devolverá el código y el estado

Descripción de devolución

Después de que el usuario permita la autorización, será redirigido a la URL de redirect_uri (es decir, el callBack que configuramos anteriormente) con el código y los parámetros de estado.

redirect_uri?code=CODE&state=STATE

Si el usuario prohíbe la autorización, el parámetro de código no se tomará después de la redirección, solo se tomará el parámetro de estado

redirect_uri?state=STATE

3. Paso 2: Obtenga access_token a través del código

Obtenga access_token a través del código

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

Descripción de parámetros

parámetro	Tienes que	Descripción
appid	si	La identificación única de la aplicación, que se obtiene después de que la aplicación se revisa y aprueba en la plataforma abierta WeChat.
secreto	si	App Secret AppSecret, obtenida después de enviar la solicitud para su aprobación en la plataforma abierta WeChat
código	si	Complete los parámetros del código obtenidos en el primer paso
grant_type	si	填 código_autorización

Debido a que el proyecto utiliza separación de front-end y back-end, la dirección de devolución de llamada de callBack en el lado de la PC aquí es la dirección de front-end completada, y el front-end llama a la interfaz de back-end ( / weixin / login / callBack )

Proceso general : autorización de usuario ---> código ---> obtener access_token, openid, etc .---> obtener información básica de los usuarios de WeChat ---> registrarse / iniciar sesión

    /**
     * 授权回调，微信返回code、state---【PC端、APP端公用】
     * <p>
     * 1、然后通过code、appid、secret去请求获取access_token、openid
     * 2、最后通过access_token、openid去获取用户信息（unionid）
     * <p>
     */
    @RequestMapping("/weixin/login/callBack")
    public Result callBack(@RequestBody WeixinLoginDTO dto, HttpServletRequest request) throws Exception {
        log.info("【微信登录】回调,code:{},state:{}", dto.getCode(), dto.getState());

        try{
            // AES解密state
            boolean b = checkState(dto.getState());
            if(!b){
                log.error("【微信登录】回调异常，state已失效或被篡改：{}", dto.getState());
                return Result.error(ResultCode.STATE_IS_INVALID);
            }

            // 先判断缓存中是否已存在（微信获取access_token的接口code只能使用一次）
            String weixinUserJson = (String) redisUtils.get(RedisPrefix.weixin_user_info, dto.getCode());
            if (StringUtils.isNotBlank(weixinUserJson)) {
                // 直接登录
                return this.weixinLogin(dto.getCode(),weixinUserJson, dto.getSource(), request);
            }

            //1.通过code获取access_token
            //String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";
            String accessTokenUrl = pcConfig.getAccessTokenUrl();

            if ("PC".equals(dto.getSource())) {//pc端
                accessTokenUrl = accessTokenUrl.replace("APPID", pcConfig.getAppId()).replace("SECRET", pcConfig.getAppSecret()).replace("CODE", dto.getCode());
            } else {// app端
                accessTokenUrl = accessTokenUrl.replace("APPID", appConfig.getAppId()).replace("SECRET", appConfig.getAppSecret()).replace("CODE", dto.getCode());
            }

            HttpClientResult tokenResult = HttpClientUtils.doGet(accessTokenUrl);
            log.info("【微信登录】获取access_token结果：{}",tokenResult);
            if (200==tokenResult.getCode()) {
                JSONObject tokenInfoObject = JSON.parseObject(tokenResult.getContent());

                if (StringUtils.isNotEmpty(tokenInfoObject.getString("errcode"))) {
                    log.error("【微信登录】获取access_token失败：{}", tokenInfoObject.getString("errmsg"));
                    return Result.error(ResultCode.WEIXIN_LOGIN_ERROR);
                }

                //2.通过access_token和openid获取用户信息
                //String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID";
                String userInfoUrl = pcConfig.getUserInfoUrl();
                userInfoUrl = userInfoUrl.replace("ACCESS_TOKEN", tokenInfoObject.getString("access_token")).replace("OPENID", tokenInfoObject.getString("openid"));
                HttpClientResult weixinUserResult = HttpClientUtils.doGet(userInfoUrl);
                log.info("【微信登录】获取微信用户信息结果：{}",weixinUserResult);
                if (200==weixinUserResult.getCode()) {

                    JSONObject weixinUserObject = JSON.parseObject(weixinUserResult.getContent());

                    if (StringUtils.isNotEmpty(weixinUserObject.getString("errcode"))) {
                        log.error("【微信登录】获取微信用户信息失败：{}", weixinUserObject.getString("errmsg"));
                        return Result.error(ResultCode.WEIXIN_LOGIN_ERROR);
                    }
                    // todo 登录或注册
                    return this.weixinLogin(dto.getCode(),weixinUserResult.getContent(), dto.getSource(), request);
                }
            }
        }catch (Exception e){
            log.error("================【微信登录】回调接口异常:{}",e.getMessage());
        }
        log.error("【微信登录】回调失败！");
        return Result.error(ResultCode.WEIXIN_LOGIN_ERROR);
    }

Entre ellos, " todo inicio de sesión o registro " significa que necesita desarrollar una lógica empresarial de registro / inicio de sesión específica en función de sus necesidades comerciales.

Descripción de devolución: obtenga información del usuario a través de access_token y openid

El Json correcto devuelve el resultado:

{
    "openid":"OPENID",
    "nickname":"NICKNAME",
    "sex":1,
    "province":"PROVINCE",
    "city":"CITY",
    "country":"COUNTRY",
    "headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
    "privilege":[
        "PRIVILEGE1",
        "PRIVILEGE2"
    ],
    "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}

4. Método de herramienta

5. Prueba

Escanee el inicio de sesión autorizado en la PC para ver si se puede obtener la información del usuario de WeChat después de la devolución de llamada

Nota: Debido a la separación de front-end y back-end en el proyecto, este artículo solo proporciona instrucciones de desarrollo de la interfaz de back-end. El proceso general es similar. Para obtener parámetros de solicitud específicos e información de respuesta, consulte el sitio web oficial.

referencia:

https://open.weixin.qq.com/

https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html