微信扫码登录开发

一、需要在微信开放平台注册账号,添加网站应用信息,然后审核通过后会得到appid和AppSecret,我们在配置上回调域名,即可完成扫码登录。

二、网页授权流程分为四步:
  1. 引导用户进入授权页面同意授权,获取code
  2. 通过code换取网页授权access_token(与基础支持中的access_token不同)
  3. 如果需要,开发者可以刷新网页授权access_token,避免过期
  4. 通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)
三、
网页授权回调域名:开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改回调域名,注意回调域名为一个字符串,不能带有http://、https://等字样
网页授权的两种scope:
  • snsapi_base,用户无感知进入回调页,用来获取进入页面的用户的openid
  • snsapi_userinfo:需用户同意才能授权,因为用户同意过,所以不需要关注,可以获取该用户的基本信息
网页授权access_token和普通的access_token
  • 微信网页授权是通过OAuth2.0机制实现的,在用户授权给公众号后,公众号可以获取到一个网页授权特有的接口调用凭证(网页授权access_token),通过网页授权access_token可以进行授权后接口调用,如获取用户基本信息;
  • 其他微信接口,需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。
关于UnionID机制:UnionID是微信用户的唯一标识
OAuth:是一个开放标准,用户运行第三方应用访问该用户在某一网站上存储的私密信息(昵称,头像等),而无需将用户名和密码提供给第三方应用。微信的扫码登录是基于OAuth2.0标准实现的。
四、具体实现步骤:
  1. 用户同意授权,获取code,此处我们选择的 scope为:snsapi_login,因为我们需要扫码登录,如果用snsapi_userinfo不能实现扫码,访问路径及参数:
StringBuilder sb = new StringBuilder( 250 );
sb.append( "?appid=" ).append(appid).append( "&" );
sb.append( "redirect_uri=" ).append(redirectUri).append( "&" );
sb.append( "response_type=code" ).append( "&" );
sb.append( "scope=snsapi_login" ).append( "&" );
sb.append( "state=" ).append(state);
参数说明:
appid:应用唯一标识,在网站应用认证的时候得到的
redirect_uri:扫码成功,用户同意授权之后,微信回调的url
response_type:填code即可
scope:应用授权作用域,网页授权填写snsapi_login即可,多个作用域用逗号隔开
state:用于保存请求和回调状态,授权请求后会原样带给第三方,该参数会防止 csrf攻击,可用随机数家session进行校验,如验证码页面的上一个页面是我们扫码成功之后需要跳转的页面,可以将这个页面的连接存在redis中,而redis的key即为这个state,两全其美,一是我们可以扫码之后的跳转页面,二是我们可以验证是否受到了csrf攻击。
2.
2.1通过code换取网页授权access_token(与基础支持中的access_token不同)
在用户扫码并且同意授权之后,微信会回调第三方系统,传过来的参数有code和state,code为换取access_token的凭证,换取凭证的连接: https://api.weixin.qq.com/sns/oauth2/access_token
传入参数: sb.append( "?appid=" ).append(appid);
sb.append( "&secret=" ).append(secret);
sb.append( "&code=" ).append(code);
sb.append( "&grant_type=authorization_code" );
返回参数:
参数说明
access_token接口调用凭证,超时时间为32分钟
expires_inaccess_token接口调用凭证超时时间,单位(秒)
refresh_token用户刷新access_token
openid授权用户唯一标识
scope用户授权的作用域,使用逗号(,)分隔
unionid当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。
2.2获取access_token凭证之后,可通过凭证拿到微信用户的信息,访问连接: https://api.weixin.qq.com/sns/userinfo
传入参数:access_token
openid
这两个参数均可以在上一步获取的token数据集中拿到
返回参数:
参数说明
openid普通用户的标识,对当前开发者帐号唯一
nickname普通用户昵称
sex普通用户性别,1为男性,2为女性
province普通用户个人资料填写的省份
city普通用户个人资料填写的城市
country国家,如中国为CN
headimgurl用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
privilege用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
unionid用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。
建议保存unionid到本地,因为在同一个开发平台下的应用如果要互通的话,可以用这个字段来获取用户信息。以上得到了微信用户信息,业务系统可根据这些信息进行登录验证或绑定操作。
### React 应用中的微信登录功能实现 #### 准备工作 为了在 React 应用中集成微信登录,需先完成一些准备工作。这包括获取企业微信的应用凭证以及配置相应的回调地址。 - **注册并创建应用**:前往微信公众平台或企业微信管理后台,按照指引创建一个新的自建应用,并记录下 `AppID` 和 `AppSecret`。 - **设置回调域名**:确保已将用于部署前端项目的服务器域名添加到合法的 OAuth2 授权回调页列表中[^3]。 #### 前端逻辑编写 下面展示了一个简单的 React 组件来处理微信登录的过程: ```jsx import React, { useEffect, useState } from 'react'; function WeChatLoginButton({ onLogin }) { const [isChecking, setIsChecking] = useState(false); // 模拟场景 ID 获取过程,在实际项目里应由服务端提供 let sceneId = 'unique-scene-id'; function startCheckStatus() { setIsChecking(true); async function checkLoginStatus() { try { const response = await fetch(`/wxlogin/status?sceneId=${sceneId}`); const status = await response.text(); if (status === 'success') { clearInterval(timer); setIsChecking(false); onLogin(); // 成功后调用父组件传递的方法执行后续动作 } } catch(error) { console.error('Failed to get login status', error); } } var timer = setInterval(checkLoginStatus, 3000); return () => { clearInterval(timer); // 清除定时器防止内存泄漏 }; } return ( <> {!isChecking && <button onClick={startCheckStatus}>点击此处使用微信描二维登录</button>} {isChecking && <div>正在等待您的确认...</div>} </> ); } ``` 此代片段定义了一个名为 `WeChatLoginButton` 的函数式组件,它负责显示一个按钮供用户触发微信流程,并通过轮询的方式定期向服务器请求当前用户的登录状态直到收到成功的响应为止[^1]。 #### 后端支持 对于上述前端部分的工作来说,还需要有一个对应的 API 来配合完成整个登录验证环节。这里假设已经存在 `/wxlogin/status` 这样的 RESTful 风格接口用来返回给定 `sceneId` 对应的状态信息;另外,则需要构建 Websocket 或者其他形式的消息推送机制以便及时通知客户端有关于认证结果的变化情况。 此外,如果涉及到发送邮件验证等功能的话,可以参照如下方式扩展控制器方法以适应不同需求下的身份验证手段[^2]: ```java @PostMapping("/sendEmailVerification") public ResponseEntity<?> sendEMail(@RequestParam("email") String email){ String code = MailUtil.generateRandomCode(); sendCodeService.sendEMail(email, code); return new ResponseEntity<>("Verification Email Sent!", HttpStatus.OK); } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值