微信开放平台扫码登陆

微信开放平台扫码登陆微信授权扫码登陆微信开放平台提供了两种登陆方式,一种是会跳转到一个很丑很丑,只有一个二维码的界面里;另一种则是可以自己定制化的(二维码内嵌到自己网站内的方式)第一种方式的完成非常简单,但是第二种方式,就需要前后台都做一些调整了微信扫码登陆的准备工作这是在开始做相关业务开发之前的一些东西去微信开放平台中注册一个账号,并完成自己的开发者资质认证(这个链接应该点不过去,他们token是明…

大家好,又见面了,我是你们的朋友全栈君。

微信授权扫码登陆

微信开放平台提供了两种登陆方式,一种是会跳转到一个很丑很丑,只有一个二维码的界面里;
另一种则是可以自己定制化的(二维码内嵌到自己网站内的方式)

第一种方式的完成非常简单,但是第二种方式,就需要前后台都做一些调整了

微信扫码登陆的准备工作 这是在开始做相关业务开发之前的一些东西

  1. 微信开放平台中注册一个账号,并完成自己的开发者资质认证(这个链接应该点不过去,他们token是明文存在地址栏里的….),开发者资质认证要花 300块钱,可以绑定10个移动应用程序和10个网站应用上(还有公众号、小程序和第三方平台,这些不是主体内容,不做说明)。
  2. 创建网站应用,这些东西按照流程走就好了
  3. 网站应用创建并审批完之后可以直接查看该应用,里面有AppIDAppSecret,用小本本记好,未来要用的
  4. 接口信息里有一个微信登陆,申请开通即可(没有走第一步的可能会提示要认证,老老实实把第一步内容走了吧,该花的钱…让老板报销去吧)
  5. 授权回调域,这个东西填写自己网站(处理扫码登陆相关业务的)后台域名地址,如果后台没有跑在80端口,则需要在里面指定端口号,只要填写顶级域名即可(arunoido.com:411/)(格式有问题的话,在实际操作可能会提示redirect_uri参数错误)子级域名自动继承

操作流程

官方文档里已经给了一套非(shi)常(fen)明(mo)确(hu)的操作手册了,这里贴上文章链接

整体的代码流程如下(说的有一点点抽象,有一个宏观意识就好,不要太专注于某一个地方的实现,后面会说):

  1. 前台界面生成二维码,同时开启轮询,每隔一段时间(时间你定)去查看用户登陆状况
  2. 用户用微信扫描二维码,进入了该网站的授权界面
  3. 前台收到了确认,向后台发起请求,携带codestate
  4. 后台用code请求微信接口,拿到access_token等一系列信息(我是仅作登陆的,所以拿了一个union_id,如果需要的话,可以用access_token换取一些微信用户的信息,然后就可以干一些猥琐的事情了,比如…..比如把别人的微信头像存到自己的数据库里!),将union_id存入redis中,key使用微信提供的state
  5. 前台在轮询过程中会拿到后台返回的结果,没有绑定的跳转登陆界面绑定,有绑定的直接进入
  6. (绑定流程)前台账号密码发送到后台,后台完成绑定

代码处理

前台处理

  1. 微信提供了一个js文件用于生成二维码以及发送请求并完成界面重定向,使用即可,具体说法在官方文档中请求示例下面 步骤一、二,按照文档填写内容即可(注:redirect_uri参数填写后台微信扫码登陆的接口地址)
  2. 修改登陆界面,在选择扫码登陆之后,判断是否绑定账号,如果绑定账号,则用该账号登陆;如果未绑定账号,则需要登陆账号完成微信号的绑定/注册(注:这里要修改一下,传统的登陆是后台响应前台请求,因为扫码结果的回调是被包装过的(微信登陆的那个js里有相关的请求以及响应代码,但是他们没有解释里面的接口,代码也是压缩过的,不方便查看接口方法,所以我也没有把它做成响应的),所以需要去轮询扫码结果,判断登陆状态)
  3. 添加新的接口请求(状态请求接口)

后台处理

  1. 增加三个接口,微信扫码登陆,微信账号绑定和一个查询响应状况的功能
  2. 微信扫码登陆接口使用GET方法,参数有codestate,返回值为void
  3. code请求union_id,并将union_id存入redis中备用,key使用state参数
  4. 查询响应接口使用POST方法,接受参数为state,用于查询union_id,数据为空说明请求超时,有数据但是在数据库中查询不到则说明用户未绑定,有数据且查询到了用户,可以直接调用后台的登陆接口,然后返回token
  5. 微信账号绑定使用POST方法,参数有stateaccpwd。用于扫码登陆的后半段,用户扫码完成之后输入账号密码,账号密码正确且能查出union_id,完成绑定,并调用账号密码的登陆接口,返回token

我一直都误解了微信扫码登陆模块的流程惹…

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/135294.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月5日 下午1:36
下一篇 2022年6月5日 下午1:36


相关推荐

  • 最小二乘法详解_通俗是啥意思

    最小二乘法详解_通俗是啥意思本文转自https://blog.csdn.net/bitcarmanlee/article/details/51589143,谢谢原作者辛苦整理。若侵权,告知即删。最小二乘是每个上过大学的同学都接触过的概念与知识点(当然可能纯文科的同学没接触过,但是一般纯文科的同学也不会看这篇文章好像)。最小二乘理论其实很简单,用途也很广泛。但是每次说到最小二乘,总感觉差了点什么似的,好像对于最小二乘的前世…

    2022年8月30日
    4
  • javas cript入门要了解的知识和书籍

    javas cript入门要了解的知识和书籍javascript 入门要了解的知识和书籍想要进入 IT 行业 领取高额的薪资 这可是不容易的 首先需要自己掌握相关的专业知识 并且能够通过相应的考核 对于很多想要从事相关行业的人员来说 可能最好的方式就是先学习一些基本的知识和操作内容 以便能够奠定一定的基础 大多数人觉得学习 Javascript 是一件容易的事情 其实也并没有错 js 的确是一个容易上手的语言 这就导致很多

    2026年3月16日
    2
  • 正斜杠和反斜杠的区别_vb斜杠和反斜杠

    正斜杠和反斜杠的区别_vb斜杠和反斜杠参考链接:正斜杠/和反斜杠\的区别 https://www.cnblogs.com/codingmengmeng/p/6179822.html近来研究源码时发现,常常在路径中出现正斜杠“

    2022年8月2日
    16
  • Pycharm导入anaconda环境

    Pycharm导入anaconda环境pycharm 确实要比 Spyder 功能全面 但是 anaconda 的环境配置实在太方便了 所以想 takeboth 其实很简单 利用 pycharmdebug 用 anaconda 的库 第一步 建立一个 project 打开 setting 第二步 点击 projectinter 第三步 点击箭头所指 第四步 点击 Add 第五步 完成

    2026年3月27日
    1
  • Xray爬虫如何联动到Goby

    Xray爬虫如何联动到Goby可以进行 web 爬虫的 Xray 插件如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中 居左 居右 SmartyPants 创建一个自定义列表如何创建一个注脚注释也是必不可少的 KaTeX 数学公式新的甘特图功能 丰富你的文章 UML 图表 FLowchart 流程图导出与导入导出导入前言 Xray 有多香想必大家应该是知道的 上星期在做某演练的时候就用 Xray 扫到了不少洞 所以 当时看见 Github 上有联动 Xray 的需求 就尝试着写了此插件 本次讲的会稍微仔 啰 细 嗦 一点 希望通过此次分享 大家

    2026年3月16日
    2
  • 最小生成树详解(模板 + 例题)

    最小生成树详解(模板 + 例题)作为一个伪 ACMer 先来首广为人知的打油诗 模拟只会猜题意 贪心只能过样例 数学上来先打表 规律一般是 DP 组合数学碰运气 计算几何瞎暴力 图论一顿套模板 数论只会 GCD 递归递推伤不起 搜索茫然 TLE 分治做得像枚举 暴力枚举数第一 数据结构干瞪眼 怒刷水题找信心 文章目录 1 什么是树 2 最小生成树 3 最小生成树的应用 4 实现最小生成树的两种算法 4 1prim 普里姆算法 4 2kruskal 克鲁斯卡尔算法 5 总结 1 什么是树如果一个无向连通图不包含回路 连通图中不存在环

    2026年3月19日
    3

发表回复

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

关注全栈程序员社区公众号