谷粒学院——第十四章、微信扫码登录

最新推荐文章于 2023-03-02 10:46:07 发布
最新推荐文章于 2023-03-02 10:46:07 发布
阅读量594 收藏 2
点赞数
分类专栏： 谷粒学院 文章标签： 微信 nginx 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZMMMOO/article/details/128542526
版权
该教程详细介绍了如何配置微信开放平台的appid、appsecret和重定向url，以实现微信扫码登录功能。首先，需要在service_ucenter模块的配置文件中填写相关信息，并创建工具类来读取这些配置。接着，通过微信提供的固定地址生成扫描二维码，并在controller层处理扫码后的回调逻辑，获取用户信息并存储到数据库。最后，前端页面展示登录信息，使用JWT生成token。
摘要由CSDN通过智能技术生成

准备工作

注册开发者资质

官网：https://open.weixin.qq.com/
image.png

尚硅谷分享

wx:
  open:
    # 微信开放平台 appid

    appid: wxed9954c01bb89b47

    # 微信开放平台 appsecret
    appsecret: a7482517235173ddb4083788de60b90e

    # 微信开放平台 重定向url（guli.shop需要在微信开放平台配置）
    redirecturl: http://guli.shop/api/ucenter/wx/callback

微信登陆流程

官网文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

微信登陆实现

配置文件

在 service_ucenter 模块的配置文件 application.properties 中，填写微信ID，密钥和域名地址。修改端口（同时修改nginx中的端口）

# 服务端口(在这里需要修改端口)
server.port=8160
# 用于微信登陆
# 微信开放平台 appid
wx.open.app_id=wxed9954c01bb89b47
# 微信开放平台 appsecret
wx.open.app_secret=a7482517235173ddb4083788de60b90e
# 微信开放平台 重定向url
wx.open.redirect_url=http://localhost:8160/api/ucenter/wx/callback

创建 utils 包，然后创建类去读取配置文件中的值：

@Component
public class ConstantWxUtils 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() {
        WX_OPEN_APP_ID = appId;
        WX_OPEN_APP_SECRET = appSecret;
        WX_OPEN_REDIRECT_URL = redirectUrl;
    }
}

生成扫描的二维码

直接请求微信提供的固定地址，然后向地址后面拼接参数。

在 service_ucenter 模块的 controller 层，创建类：

@CrossOrigin
@Controller
@RequestMapping("/api/ucenter/wx")
public class WxApiController {
    
