PC端微信扫码登录 + 移动端微信一键登录

张三的快乐生活

已于 2023-05-23 14:37:35 修改

阅读量300

点赞数

文章标签：微信

于 2023-05-23 14:33:15 首次发布

本文链接：https://blog.csdn.net/weixin_46473856/article/details/130826281

版权

前言：

注册微信开发平台账号并申请认证（300块认证费）
注册微信公众平台账号申请微信公众号并认证（300块认证费）

PC端扫码登录

获取AppId，AppSecret

申请认证之后在微信开发平台点击 “管理中心 / 创建网站应用” 根据指引填写提交
审核通过后就可以得到AppId，AppSecret 需要修改授权回调域（如果本地开发改为本地的项目ip,线上的改为线上的ip）

API的实现

微信公众平台网站应用开发文档

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权    临时票据code参数；
2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

一.获取code 并将code 通过回调域回拼接到域名后面包含code和state
https://open.weixin.qq.com/connect/qrconnect?
appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 

二.通过code获取access_token 通过接收url地址上的code 获取access_token 再将ACCESS_TOKEN存入缓存中
https://api.weixin.qq.com/sns/oauth2/access_tokenappid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

三.通过access_token调用接口 获取用户信息 其中ACCESS_TOKEN从缓存中获取
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

移动端一键登录

PC 和移动的登录方式基本相同本地测试需要在微信开发者工具测试不然接口不走

微信公众开发文档
本地开发需要一个内网穿透推荐有： apache虚拟机（phpstudy 可以配置），natapp 花生壳其他的可以自行探索配置之后需要将laravel运行host更改为0.0.0.0 全部允许
配置js安全域名和网页安全域名（域名需要先在public 下添加微信的验证文件必须能访问到才行验证文件在设置域名时会有下载地址）
在开发者工具中/web开发者工具中添加开发人员不然不能用还需要绑定微信开发平台（不然获取不到唯一id UnionID ）

网页授权流程分为四步：

引导用户进入授权页面同意授权，获取code
通过code换取网页授权access_token（与基础支持中的access_token不同）
如果需要，开发者可以刷新网页授权access_token，避免过期
通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

一. 获取code
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx807d86fb6b3d4fd2&redirect_uri=http%3A%2F%2Fdevelopers.weixin.qq.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
二.根据code，请求以下链接获取access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
三.根据access_token 获取用户信息
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

以上仅为借鉴具体还需要根据实际开发需求更改