微信登陆Web应用解决方案

最新推荐文章于 2024-04-18 16:26:03 发布
最新推荐文章于 2024-04-18 16:26:03 发布
阅读量1.4w 收藏 14
点赞数 3
分类专栏： 微信 走向架构师 文章标签： 微信 解决方案 web应用 技术 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013410747/article/details/50684748
版权

1.PC端

这里写图片描述

2.移动端

这里写图片描述

3.接入流程参考微信登录Web技术接入参考

注意写入事物回滚机制（因为涉及到操作多张表避免问题,)

接入微信登陆参考代码

1.微信开放平台回调函数

/**
     * @param code  微信开放平台重定向这里，携带的code码
     * @param state 来自PC端还是Mobile端
     *
     * @author simon
     * @date 2016/02/24
     */
    @GET
    @Path("wxlogin")
    public void wxlogin(@QueryParam("code") String code,
                                @QueryParam("state") String state,
                                @Context HttpServletRequest request,
                                @Context HttpServletResponse response) throws Exception {
        if (!StringUtils.isEmpty(code)) {
            //1.根据code请求access_token
            Map<String, Object> map = CodeUtils.get_access_token(code);
            String access_token = map.get("access_token").toString();
            String openid = map.get("openid").toString();
            //2.使用access_token去请求用户信息
            Map<String, Object> userinfoMap = CodeUtils.get_userinfo(access_token, openid);
            if (LuoboAppContext.currentUser() != null) {
                WeichatBind weichatBind = new WeichatBind();
                weichatBind.setUnionid(userinfoMap.get("unionid").toString());
                weichatBind.setUserId(LuoboAppContext.currentUser().getId());
                userService.createBind(weichatBind);//完成绑定
                if(state.equals("01")){
                    response.sendRedirect("http://www.jkgst.com/main.html#!/user/base");//重定向到PC端页面
                }else{
                    response.sendRedirect("http://www.jkgst.com/m/#!/user/base");//重定向到移动端页面
                }
            } else {
                //当前为登陆操作,去绑定表查询该微信号是否已经绑定过
                WeichatBind weichatBind = userService.getByUnionid(userinfoMap.get("unionid").toString());
                if (weichatBind != null) {
                    //用户已经绑定过
                    User user = userService.findById(weichatBind.getUserId());
                    //完成模拟登陆,重定向到主页面即可
                    autoLogin(request,response,user.getUsername(),state);
                } else {
                    //用户第一次绑定,先去绑定手机号,先把userinfoMap放入session中
                    request.getSession().setAttribute("userinfoMap", userinfoMap);
                    //重定向到绑定手机号页面
                    if(state.equals("01")){
                        //来自PC
                        response.sendRedirect("http://www.jkgst.com/main.html#!/bind");//去PC页面完成绑定
                    }else{
                        //来自移动端
                        response.sendRedirect("http://www.jkgst.com/m/#!/bind");//去手机页面完成绑定
                    }
                }
            }
        }
    }

2.后端自动登陆

