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

最新推荐文章于 2023-03-02 10:46:07 发布
最新推荐文章于 2023-03-02 10:46:07 发布
阅读量512 收藏 2
点赞数
分类专栏： 谷粒学院 文章标签： 微信 nginx 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZMMMOO/article/details/128542526
版权

准备工作

注册开发者资质

官网：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

肉丝不切片
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
【谷粒学院项目开发70】微信扫码登录
taroriceball的博客
03-10 711
1.OAuth2 是针对特定问题的一种解决方案。 主要可以解决两个问题：1.开放系统间授权 2.分布式访问问题 1.开放系统间授权 授权给第三方。一般采用令牌的方式 2.分布式访问问题 单点登录。用户在一个模块登录成功后，按照一定规则生成包含用户信息的字符串。把生成的字符串通过路径传递或者放到cookie中。后面再发送请求的时候，每次发送都带着字符串。 2.生成二维码 2.1在ucenter模块的配置文件中，写上微信id、密钥和域名地址 2.2创建类，读取配置文件的内容 2.3controller
谷粒学院项目的数据库文件
10-31
【标题】"谷粒学院项目的数据库文件"涵盖了与谷粒学院相关的数据库设计和管理方面的知识。谷粒学院可能是一个在线教育平台，其数据库是存储用户信息、课程资料、学习进度等核心数据的关键部分。数据库文件通常包含...
谷粒学院-微信扫码登录
qq_24991197的博客
04-30 879
1. 微信扫码登录 1.1 OAuth2 是什么？
谷粒学院——Day13【微信扫描登录】
Java技术一点通
12-24 2336
OAuth2提出的背景：照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源。 资源拥有者：照片拥有者。 客户应用：云冲印。 受保护的资源：照片。 适用于同一公司内部的多个系统，不适用于不受信的第三方应用。 适用于合作商或者授信的不同业务部门之间。 接近OAuth2方式，需要考虑如何管理令牌、颁发令牌、吊销令牌，需要统一的协议，因此就有了OAuth2协议。 除了开放系统授权，OAuth2还可以应用于现代微服务安全。
谷粒学院（十六）OAuth2 | 微信扫码登录
星海IT学习之路
10-28 2469
一、OAuth2解决什么问题 1、OAuth2提出的背景 照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源 2、图例 资源拥有者：照片拥有者 客户应用：云冲印 受保护的资源：照片 3、方式一：用户名密码复制 适用于同一公司内部的多个系统，不适用于不受信的第三方应用 4、方式二：通用开发者key 适用于合作商或者授信的不同业务部门之间 5、方式三：特殊令牌 接近OAuth2方式，需要考虑如何管理令牌、颁发令牌、吊销令牌，需要统一的协议，因此就有了OAuth2协议 二、什么是
【谷粒学院】微信扫码支付（224~238）
Hvitur的博客
03-02 591
224.项目第十五天内容介绍1、课程支付说明 （1）课程分为免费课程和付费课程，如果是免费课程可以直接观看，如果是付费观看的课程，用户需下单支付后才可以观看 （2）如果是免费课程，在用户选择课程，进入到课程详情页面时候，直接显示 “立即观看”，用户点击立即观看，可以切换到播放列表进行视频播放 2、付费课程流程 （1）如果是付费课程，在用户选择课程，进入到课程详情页面时候，会显示 “立即购买” （2）点击“立即购买”，会生成课程的订单，跳转到订单页面 （3）点击“去支付”，会跳转到支付页面，生成微信扫描
谷粒学院项目笔记(内含详细配置讲解与部分源码)
04-25
【标题】：“谷粒学院项目笔记(内含详细配置讲解与部分源码)” 这篇笔记是谷粒学院针对一个具体项目的学习记录，其中包含了丰富的配置信息详解和部分源码分析，旨在帮助学习者深入理解项目的构建、运行以及关键功能...
谷粒学院相关项目资料
04-21
包含1 测试视频 2 代码生成器 3 前端相关资源 4 数据库脚本 5 docker脚本五个内容
spring-boot-demo-atguigu:谷粒学院spring-boot原始码学习
03-23
《谷粒学院Spring Boot原始码学习详解》 在IT领域，Spring Boot以其强大的功能和便捷的开发体验，已经成为Java企业级应用开发的首选框架。谷粒学院提供的"spring-boot-demo-atguigu"项目，旨在帮助开发者深入理解并...
guli-front:谷粒学院客户端
03-13
古里锋构建设置# install dependencies$ npm install# serve with hot reload at localhost:3000$ npm run dev# build for production and launch server$ npm run build$ npm run start# generate static project$ ...
谷粒学院微信扫码登录过程记录以及bug解决
weixin_42260782的博客
06-21 1787
微信扫码登录
解决谷粒学院和尚医通项目微信不能登录问题
weixin_43480466的博客
06-21 586
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 657
一.异步： 1.初始化 线程 的四种方式： 1）继承
微信回调方式说明
实践求真知
01-02 3133
一回调方法定义 控制器中定义回调方法 @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 618
通过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 765
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 343
登录和注册的controller层 @ApiOperation(value = "登录") @PostMapping("/login") public Msg login(@RequestBody UcenterMember member){ String token =ucenterMemberService.login(member); return Msg.success().data("token",token); } @ApiOpe
使用Token进行身份验证
热门推荐
m0_57037182的博客
06-10 1万+
token，简简单单帮你上手实现
微信登录
weixin_45524836的博客
03-20 1007
一、登录需求 1、登录需求 1，登录采取弹出层的形式 2，登录方式： （1）手机号码+手机验证码 （2）微信扫描 3，无注册界面，第一次登录根据手机号判断系统是否存在，如果不存在则自动注册 4，微信扫描登录成功必须绑定手机号码，即：第一次扫描成功后绑定手机号，以后登录扫描直接登录成功 5，网关统一判断登录状态，如何需要登录，页面弹出登录层 二、微信登录 1、OAuth2 1.1 OAuth2解决什么问题 1.1.1 开放系统间授权 照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源
谷粒学院 新版vue tinymce
最新发布
09-05
谷粒学院新版的 Vue Tinymce 是一个基于 Vue.js 和 Tinymce 富文本编辑器的组件库。它提供了一些方便的功能和组件，可以帮助开发者在 Vue 项目中更方便地使用 Tinymce 编辑器。 Vue Tinymce 提供了一个名为 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

肉丝不切片

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

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

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

打赏作者

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

抵扣说明：

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

余额充值