微信扫码登录的实现方式

时间：2024-02-16 17:05:52

首先要明确微信扫码登录的流程，扫码是扫码登录。就是在登录界面显示一个二维码，用户使用手机微信扫一扫功能扫描这个二维码，扫描后手机上有提示登录哪个应用，点击确定后网页就处于登录状态了

　　如何实现微信扫码登录呢，首先需要注册微信开放平台，注意是微信开放平台不是公众平台，公众平台是做公众号应用的，开放平台才可以实现扫码登录（当然如果用户公众平台并且用户已经关注了公众号也可以从另一个角度实现扫码登录，但是这种方式用户体验上会差一些，前提是先需要关注公众号）。

　　注册开放平台通过https://open.weixin.qq.com/进行注册，并且通过认证，认证需要企业身份哦，这个有点难，不过如果你是给公司开发这项功能，公司会帮你认证的，如果公司也不清楚那就需要你和公司做好沟通啦。认证通过后先申请网页应用，这样就会获取到AppID和AppSecret。有了这两个东西就可以进行开发了。

　　第一步是显示二维码，这各有两种方式，一种是打开一个新页面显示二维码可以通过构建类似https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect的地址，各项参数说明如下：

参数说明
参数是否必须说明
appid 是 应用唯一标识
redirect_uri 是 请使用urlEncode对链接进行处理
response_type 是 填code
scope 是 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
state 否 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验

第二种方式是在当前页面嵌入二维码，这是首先要引入一个js文件，然后使用js代码调用，如下：

 

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
var obj = new WxLogin({
                              id:"显示二维码的容器id", 
                              appid: "申请到的appid", 
                              scope: "snsapi_login", 
                              redirect_uri: "这里是回调地址",
                              state: "",
                              style: "black",
                              href: ""
                            });

 

这样页面打开后也会加载出二维码

用户扫码允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数,这是要通过code获取access_token，url格式https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数说明
参数是否必须说明
appid 是 应用唯一标识，在微信开放平台提交应用审核通过后获得
secret 是 应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
code 是 填写第一步获取的code参数
grant_type 是 填authorization_code

正确的话会返回access_token，最后通过access_token可以获取到用户的某些信息，这样就可以记录后实现扫码登录了。

 

相关文章