/**
     * 后端自动登陆
     *
     * @param type  PC 或 Mobile
     *
     * @author simon
     * @date 2016/02/26
     * */
    public void autoLogin(HttpServletRequest request,
                          HttpServletResponse response,String username,String type)
            throws Exception {
        ObjectWriter viewWriter = this.mapper.writerWithView(JsonViews.Self.class);
        ResponseBean rb = new ResponseBean();
        try {
            UserDetails userDetails = this.userDetailsService.loadUserByUsername(username);
            UsernamePasswordAuthenticationToken authenticationToken =
                    new UsernamePasswordAuthenticationToken(username, "",userDetails.getAuthorities());
            //Authentication authentication = this.authManager.authenticate(authenticationToken);
            SecurityContextHolder.getContext().setAuthentication(authenticationToken);
            /*
             * Reload user as password of authentication principal will be null after authorization and
             * password is needed for token generation
             */
//          String ip = request.getRemoteAddr();
//          String token = TokenUtils.createToken(userDetails , ip);
            try {
                UserAgent userAgent = UserAgent.parseUserAgentString(request.getHeader("User-Agent"));
                LoginLog  ll        = new LoginLog();
                ll.setUserId(((User) userDetails).getId());
                ll.setIpAddress(request.getRemoteAddr());
                ll.setLoginTime(new Date());
                ll.setBrowser(userAgent.getBrowser().getName());
                ll.setDevice(userAgent.getOperatingSystem().getDeviceType().getName());
                loginLogDao.save(ll);
            } catch (Exception e) {
                logger.error("fail to save login log", e);
                e.printStackTrace();
            }
            //ADD TO SESSION
            request.getSession().setAttribute(Constants.Authentication.CURRENT_USER, userDetails);
            List<Map> menuList = new ArrayList<Map>();
            if (type != null && !"".equals(type)) {
                User user=(User) userDetails;
                menuList = menuDao.findByUser(user, type);
            }
            rb.setData(MapUtils.asMap(MapUtils.any("user", userDetails), MapUtils.any("menus", menuList)));//MapUtils.any("token", token),
            String  userinfo   =   URLEncoder.encode(viewWriter.writeValueAsString(userDetails),   "utf-8");
            Cookie cookie=new Cookie("user",userinfo);
            cookie.setPath("/");
            response.addCookie(cookie);

         } catch (Exception e) {
            logger.error("faile to login", e);
            rb.setMessage(100001, "username or password is invalid.");
        }finally {
            rb.setData(true);
            response.getWriter().print(rb);//返回响应信息
        }
    }

3.读取用户的微信绑定状态

/**
     * 读取用户的微信绑定状态
     *
     * @author simon
     * @date 2016/02/25
     */
    @GET
    @Produces(MediaType.APPLICATION_JSON)
    @Path("weichatState")
    public ResponseBean weichatState() {
        ResponseBean responseBean = new ResponseBean();
        try{
            //根据当前登陆的用户id找到对应的绑定表的信息
            WeichatBind weichatBind = userService.getByUserId(LuoboAppContext.currentUser().getId());
            if(weichatBind!=null)
                responseBean.setData(weichatBind);
            else
                responseBean.setErrorCode(-1);
        }catch (Exception e){
            responseBean.setErrorCode(-1);
        }
        return responseBean;
    }

4.用户取消绑定微信号

/**
     * 用户取消绑定微信号
     *
     * @author simon
     * @date   2016/02/25
     */
    @GET
    @Produces(MediaType.APPLICATION_JSON)
    @Path("unbind")
    public ResponseBean UnBindWeixin() {
        ResponseBean responseBean = new ResponseBean();
        //根据当前登陆的用户id找到对应的绑定表的信息
        try {
            WeichatBind weichatBind = userService.getByUserId(LuoboAppContext.currentUser().getId());
            userService.removeBind(weichatBind.getId());
        }catch (Exception e){
            responseBean.setErrorCode(-1);
        }
        return responseBean;
    }

5.用户绑定手机号

