【SAL-017】シーメールプレミアム4時間 6 网站辅导用微信扫码登录，他们是怎样兑现的？

图片【SAL-017】シーメールプレミアム4時間 6【SAL-017】シーメールプレミアム4時間 6

作家：小傅哥博客：https://bugstack.cn

❝

千里淀、共享、成长，让我方和他东说念主皆能有所获利！?

❞

大众好，我是手艺UP主小傅哥。

动作一个手艺码农，在使用社区、论坛或者千般AI作事的时，频繁会看到这样一个辅导：“使用微信公众号扫码登录”。那因为这种的登录方式除了登录，还不错让用户千里淀到公众号上，以后还能收受到公众号扩充，可谓是一举两得。那它是怎样作念的呢？?

图片

波多野结衣作品种子

小傅哥，先举个这样登录的例子?，让大众持重下这个业务场景。

这是一个 CSDN 微信扫码登录的场景，通过 F12 绽开浏览器的扫尾台，不错看到束缚的请求一个集合地址，判断用户是否扫码。当你使用微信扫码后，则会登录告捷跳转到网站的首页。

图片

通过这样的一个页面着力展示，咱们拙劣的不错知说念，用户页面束缚的 checkScan 检测，是需要用到一个唯独ID值。而当用户用微信扫码后，这个唯独ID值则不错通过微信公众号获取到并保存，同期创建出唯独ID 和 Token 的映射相关。那么当 checkScan 扫描到作事端有这样一个映射，则不错把 Token 取追忆存到浏览器中，让用户登录告捷。

经由即是这样，那具体的代码兑现是怎样解决的呢？接下来小傅哥就给大众共享下，怎样来兑现一下这个有打算。

文末提供了「星球：码农会锁」?优惠加入方式，以及本节课程的代码地址。方法演示地址：https://gaga.plus - 8个实战方法

一、经由联想

微信扫码登录的经由主要包括；用户、浏览器、后端作事、公众号，这四个部分。咱们不错先通过UML经由图，了解下所有调用相关。

图片

当先，由用户发起登录操作。让WEB页面从作事端获取登录凭证。之后，前端页面拿到登录凭证后，不错使用 Ticket 从公众号作事平台疏导二维码。终末，用户扫码登录。扫码后，作事端会收受到来自公众号的回调音书，作事端再把回调音书中的 openid【用户唯独记号】和 ticket 进行绑定。这个时间你也不错创建出 jwt token 反馈给前端，动作登录告捷的存储信息，后续校验 jwt token 就不错了。

有了这样一个经由的融会，接下来，咱们就不错看下代码是怎样兑现的了。

二、对接文档 - 公众号平台微信公众号测试平台：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index - 不需要苦求公众号即可完成测试，雷同沙箱环境获取 Access Token 文档：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html生成带参数的二维码：https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html - 最终即是用户扫描的二维码内网穿透器具，natapp.cn - 因为需要让公众号调用到腹地的作事，所需要把你的作事映射到公网上使用。顾惜；要采纳付费的12元，不然不可对接。三、功能兑现

小傅哥这里选择了 DDD 的工程模子结构，竖立公众号扫码登录作事端案例。如果你对 DDD 还不是太持重，不错看下小傅哥写的系列 DDD 教程；《Java 简明教程》-> bugstack.cn -> 路书

1. 工程结构

图片

xfg-dev-tech-app 是启动利用身手的进口，其他模块也被径直或者迤逦的引入到 app 模块下，这样才气被 Spring 扫描加载。xfg-dev-tech-infrastructure 是基础规范层，用于对接外部接口、缓存、数据库等有关内容的陆续使用。本节主如若对接微信竖立平台的接口。选择的是 retrofit2 手艺框架，这样对接起来愈加浅薄。xfg-dev-tech-domain 是功能兑现层，像是登录的具体兑现，即是在 domain 限制层兑现的。你曩昔使用 DDD 作念的其他功能，亦然放到 domain 限制下兑现，每一个功能即是即是一个模块。xfg-dev-tech-types 用于界说基本的类型、胪列、谬误码等内容。2. 二维码获取

从微信官网文档阅读不错知说念，为了获取扫码登录的二维码，则需要3步；

先获取 AccessToken，它是公众号的全局唯独接口调用字据，公众号调用各接口时皆需使用access_token。通过 AccessToken 获取 ticket 凭证，凭证用于衔尾用户扫码登录和公众号回调后获取凭证，以此关联用户登录信息。通过 ticket 传递给前端，前端页面打听微信地址径直获取二维码。2.1 接口对接 - retrofit2

