网页实现微信登录

网页实现微信登录目录1OAuth21.1、OAuth2解决什么问题1.1.1、开放系统间授权1.1.2、图例1.1.3、方式一:用户名密码复制1.1.4、方式二:通用开发者key1.1.5、方式三:颁发令牌1.2、OAuth2简介1.2.1、OAuth主要角色1.2.2、最简向导1.3、OAuth2的应用1.3.1、微服务安全1.3.2、社交登录2生成授权URL2.1、准备工作2.1.1、注册2.1.2、邮箱激活2.1.3、完善开发者资料2.1.4、开发者资质认证2.1.5、创建网站应用2.1.6、熟悉微信登录流程2.

大家好,欢迎来到IT知识分享网。


1 生成授权URL

1.1 准备工作

https://open.weixin.qq.com

1、注册

2、邮箱激活

3、完善开发者资料

4、开发者资质认证

准备营业执照,1-2个工作日审批、300元

5、创建网站应用

提交审核,7个工作日审批

6、熟悉微信登录流程

参考文档:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=e547653f995d8f402704d5cb2945177dc8aa4e7e&lang=zh_CN

获取access_token时序图

在这里插入图片描述

1.2 后端开发

首先根据一个访问请求会生成一个二维码的图片,按照微信文档传入所需的值,之后扫描二维码会有一个回调的域名地址会调用本地的callback方法获得两个值,一个是state原样传递,还有一个code叫做临时票据随机且唯一,之后再去微信固定的地址获取access_token和openid这个openid就是每个人特有的和微信名字不一样,之后再拿着这两个值再去请求微信的固定地址就得到了扫码人的信息。之后给用户生成一个token用于登录访问其他应用,这里我们会帮他做一个注册到数据库,下次扫描就不必要再注册一边,因为你不注册就没法给用户绑定一些其他的权限。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1、添加配置

application.properties添加相关配置信息

# 微信开放平台 appid
wx.open.app_id=你的appid
# 微信开放平台 appsecret
wx.open.app_secret=你的appsecret
# 微信开放平台 重定向url
wx.open.redirect_url=http://你的服务器名称/api/ucenter/wx/callback

2、创建常量类

创建util包,创建ConstantPropertiesUtil.java常量类

package com.oldlu.ucenter.util;
@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;
    @Value("${wx.open.redirect_url}")
    private String redirectUrl;
    public static String WX_OPEN_APP_ID;
    public static String WX_OPEN_APP_SECRET;
    public static String WX_OPEN_REDIRECT_URL;
    @Override
    public void afterPropertiesSet() throws Exception { 
   
        WX_OPEN_APP_ID = appId;
        WX_OPEN_APP_SECRET = appSecret;
        WX_OPEN_REDIRECT_URL = redirectUrl;
    }
}

3、创建controller

oldlu-microservice-ucenter微服务中创建api包

api包中创建WxApiController

package com.oldlu.ucenter.controller.api;
@CrossOrigin
@Controller//注意这里没有配置 @RestController
@RequestMapping("/api/ucenter/wx")
public class WxApiController { 
   
    @GetMapping("login")
    public String genQrConnect(HttpSession session) { 
   
        // 微信开放平台授权baseUrl
        String baseUrl = "https://open.weixin.qq.com/connect/qrconnect" +
                "?appid=%s" +
                "&redirect_uri=%s" +
                "&response_type=code" +
                "&scope=snsapi_login" +
                "&state=%s" +
                "#wechat_redirect";
        // 回调地址
        String redirectUrl = ConstantPropertiesUtil.WX_OPEN_REDIRECT_URL; //获取业务服务器重定向地址
        try { 
   
            redirectUrl = URLEncoder.encode(redirectUrl, "UTF-8"); //url编码
        } catch (UnsupportedEncodingException e) { 
   
            throw new oldluException(20001, e.getMessage());
        }
        // 防止csrf攻击(跨站请求伪造攻击)
        //String state = UUID.randomUUID().toString().replaceAll("-", "");//一般情况下会使用一个随机数
        String state = "imhelen";//为了让大家能够使用我搭建的外网的微信回调跳转服务器,这里填写你在ngrok的前置域名
        System.out.println("state = " + state);
        // 采用redis等进行缓存state 使用sessionId为key 30分钟后过期,可配置
        //键:"wechar-open-state-" + httpServletRequest.getSession().getId()
        //值:satte
        //过期时间:30分钟
        
        //生成qrcodeUrl
        String qrcodeUrl = String.format(
                baseUrl,
                ConstantPropertiesUtil.WX_OPEN_APP_ID,
                redirectUrl,
                state);
        return "redirect:" + qrcodeUrl;
    }
}

授权url参数说明