/**
     * @描述  用户绑定手机号
     *
     * @param mobileNo 绑定的手机号
     * @param type     PC 或 Mobile
     *
     * @author simon
     * @date 2016/02/29
     */
    @GET
    @Path("bind")
    public void BindWeixin(@QueryParam("mobileNo") Long mobileNo,
                                   @Context HttpServletRequest request,
                                   @Context HttpServletResponse response,
                                   @QueryParam("type") String type) throws  Exception {
        //1.根据要绑定的手机号信息找对应的user信息
        User user = userService.getUserByMobileNo(mobileNo);
        //2.从session获得在上一步中放入
        Map<String, Object> userinfoMap = (Map<String, Object>)request.getSession().getAttribute("userinfoMap");
        if(userinfoMap==null){
            ResponseBean responseBean=new ResponseBean();
            responseBean.setErrorCode(-2);
            response.getWriter().print(responseBean);//出现异常
            return;
        }
        if(user==null){//用户不存在,要生成账号
            User newuser=new User();
            newuser.setMobileNo(mobileNo);
            newuser.setName(userinfoMap.get("nickname").toString());
            newuser.setEnabled(true);
            newuser.setStatus("1");
            if(type.equals("PC")){
                newuser.setRegDevice("01");
            }else{
                newuser.setRegDevice("02");
            }
            newuser.setUsername(""+mobileNo);
            String password=CodeUtils.generateRandomString(6);//随机密码
            newuser.setPassword(this.passwordEncoder.encode(password));
            newuser.addRole(Constants.Role.USER);
            user= this.userDao.save(newuser);//生成账号
            //微信登陆注册成功计算获得积分
            try {
                int obtainPoints = pointsService.calculatePointsForUserRegister(user.getId());
            } catch (Exception e) {
                logger.error("error occurs: ", e);
                // 记录错误日志
            }
            // 注册成功的同时，新增一个对应的简历记录
            MicroCv cv = new MicroCv();
            cv.setUserId(user.getId());
            cv.setName(user.getName());
            cv.setPhone(user.getMobileNo());
            cv.setEmail(user.getEmail());
            cv.setIsSelf(true);
            microCvDao.save(cv);
            //注册成功的同时，要新增一个对应的积分记录
            //如果注册时带了邀请码，则给邀请人加积分
//          if (!StringUtils.isEmpty(bean.getToken())) {
//                try {
//                    pointsService.calculatePointsForInviteRegister(bean.getToken(), user.getName(), String.valueOf(user.getMobileNo()));
//                } catch (Exception e) {
//                    logger.error("error occurs: ", e);
//                    // 记录错误日志
//                }
//           }
            WeichatBind weichatBind = new WeichatBind();
            weichatBind.setUnionid(userinfoMap.get("unionid").toString());
            weichatBind.setUserId(user.getId());
            //完成绑定
            WeichatBind weichatBind1=userService.createBind(weichatBind);
            //完成模拟登陆
            autoLogin(request,response,user.getUsername(),type);
        }else{
            //已经存在,找到账号完成绑定，再模拟登陆
            WeichatBind weichatBind = new WeichatBind();
            weichatBind.setUnionid(userinfoMap.get("unionid").toString());
            weichatBind.setUserId(user.getId());
            WeichatBind weichatBind1=userService.createBind(weichatBind);//3.完成绑定
            //完成模拟登陆
            if(type.equals("PC")){
                autoLogin(request,response,user.getUsername(),"PC");
            }else{
                autoLogin(request,response,user.getUsername(),null);
            }
        }
    }

6.与微信平台交互的代码

package com.bigluobo.utils;

import com.google.gson.*;
import com.google.gson.reflect.TypeToken;

import java.io.*;
import java.net.*;
import java.util.*;

/**
 * Created by Henry on 2015/12/15.
 */
public class CodeUtils {
    private  static  final  String   appid="******************";
    private  static  final  String   secret="******************";

    //获得随机值
    public static final String generateRandomString(int length) {
        String allChar = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
        StringBuffer sb = new StringBuffer();
        Random random = new Random();
        for (int i = 0; i < length; i++) {
            sb.append(allChar.charAt(random.nextInt(allChar.length())));
        }
        return sb.toString();
    }