public interface IWeixinApiService {    /**     * 获取 Access token     * 文档：<a href="https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html">Get_access_token</a>     *     * @param grantType 获取access_token填写client_credential     * @param appId     第三方用户唯独凭证     * @param appSecret 第三方用户唯独凭证密钥，即appsecret     * @return 反映肃除     */    @GET("cgi-bin/token")    Call<WeixinTokenResponseDTO> getToken(            @Query("grant_type") String grantType，            @Query("appid") String appId，            @Query("secret") String appSecret    );    /**     * 获取字据 ticket     * 文档：<a href="https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html">Generating_a_Parametric_QR_Code</a>     * <a href="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET">前端根据凭证展示二维码</a>     *     * @param accessToken            getToken 获取的 token 信息     * @param weixinQrCodeRequestDTO 入参对象     * @return 嘱咐肃除     */    @POST("cgi-bin/qrcode/create")    Call<WeixinQrCodeResponseDTO> createQrCode(@Query("access_token") String accessToken， @Body WeixinQrCodeRequestDTO weixinQrCodeRequestDTO);}

使用 retrofit2 对接接口，它不错以一种面向对象的想维，使用 HTTP 接口，免去我方解决中间的对接过程。另外 okhttp3 框架对接接口也罕见好用，有的时间不错合营沿途使用。

@Slf4j@Configurationpublic class Retrofit2Config {    private static final String BASE_URL = "https://api.weixin.qq.com/";    @Bean    public Retrofit retrofit() {        return new Retrofit.Builder()                .baseUrl(BASE_URL)                .addConverterFactory(JacksonConverterFactory.create())                .build();    }    @Bean    public IWeixinApiService weixinApiService(Retrofit retrofit) {        return retrofit.create(IWeixinApiService.class);    }}

使用 retrofit2 竖立好接口后，在再 xfg-dev-tech-app 模块的 config 文献夹下，创建作事。【这有点像 MyBatis 的 Dao 接口雷同，只需要界说好接口即可】2.2 ApiPost 请求

接口：https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET

APIPost 模拟网页取得的扫码登录的二维码。接下来身手到测试的时间，产生的 ticket 会放到这里模拟使用。3. 登录码竖立

源码：cn.bugstack.xfg.dev.tech.trigger.http.LoginController

@Slf4j@RestController()@CrossOrigin("*")@RequestMapping("/api/v1/login/")public class LoginController {    @Resource    private ILoginService loginService;    @RequestMapping(value = "weixin_qrcode_ticket"， method = RequestMethod.GET)    public Response<String> weixinQrCodeTicket() {        try {            String qrCodeTicket = loginService.createQrCodeTicket();            log.info("生成微信扫码登录 ticket {}"， qrCodeTicket);            return Response.<String>builder()                    .code(Constants.ResponseCode.SUCCESS.getCode())                    .info(Constants.ResponseCode.SUCCESS.getInfo())                    .data(qrCodeTicket)                    .build();        } catch (Exception e) {            log.info("生成微信扫码登录 ticket 失败"， e);            return Response.<String>builder()                    .code(Constants.ResponseCode.UN_ERROR.getCode())                    .info(Constants.ResponseCode.UN_ERROR.getInfo())                    .build();        }    }    @RequestMapping(value = "check_login"， method = RequestMethod.GET)    public Response<String> checkLogin(@RequestParam String ticket) {        try {            String openidToken = loginService.checkLogin(ticket);            log.info("扫描检测登录肃除 ticket:{} openidToken:{}"， ticket， openidToken);            if (StringUtils.isNotBlank(openidToken)) {                return Response.<String>builder()                        .code(Constants.ResponseCode.SUCCESS.getCode())                        .info(Constants.ResponseCode.SUCCESS.getInfo())                        .data(openidToken)                        .build();            } else {                return Response.<String>builder()                        .code(Constants.ResponseCode.NO_LOGIN.getCode())                        .info(Constants.ResponseCode.NO_LOGIN.getInfo())                        .build();            }        } catch (Exception e) {            log.info("扫描检测登录肃除失败 ticket:{}"， ticket);            return Response.<String>builder()                    .code(Constants.ResponseCode.UN_ERROR.getCode())                    .info(Constants.ResponseCode.UN_ERROR.getInfo())                    .build();        }    }}

竖立两个接口；

/api/v1/login/weixin_qrcode_ticket -  获取微信 ticket 凭证/api/v1/login/check_login - 轮训考据登录4. 公众号竖立

当先，唯有作念公众号竖立的经由，就必须有公众号的对接。这个对接即是你在我方按照公众号文档竖立好对接身手，建树到公众号平台。

4.1 建树阐明

图片

如图所示，是你在登录微信公众号测试平台，添加接口建树和JS安全域名以后看到的内容。

最顶上，微信号，需要建树到 xfg-dev-tech-weixin-login 的 application-dev.yml 文献中。测试号信息 appID、appsecret，也需要建树到 application-dev.yml 文献中。接口信息的建树，需要你在启动 xfg-dev-tech-weixin-login，同期在腹地测试时启动 natapp 内网穿透器具后。用你的内网穿透地址，和工程的请求地址的 URL 建树到公众号接口里。建树的时间会进行验签，验签告捷则建树告捷。你还要扫描怜惜测试号二维码，这样才气看到测试信息。4.2 验签作事

