前后端分离项目知识汇总(整合短信登录和微信扫描登录)

79 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第17天,点击查看活动详情

整合腾讯云短信服务

这里整合的为腾讯云短信服务,视频中是阿里云短信。

由于阿里云短信申请不容易成功,所以我们这里用腾讯云。

看着sdk文档很容易就能整合成功~

短信 Java SDK-SDK 文档-文档中心-腾讯云-腾讯云 (tencent.com)

后端编码

建模块,改pom,yml,启动类

image-20220522170553780

业务类

image-20220522171138897

前端编码

主要技术点是:页面,倒计时功能

这两个功能主要是前端知识点,这里不过多展示

image-20220522171426843

使用完这些插件之后,其余的套路和之前整合的一样

四大步:

  1. 添加路由
  2. 点击路由显示页面
  3. api文件夹创建js文件,定义后端接口地址和参数
  4. 创建vue页面引入js,调用方法实现功能

噢噢噢,这个是写后台管理系统的时候的套路对吧

前台系统也差不多的了

  1. api文件夹创建js文件,定义后端接口地址和参数
  2. 创建vue页面引入js,调用方法实现功能

image-20220522171819342

image-20220522172453985

微信扫描登录

OAuth2

OAuth2.0 详解 - 知乎 (zhihu.com)

什么是OAuth2?

OAuth 不是一个API或者服务,而是一个验证授权(Authorization)的开放标准,所有人都有基于这个标准实现自己的OAuth。

为什么要有OAuth?

OAuth2的出现是为了解决安全性问题,OAuth使得第三方应用对资源的访问更加安全

微信扫码登录的具体流程

微信开放平台 (qq.com)

准备工作 | 微信开放文档 (qq.com)

httpclient就是不用在浏览器中输入url访问资源也能实现浏览器的过程

img

开发流程

微信扫码登录需要有商户微信信息

这里采用的是视频提供的

建模块,改pom,yml,启动类

image-20220523134600004

第一步、请求Code

image-20220523150714529

image-20220523151318757

第二步、通过code获取access_token

image-20220523151443593

image-20220523152158251

第三步、通过token调用接口

image-20220523152952334

有了access_token我们就可以通过接口来获取用户信息了,从而把用户保存到数据库中

存数据库

由官网可知,请求成功后返回的结果是一个json字符串

image-20220523152459534

如下实例:

{"access_token":"56_jgDYj0kFSTarb6dLk3S8v32kVFmACL7MSBlAeBllfWMtfCqmFnvaAk2jfQTnjmVJ0tt7mAwaqHQ6NUt3DNJIYq8LH7utQA6QXIwfIdC46lE",
 "expires_in":7200,
 "refresh_token":"56_vQaXS1y1Fnp6zf4lZkFBDA7FNRdrkgDBPSytNMFmwdvey5oufKUIB2-7mjdIK7hjNzdD0pCAe3V7Heerszs1xiRm0jjqRufX_ddaDBviuIc",
 "openid":"o3_SC501zRkVcwqQ_sbnIMcp4awU",
 "scope":"snsapi_login",
 "unionid":"oWgGz1FS61brgcCChgq5yO4mQuZM"}

数据库表的结构如下:

image-20220523152758674

代码如下:

image-20220523153407411

image-20220523155403180

前端页面不多说了,了解即可(CV)

image-20220523155906259