    /**
     * 通过code向微信开放平台请求access_token
     *
     * @param code
     *
     */
    public static Map<String,Object>  get_access_token(String code) {
        //拼接请求access_token的链接
        String url = "https://api.weixin.qq.com/sns/oauth2/access_token";

        String params="appid="+appid+"&secret="+secret+"&code="+
                code+"&grant_type=authorization_code";

        String resultJson = sendGet(url, params);
        Map<String,Object> map = parseData(resultJson);//将返回的json数据转换为Map结构存储
        /*示例:
        *{
            "access_token":"ACCESS_TOKEN",
            "expires_in":7200,
            "refresh_token":"REFRESH_TOKEN",
            "openid":"OPENID",
            "scope":"SCOPE",
            "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
            }
        * */
        return map;
    }
    /**
     * 函数名称: refresh_access_token
     *
     * 函数描述: access_token超时,使用refresh_token重新获得一个access_token
     *
     * @param   refresh_token
     * @return  Map<String, String>
     */
    public static Map<String,Object> refresh_access_token(String refresh_token){
        //access_token超时,此时需要重新获得一个access_token。
        String url_access="https://api.weixin.qq.com/sns/oauth2/refresh_token";

        StringBuffer params_access=new StringBuffer()
                .append("appid=").append(appid)
                .append("&grant_type=refresh_token")
                .append("&refresh_token=").append(refresh_token);
        String resultJson=sendGet(url_access,params_access.toString());
        Map<String,Object> map = parseData(resultJson);//将返回的json数据转换为Map结构存储
        /*
        * {
            "access_token":"ACCESS_TOKEN",
            "expires_in":7200,
            "refresh_token":"REFRESH_TOKEN",
            "openid":"OPENID",
            "scope":"SCOPE"
           }
        * */
        return map;
    }

    /**
     * 函数名称: get_userinfo
     *
     * 函数描述: 通过access_token去获取用户的信息
     *
     * @param   access_token
     * @return  Map<String, String>
     */
    public static Map<String,Object> get_userinfo(String access_token,String openid){
        //access_token超时,此时需要重新获得一个access_token。
        String url_userinfo="https://api.weixin.qq.com/sns/userinfo";
        StringBuffer params_userinfo=new StringBuffer()
                .append("access_token=").append(access_token)
                .append("&openid=").append(openid);
        String resultJson=sendGet(url_userinfo,params_userinfo.toString());
        Map<String,Object> map = parseData(resultJson);//将返回的json数据转换为Map结构存储
        if(map.size()>3){
            //已经正确获取到用户信息
            /*
            * {
                "openid":"OPENID",
                "nickname":"NICKNAME",
                "sex":1,
                "province":"PROVINCE",
                "city":"CITY",
                "country":"COUNTRY",
                "headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
                "privilege":[
                "PRIVILEGE1",
                "PRIVILEGE2"
                ],
                "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"
              }
            * */
            return map;
        }else{
            if(map.get("errcode").equals("42001")){
                //access_token超时,需要重新获得access_token超时，再请求用户信息
                Map<String,Object> map1= refresh_access_token(access_token);
                String access_token2=map1.get("access_token").toString();
                String openid2=map1.get("openid").toString();
                //刷新以后重新获取用户的信息
                get_userinfo(access_token2,openid2);
            }
        }
        return map;
    }

    /**
     * 函数名称: parseData
     * 函数描述: 将json字符串转换为Map<String, String>结构
     *
     * @param   data
     * @return  Map<String, String>
     */
    private static Map<String, Object> parseData(String data) {
        GsonBuilder gb = new GsonBuilder();
        Gson g = gb.create();
        Map<String, Object> map = g.fromJson(data, new TypeToken<Map<String, Object>>() {
        }.getType());
        return map;
    }