源码：cn.bugstack.xfg.dev.tech.trigger.http.WeixinPortalController

@Slf4j@RestController()@CrossOrigin("*")@RequestMapping("/api/v1/weixin/portal/")public class WeixinPortalController {    @Value("${weixin.config.originalid}")    private String originalid;    @Resource    private Cache<String， String> openidToken;    /**     * 验签，硬编码 token b8b6 - 按需修改     */    @GetMapping(value = "receive"， produces = "text/plain;charset=utf-8")    public String validate(@RequestParam(value = "signature"， required = false) String signature，                           @RequestParam(value = "timestamp"， required = false) String timestamp，                           @RequestParam(value = "nonce"， required = false) String nonce，                           @RequestParam(value = "echostr"， required = false) String echostr) {        try {            log.info("微信公众号验签信息运转 [{}， {}， {}， {}]"， signature， timestamp， nonce， echostr);            if (StringUtils.isAnyBlank(signature， timestamp， nonce， echostr)) {                throw new IllegalArgumentException("请求参数违警，请核实!");            }            boolean check = SignatureUtil.check("b8b6"， signature， timestamp， nonce);            log.info("微信公众号验签信息完成 check：{}"， check);            if (!check) {                return null;            }            return echostr;        } catch (Exception e) {            log.error("微信公众号验签信息失败 [{}， {}， {}， {}]"， signature， timestamp， nonce， echostr， e);            return null;        }    }    /**     * 回调，收受公众号音书【扫描登录，会收受到音书】     */    @PostMapping(value = "receive"， produces = "application/xml; charset=UTF-8")    public String post(@RequestBody String requestBody，                       @RequestParam("signature") String signature，                       @RequestParam("timestamp") String timestamp，                       @RequestParam("nonce") String nonce，                       @RequestParam("openid") String openid，                       @RequestParam(name = "encrypt_type"， required = false) String encType，                       @RequestParam(name = "msg_signature"， required = false) String msgSignature) {        try {            log.info("收受微信公众号信息请求{}运转 {}"， openid， requestBody);            // 音书调遣            MessageTextEntity message = XmlUtil.xmlToBean(requestBody， MessageTextEntity.class);            // 扫码登录【音书类型和事件】            if ("event".equals(message.getMsgType()) && "SCAN".equals(message.getEvent())) {                // 实质的业务场景，不错生成 jwt 的 token 让前端存储                openidToken.put(message.getTicket()， openid);                return buildMessageTextEntity(openid， "登录告捷");            }            log.info("收受微信公众号信息请求{}完成 {}"， openid， requestBody);            return buildMessageTextEntity(openid， "测试本案例，需要请扫码登录！");        } catch (Exception e) {            log.error("收受微信公众号信息请求{}失败 {}"， openid， requestBody， e);            return "";        }    }    private String buildMessageTextEntity(String openid， String content) {        MessageTextEntity res = new MessageTextEntity();        // 公众号分拨的ID        res.setFromUserName(originalid);        res.setToUserName(openid);        res.setCreateTime(String.valueOf(System.currentTimeMillis() / 1000L));        res.setMsgType("text");        res.setContent(content);        return XmlUtil.beanToXml(res);    }}

验签和收受公众号回调，是一个固定的代码，同期验签和收受公众号回调也皆是归拢个接口名字，仅仅一个是 get 请求，另外一个是 post 请求。验签地址：http://xfg-studio.natapp1.cc/api/v1/weixin/portal/receive 你需要更换为你的内网穿透域名地址。在收受公众号回调中，有一块固定的代码。收受公众号音书类型为事件，事件类型为扫码（SCAN），从中不错取得 ticket 这个唯独凭证。考据登录时，冒昧模拟写入到缓存中。openidToken.put(message.getTicket()， openid); 实质的业务场景会调遣为登录的 jwt token 数据。4.3 内网穿透

图片

内网穿透器具，购买一个12元的付费地说念。https://natapp.cn/购买后，建树你的地说念腹地端口为 8091 也即是你腹地 SpringBoot 身手的端口。如果你不是 8091 端口，不错修改为其他的软件下载，内网穿透需要一个腹地的软件。你不错从它的网站下载。https://natapp.cn/#download 各个版块也皆撑捏，内部也有有关的使用教程。安设软件后，启动 natapp 和利用，就不错把你的地址建树到上头了。四、功能考据1. 启动 SpringBoot 作事

  .   ____          _            __ _ _ /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \( ( )\___ | '_ | '_| | '_ / _` | \ \ \ \ \/  ___)| |_)| | | | |