参数 是否必须 说明
appid 应用唯一标识
redirect_uri 请使用urlEncode对链接进行处理
response_type 填code
scope 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即
state 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验

4、测试

访问:http://localhost:8201/api/ucenter/wx/login

访问授权url后会得到一个微信登录二维码

在这里插入图片描述

用户扫描二维码会看到确认登录的页面

在这里插入图片描述

用户点击“确认登录”后,微信服务器会向谷粒学院的业务服务器发起回调,因此接下来我们需要开发回调controller

注意:如果没有正确的配置业务服务器的回调url,则会看到以下错误提示

在这里插入图片描述

2 开发回调URL

2.1 准备工作

1、全局配置的跳转路径

# 微信开放平台 重定向url
wx.open.redirect_url=http://回调地址/api/ucenter/wx/callback

2、修改当前项目启动端口号为8150

3、测试回调是否可用

在WxApiController中添加方法

@GetMapping("callback")
public String callback(String code, String state, HttpSession session) { 
   
    //得到授权临时票据code
    System.out.println("code = " + code);
    System.out.println("state = " + state);
}

2.2 后台开发

1、添加依赖

 <!--httpclient-->
<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
</dependency>
<!--commons-io-->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
</dependency>
<!--gson-->
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
</dependency>

2、创建httpclient工具类

放入util包

HttpClientUtils.java

3、创建回调controller方法

在WxApiController.java中添加如下方法

/** * @param code * @param state * @return */
@GetMapping("callback")
public String callback(String code, String state){ 
   
    //得到授权临时票据code
    System.out.println(code);
    System.out.println(state);
    //从redis中将state获取出来,和当前传入的state作比较
    //如果一致则放行,如果不一致则抛出异常:非法访问
    //向认证服务器发送请求换取access_token
    String baseAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token" +
        "?appid=%s" +
        "&secret=%s" +
        "&code=%s" +
        "&grant_type=authorization_code";
    String accessTokenUrl = String.format(baseAccessTokenUrl,
                                          ConstantPropertiesUtil.WX_OPEN_APP_ID,
                                          ConstantPropertiesUtil.WX_OPEN_APP_SECRET,
                                          code);
    String result = null;
    try { 
   
        result = HttpClientUtils.get(accessTokenUrl);
        System.out.println("accessToken=============" + result);
    } catch (Exception e) { 
   
        throw new GuliException(20001, "获取access_token失败");
    }
    //解析json字符串
    Gson gson = new Gson();
    HashMap map = gson.fromJson(result, HashMap.class);
    String accessToken = (String)map.get("access_token");
    String openid = (String)map.get("openid");
    //查询数据库当前用用户是否曾经使用过微信登录
    Member member = memberService.getByOpenid(openid);
    if(member == null){ 
   
        System.out.println("新用户注册");
        //访问微信的资源服务器,获取用户信息
        String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +
            "?access_token=%s" +
            "&openid=%s";
        String userInfoUrl = String.format(baseUserInfoUrl, accessToken, openid);
        String resultUserInfo = null;
        try { 
   
            resultUserInfo = HttpClientUtils.get(userInfoUrl);
            System.out.println("resultUserInfo==========" + resultUserInfo);
        } catch (Exception e) { 
   
            throw new GuliException(20001, "获取用户信息失败");
        }
        //解析json
        HashMap<String, Object> mapUserInfo = gson.fromJson(resultUserInfo, HashMap.class);
        String nickname = (String)mapUserInfo.get("nickname");
        String headimgurl = (String)mapUserInfo.get("headimgurl");
        //向数据库中插入一条记录
        member = new Member();
        member.setNickname(nickname);
        member.setOpenid(openid);
        member.setAvatar(headimgurl);
        memberService.save(member);
    }
    //TODO 登录
    return "redirect:http://localhost:3000";
}

4、业务层

业务接口:MemberService.java

Member getByOpenid(String openid);

业务实现:MemberServiceImpl.java

@Override
public Member getByOpenid(String openid) { 
   
    QueryWrapper<Member> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("openid", openid);
    Member member = baseMapper.selectOne(queryWrapper);
    return member;
}

3 JWT令牌

3.1 整合JWT令牌

1、callback中生成jwt

在WxApiController.java的callback方法的最后添加如下代码

// 生成jwt
String token = JwtUtils.geneJsonWebToken(member.getId(),member.getNickName());
//存入cookie
//CookieUtils.setCookie(request, response, "guli_jwt_token", token);
//因为端口号不同存在蛞蝓问题,cookie不能跨域,所以这里使用url重写
return "redirect:http://localhost:3000?token=" + token;

2、前端打印token

在layout/defaullt.vue中打印获取的token值

export default { 
   
  created() { 
   
    console.log(this.$route.query.token)
  }
}

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/15636.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信