    /**
     * 向指定URL发送GET方法的请求
     *
     * @param url   发送请求的URL
     * @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。
     * @return URL 所代表远程资源的响应结果
     */
    public static String sendGet(String url, String param) {
        String result = "";
        BufferedReader in = null;
        try {
            String urlNameString = url + "?" + param;
            URL realUrl = new URL(urlNameString);
            // 打开和URL之间的连接
            URLConnection connection = realUrl.openConnection();
            // 设置通用的请求属性
            connection.setRequestProperty("accept", "*/*");
            connection.setRequestProperty("connection", "Keep-Alive");
            connection.setRequestProperty("user-agent",
                    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
            // 建立实际的连接
            connection.connect();
            // 获取所有响应头字段
            Map<String, List<String>> map = connection.getHeaderFields();

            // 定义 BufferedReader输入流来读取URL的响应
            in = new BufferedReader(new InputStreamReader(
                    connection.getInputStream()));
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
        } catch (Exception e) {
            System.out.println("发送GET请求出现异常！" + e);
            e.printStackTrace();
        }
        // 使用finally块来关闭输入流
        finally {
            try {
                if (in != null) {
                    in.close();
                }
            } catch (Exception e2) {
                e2.printStackTrace();
            }
        }
        return result;
    }
}
一缕阳光直射你的心扉
关注
专栏目录
Vue2 - 详解实现网站接入微信扫码登录功能，微信授权生成登录二维码用户用手机扫描二维码登陆，微信扫描二维码登录详细流程及示例代码，支持弹框式、浏览器单独新开页显示，最新vue集成微信扫码授权登录！
王佳斌
06-25 2205
vue2，nuxt2，PC网站，网页，微信扫码登录，微信登陆，vue2微信扫码登录，获取个人信息，扫码登录后如何获取用户手机号，微信扫码授权登录，vue2详细实现微信扫一扫登陆，pc网页微信登录，vue集成微信扫码登录，详细流程和示例源码，第三方扫码登录，vue微信扫码登录怎么新开一页，跳页显示二维码，内嵌登录二维码，iframe，iframe新页面弹出，弹出一个小窗口显示登录二维码，登录报错，微信扫码没反应，解决手机点登录报错没反应，官方文档，手机扫描微信二维码登录网站，最好用的插件，vue-wxlogi
微信小程序http连接访问解决方案的示例
12-01
这可以通过编写一个Web项目实现，例如使用Java的HttpURLConnection类来处理网络请求。以下是一个简单的Java代码示例，展示了如何通过POST方法发送请求： ```java public class RequestProxy { public static ...
Web端微信授权登录
weixin_42289080的博客
10-21 2330
web端微信授权登录，根据使用的场景不同，有以下几种情况 一、web端跳转外链 web端直接 跳转微信外链 ，在外链中扫描二维码后，带上token重定向到指定页面 二、web端内嵌微信外链的二维码 web端 内嵌微信外链 的二维码（用户体验更好），使用微信的js库，传入指定参数，即可在指定容器中生成对应的二维码 三、 web端内嵌小程序码 web端 内嵌小程序码 ，扫描之后跳转小程序对应的页面，在小程序中处理登录逻辑，并在web端轮询拿到登录状态（可以同时实现小程序和web的登录，并且有利用小程序的推广）
web项目web接入微信登录
mengxinxuexi的博客
09-01 4537
最近写了一个简单的微信第三方登录功能，存粹分享下心得和体会 首先需要APPID和SCRECT还有回调域（第三方地址，一般是公司的域名）（域名解析）， 获取步骤是： a.在微信开放平台https://open.weixin.qq.com/经过注册成为开发者。 b.在“管理中心”中创建一个移动应用来提交审核 之后是微信登录流程： 简单用例子来说就是：首先要分辨是第一次登录还是不是第一次登录，是前端传过来的授权临时票据code和appid和secrect来进行操作， 再在wxuser表...
web项目接入微信登录
lllj123的博客
09-02 1033
最近写了一个简单的微信第三方登录功能，存粹分享下心得和体会 先上代码 /*微信登录*/ @Override public AjaxResult wechat(Map<String, String> map) { String code = map.get("code"); if (StringUtils.isEmpty(code)){//为空 throw new MyException("系统异常。。。"); } //通过code，appid...
pc端web网站使用第三方微信登录流程（web、js）
qiansitong的博客
02-19 5238
网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。
web端第三方微信登录
weixin_42065671的博客
07-23 2800
最近接触了下微信登录，抽出空写下这次做微信登录的整个过程吧（包括自己遇到的坑），当做笔记记录下， 我所做的是第三方网站的微信登录，（也就是呢，用户通过扫描我们系统登录页面的微信二维码授权后登录到我们系统） 这里我就不讲怎么通过微信开放平台申请域名授权之类的了（这些都是我们的大boss操作申请的，完事了 域名告诉我我搞得） 好了 正式开始步入正题哈！！！ ..................
web端微信授权登录处理(同适用于H5)
最新发布
more_better的博客
04-18 1878
微信网页授权文档。
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库
12-28
WeUI 是一款由微信官方设计团队精心打造的UI库，专为微信移动Web应用而设计。这个库的目标是提供一套符合微信平台设计规范、简洁易用的组件和样式，帮助开发者快速构建出与微信风格一致的高质量应用界面，提升用户...
微信小程序云端解决方案探索之路-GITC主题演讲.docx
10-26
然而，相较于传统的Web应用，微信小程序在技术实现上存在诸多不同之处，尤其是在云端解决方案方面。本文将基于“微信小程序云端解决方案探索之路—GITC主题演讲”的内容，深入探讨微信小程序的特性及其对云端解决...
一个致力于微信小程序和Web端同构的解决方案
01-20
kbone 是一个致力于微信小程序和 Web 端同构的解决方案。 简介 微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题，它实现了一个...
微信授权登陆（Android）
01-19
配合博客使用的一个Demo，使用前请将Android SDK以及依赖包升级到最新
微信登录代码Demo
09-22
微信登录demo。可以直接打开运行。需要创建微信应用，获取app_id和App_secret。demo采用的是springmvc框架。
Android应用微信授权登录demo
02-21
自己动手，丰衣足食。网上下的各种不行，这是我公司项目的微信授权登录的技术预演，包括json的解析，
一个致力于微信小程序和 Web 端同构的解决方案.zip
02-21
标题中的“微信小程序和Web端同构的解决方案”是指一种技术策略，旨在让微信小程序与Web应用程序使用相同的代码库进行开发，实现两端的共享代码和一致的用户体验。这种方案能够提高开发效率，减少维护成本，并使得...
【第三方登录】微信web扫一扫登录步骤
qq_43813351的博客
10-26 2270
绑定第三方应用或网站，然而，注册、认证、绑定网站走完才能用这个微信扫码登录功能，注意：需要一次性交300元的认证费。一般来说只有企业才做这样的事情，如果是个人建议看看就行。后端能拿到个人信息，其实就已经完成了，接下来就看具体的个人业务需求了。注册一个“微信开发平台”账号、认证账号、绑定一个网站。打开如下：注意这个回调域名，要和前端vue上的一致。截止与2023年10月26日前，微信登录需要在。在vue的index.html文件中添加。实现用微信扫一扫，登录网站。页面会出现一个二维码。
微信获取用户信息的两个接口和两个ACCESS_TOKEN
weixin_30729609的博客
11-16 856
有一段时间没有搞微信开发了 ，今天突然要改一下程序！ 回头一看 微信的帮助文档太tm的稀烂的，太难懂了，这做个笔记以后看着方便 微信有2个ACCESS_TOKEN， 1，基础接口的token 获取接口是 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&am...
微信第三方登录接口
热门推荐
a-xiaoqiang的博客
05-08 2万+
随着手机微信的崛起，腾讯发布的微信联登确实很诱惑pc端的伙伴们，现在就说说在pc端用微信扫一扫实现微信第三方登陆的方式。  第一步：获取AppID AppSecret(不做解释，自己去微信公众平台申请)第二步：生成扫描二维码，获取codehttps://open.weixin.qq.com/connect/qrconnect?appid=AppID&amp;redirect_uri=http://...
如何使用微信小程序。
weixin_46597615的博客
06-28 136
【代码】如何使用微信小程序。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一缕阳光直射你的心扉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值