    @ApiOperation("生成微信扫描的二维码")
    @GetMapping("/login")
    public String getWxCode() {
        // 微信开放平台授权baseUrl，%s是占位符
        String baseUrl = "https://open.weixin.qq.com/connect/qrconnect" +
                "?appid=%s" +
                "&redirect_uri=%s" +
                "&response_type=code" +
                "&scope=snsapi_login" +
                "&state=%s" +
                "#wechat_redirect";
        // 对 redirect_url 进行 URLEncoder 编码
        String redirectUrl = ConstantWxUtils.WX_OPEN_REDIRECT_URL;
        try {
            redirectUrl = URLEncoder.encode(redirectUrl, "utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        // 设置值
        String url = String.format(
                baseUrl,
                ConstantWxUtils.WX_OPEN_APP_ID,
                redirectUrl,
                "atguigu"
        );
        // 重定向
        return "redirect:" + url;
    }
}

image.png
启动项目，访问：http://localhost:8006/api/ucenter/wx/login，效果如下：
image.png

扫码之后获取信息

步骤图

image.png

image.png

工具类

需要先引入依赖，不过在一开始的时候，在 service 模块的 pom.xml 中已经引入过了，所以不必重新引入。
在 utils 包中复制提供好的工具类：
HttpClientUtils.java

controller 层

WxApiController 类添加方法：

@CrossOrigin
@Controller
@RequestMapping("/api/ucenter/wx")
public class WxApiController {

    @Autowired
    private MemberService memberService;

    @ApiOperation("生成微信扫描的二维码")
    @GetMapping("/login")
    public String getWxCode() {
        // 微信开放平台授权baseUrl，%s是占位符
        String baseUrl = "https://open.weixin.qq.com/connect/qrconnect" +
                "?appid=%s" +
                "&redirect_uri=%s" +
                "&response_type=code" +
                "&scope=snsapi_login" +
                "&state=%s" +
                "#wechat_redirect";
        // 对 redirect_url 进行 URLEncoder 编码
        String redirectUrl = ConstantWxUtils.WX_OPEN_REDIRECT_URL;
        try {
            redirectUrl = URLEncoder.encode(redirectUrl, "utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        // 设置值
        String url = String.format(
                baseUrl,
                ConstantWxUtils.WX_OPEN_APP_ID,
                redirectUrl,
                "atguigu"
        );
        // 重定向
        return "redirect:" + url;
    }

    // 获取扫描人信息，添加数据
    @ApiOperation("获取扫描人信息，添加数据")
    @GetMapping("callback")
    public String callback(String code, String state) {
        // 获取code值（临时票据），类似于验证码
        // 拿着 code 请求微信的固定地址，得到两个值 access_token 和 openid
        String baseAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token" +
                "?appid=%s" +
                "&secret=%s" +
                "&code=%s" +
                "&grant_type=authorization_code";
        // 拼接三个参数：id、密钥和 code 值
        String accessTokenUrl = String.format(
                baseAccessTokenUrl,
                ConstantWxUtils.WX_OPEN_APP_ID,
                ConstantWxUtils.WX_OPEN_APP_SECRET,
                code
        );
        // 请求这个拼接好的地址，得到返回的两个值
        // 使用 httpclient 发送请求，得到返回结果
        String accessTokenInfo;
        try {
            accessTokenInfo = HttpClientUtils.get(accessTokenUrl);
        } catch (Exception e) {
            e.printStackTrace();
            throw new GuliException(20001, "登陆失败");
        }
        // 从 accessTokenInfo 中 取出来 access_token 和 openid 并转换成 map，根据 key 获取对应值
        Gson gson = new Gson();
        Map mapAccessToken = gson.fromJson(accessTokenInfo, HashMap.class);
        String access_token = (String) mapAccessToken.get("access_token");
        String openid = (String) mapAccessToken.get("openid");
        // 扫码人的信息添加到数据库中
        // 根据 openid 判断数据库中是否存在相同的微信信息
        UcenterMember member = memberService.getOpenIdMember(openid);
        if (member == null) {
            // 拿着得到的 access_token 和 openid 再去请求微信提供的地址，获得扫码人的信息
            String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +
                    "?access_token=%s" +
                    "&openid=%s";
            // 拼接两个参数
            String userInfoUrl = String.format(baseUserInfoUrl, access_token, openid);
            // 发送请求
            String userInfo;
            try {
                userInfo = HttpClientUtils.get(userInfoUrl);
            } catch (Exception e) {
                e.printStackTrace();
                throw new GuliException(20001, "登陆失败");
            }
            // 从 userInfo 中获取扫码人的信息
            Map userInfoMap = gson.fromJson(userInfo, HashMap.class);
            String nickname = (String) userInfoMap.get("nickname"); // 昵称
            String headimgurl = (String) userInfoMap.get("headimgurl"); // 头像
            member = new UcenterMember();
            member.setOpenid(openid);
            member.setNickname(nickname);
            member.setAvatar(headimgurl);
            memberService.save(member);
        }
        // 使用 JWT 根据 mapper 对象生成 token 字符串
        String jwtToken = JwtUtils.getJwtToken(member.getId(), member.getNickname());
        return "redirect:http://localhost:3000?token=" + jwtToken;
    }
}

service 层

MemberService 类添加：

    // 根据 openid 判断
    UcenterMember getOpenIdMember(String openid);

实现类添加：

    // 根据 openid 判断
    @Override
    public UcenterMember getOpenIdMember(String openid) {
        QueryWrapper<UcenterMember> wrapper = new QueryWrapper<>();
        wrapper.eq("openid", openid);
        return baseMapper.selectOne(wrapper);
    }

前端页面显示登陆信息

default.vue

修改 layouts/default.vue

<script>
import '~/assets/css/reset.css'
import '~/assets/css/theme.css'
import '~/assets/css/global.css'
import '~/assets/css/web.css'
import cookie from 'js-cookie'
import loginApi from '@/api/login'

export default {
  data() {
    return {
      token: '',
      loginInfo: {
        id: '',
        age: '',
        avatar: '',
        mobile: '',
        nickname: '',
        sex: ''
      }
    }
  },
  created() {
    // 获取路径中的 token 值
    this.token = this.$route.query.token
    if (this.token) {
      // 如果能取到就用微信扫码登陆
      this.wxLogin()
    }
    this.showInfo()
  },
  methods: {
    // 微信登陆显示的方法
    wxLogin() {
      // 把 token 放到 cookie
      cookie.set('guli_token', this.token, { domain: 'localhost' })
      cookie.set('guli_ucenter', '', { domain: 'localhost' })
      // 调用接口，根据 token 值获取用户信息
      loginApi.getLoginUserInfo().then(response => {
        this.loginInfo = response.data.data.userInfo
        cookie.set('guli_ucenter', this.loginInfo, { domain: 'localhost' })
      })
    },
    // 退出的方法
    logout() {
      // 清空cookie值
      cookie.set('guli_token', '', { domain: 'localhost' })
      cookie.set('guli_ucenter', '', { domain: 'localhost' })
      // 回到首页面
      window.location.href = '/'
    },
    // 创建方法从cookie中获取信息
    showInfo() {
      // 从cookie中获取信息
      var userStr = cookie.get('guli_ucenter')
      // 转字符串转换成json对象(js对象)
      if (userStr) {
        this.loginInfo = JSON.parse(userStr)
      }
    }
  }
}
</script>

测试

访问：http://localhost:8160/api/ucenter/wx/login

微信扫码登陆后，地址栏返回：http://localhost:3000/?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJndWxpLXVzZXIiLCJpYXQiOjE2MjExNTUzMTgsImV4cCI6MTYyMTI0MTcxOCwiaWQiOiIxMzkzODQ3NTQ3MDc1Nzg4ODAyIiwibmlja25hbWUiOiJKeXVua2FpIn0.-IdNv8SCo3L39BQkxDxRqlALst2JnXe3wLbTHX-dOYk

查看数据库中增加了一条信息：
image.png

谷粒学院——Day13【微信扫描登录】
Java技术一点通
12-24 2377
OAuth2提出的背景：照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源。 资源拥有者：照片拥有者。 客户应用：云冲印。 受保护的资源：照片。 适用于同一公司内部的多个系统，不适用于不受信的第三方应用。 适用于合作商或者授信的不同业务部门之间。 接近OAuth2方式，需要考虑如何管理令牌、颁发令牌、吊销令牌，需要统一的协议，因此就有了OAuth2协议。 除了开放系统授权，OAuth2还可以应用于现代微服务安全。
【谷粒学院项目开发70】微信扫码登录
taroriceball的博客
03-10 757
1.OAuth2 是针对特定问题的一种解决方案。 主要可以解决两个问题：1.开放系统间授权 2.分布式访问问题 1.开放系统间授权 授权给第三方。一般采用令牌的方式 2.分布式访问问题 单点登录。用户在一个模块登录成功后，按照一定规则生成包含用户信息的字符串。把生成的字符串通过路径传递或者放到cookie中。后面再发送请求的时候，每次发送都带着字符串。 2.生成二维码 2.1在ucenter模块的配置文件中，写上微信id、密钥和域名地址 2.2创建类，读取配置文件的内容 2.3controller
谷粒学院-微信扫码登录
qq_24991197的博客
04-30 940
1. 微信扫码登录 1.1 OAuth2 是什么？
谷粒学院（十六）OAuth2 | 微信扫码登录
星海IT学习之路
10-28 2527
一、OAuth2解决什么问题 1、OAuth2提出的背景 照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源 2、图例 资源拥有者：照片拥有者 客户应用：云冲印 受保护的资源：照片 3、方式一：用户名密码复制 适用于同一公司内部的多个系统，不适用于不受信的第三方应用 4、方式二：通用开发者key 适用于合作商或者授信的不同业务部门之间 5、方式三：特殊令牌 接近OAuth2方式，需要考虑如何管理令牌、颁发令牌、吊销令牌，需要统一的协议，因此就有了OAuth2协议 二、什么是
【谷粒学院】微信扫码支付（224~238）
最新发布
Hvitur的博客
03-02 673
224.项目第十五天内容介绍1、课程支付说明 （1）课程分为免费课程和付费课程，如果是免费课程可以直接观看，如果是付费观看的课程，用户需下单支付后才可以观看 （2）如果是免费课程，在用户选择课程，进入到课程详情页面时候，直接显示 “立即观看”，用户点击立即观看，可以切换到播放列表进行视频播放 2、付费课程流程 （1）如果是付费课程，在用户选择课程，进入到课程详情页面时候，会显示 “立即购买” （2）点击“立即购买”，会生成课程的订单，跳转到订单页面 （3）点击“去支付”，会跳转到支付页面，生成微信扫描
谷粒学院——Day15【微信支付】
Java技术一点通
01-01 2049
课程支付说明：课程分为免费课程和付费课程，如果是免费课程可以直接观看，如果是付费观看的课程，用户需下单支付后才可以观看。如果是免费课程，在用户选择课程，进入到课程详情页面时候，直接显示 “立即观看”，用户点击立即观看，可以切换到播放列表进行视频播放。
谷粒学院——Day03【项目前端相关基础知识一】
Java技术一点通
11-08 529
要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。 因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 J
谷粒学院微信登录前端跨域问题
ccccchoker的博客
05-06 690
这段时间在做谷粒学院的项目，里面关于微信授权登录的模块只做了接口的直接url调用，没有整合到前端，自己整合了一下，发现用前端访问接口存在跨域的问题，比较简单的解决方法就是，在生成微信二维码的同时返回前端url，前端直接通过url重定向到微信授权成功之后的回调方法 后端代码 另外一个回调方法不用改动 //生成微信二维码 解决前端访问跨域的问题 @GetMapping("crossLogin") @ResponseBody public R getWxUrl() { /
【谷粒学院】微信扫码登录（199~206）
Hvitur的博客
03-01 752
OAuth2是什么？ OAuth2是针对特定问题的一种解决方案 主要可以解决两个问题：开放系统间授权、分布式访问问题1、OAuth2提出的背景 照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源lucy可以操作百度云盘 但是打印照片的服务不能操作百度云盘 需要对打印照片的服务进行授权，让其可以操作百度云盘 2、图例 资源拥有者：照片拥有者 客户应用：云冲印 受保护的资源：照片 3、方式一：用户名密码复制 适用于，不适用于不受信的第三方应用 4、方式二：通用开发者key 适用于
谷粒学院微信扫码登录过程记录以及bug解决
weixin_42260782的博客
06-21 1916
微信扫码登录
解决谷粒学院和尚医通项目微信不能登录问题
weixin_43480466的博客
06-21 679
1、问题描述 （1）项目中微信扫描登录功能，目前不能生成微信扫描二维码2、问题出现原因 （1）因为微信平台后台配置做了修改，把微信的回调路径修改了，所以之前的回调路径不能使用了3、解决方式 （1）之前的配置是这样的 微服务模块端口号是 8150 项目配置文件 wx.open.app_id=wxed9954c01bb89b47 wx.open.app_secret=a7482517235173ddb4083788de60b90e wx.open.redirect_url=http://guli.shop/ap
谷粒商城—商城业务—认证服务—登陆（211~224）
张老师的博客
04-09 695
一.异步： 1.初始化 线程 的四种方式： 1）继承
微信回调方式说明
实践求真知
01-02 3178
一回调方法定义 控制器中定义回调方法 @GetMapping("callback") public String callback(String code, String state, HttpSession session) { System.out.println("callback被调用"); System.out.println("code:" + code); System.out.println("state:" + state); return null.
业务复习-微信登录/第三方登录实现
weixin_57128596的博客
10-13 653
通过code，密钥和id得到的用户url是一个String字符串，里面包含token和openid——>我们利用gson将字符串转为map，然后从map中得到指定的数据。1.之前第一步扫描二维码callback接口得到的code值——>2.通过code和ID密钥信息去请求微信提供的固定地址得到token访问凭证+openid微信的标识。我们利用memberId和memberName生成token，利用token进行访问。利用token我们再将token解析就能找到我们要的数据了。controller层。
day13---(10)微信扫码后回调
DKPT的博客
10-21 837
1、如果在公司里实现微信扫码登录（内网穿透），回调地址 找运维人员，配置外网地址和开发人员本机内网地址映射关系。 2、个人开发内网穿透怎么办 配置的微信回调地址 http://guli.shop/api/ucenter/wx/callback （1）本地hosts文件进行映射（默认80端口）。 （2）用专业工具实现内网穿透。 （3）在微信服务端进行重定向，指向本地url。 http://localhost:8150/api/ucenter/wx/callback 3、获取扫描人信息 扫码后微信回调本地方法，
微信登录的方式
richpersion的博客
05-27 372
登录和注册的controller层 @ApiOperation(value = "登录") @PostMapping("/login") public Msg login(@RequestBody UcenterMember member){ String token =ucenterMemberService.login(member); return Msg.success().data("token",token); } @ApiOpe
尚硅谷-全栈在线教育项目-谷粒学院【Spring Boot + Spring Cloud Alibaba + Vue.js】
热门推荐
ljm_99的博客
09-20 1万+
文章目录0、视频地址1、 项目下载2、他人写的项目总结和笔记（有一定的改进，简历改进在本地项目文件夹）2.1、项目笔记2.2、项目总结12.3、项目总结22.4项目总结33、问题与解决问题day04 03问题day 05问题 day 05问题day11～day12问题day 19问题p41问题p51问题二问题三问题五问题六问题 p352问题p325问题P355问题P355问题十二问题十六问题十八 0、视频地址 视频地址 1、 项目下载 谷粒项目 链接：https://pan.baidu.com/s/1iA_
使用Token进行身份验证
m0_57037182的博客
06-10 1万+
token，简简单单帮你上手实现
微信登录
weixin_45524836的博客
03-20 1144
一、登录需求 1、登录需求 1，登录采取弹出层的形式 2，登录方式： （1）手机号码+手机验证码 （2）微信扫描 3，无注册界面，第一次登录根据手机号判断系统是否存在，如果不存在则自动注册 4，微信扫描登录成功必须绑定手机号码，即：第一次扫描成功后绑定手机号，以后登录扫描直接登录成功 5，网关统一判断登录状态，如何需要登录，页面弹出登录层 二、微信登录 1、OAuth2 1.1 OAuth2解决什么问题 1.1.1 开放系统间授权 照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源
谷粒学院软件资源压缩包下载指南
资源摘要信息:"谷粒学院资源" 谷粒学院是一个提供在线教育的平台，它涵盖了多种技术和编程语言的教学资源。根据提供的文件信息，谷粒学院资源很可能是指该平台上有关软件开发和编程教育的资料集合。这些资源可能...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

肉丝不切片

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

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

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

打赏作者

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

抵扣说明：

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

余额充值