目录
- 微信授权
- 解决思路
- 1.正则匹配请求地址中的参数函数
- 2.进入页面时调用这个函数去看地址中有没有code参数
- 3.使用code换取openid及access_token等参数
- 4.拉取用户信息(需scope为 snsapi_userinfo)
- 总结
最近的uniapp开发中遇到了H5调微信授权登录的业务,记录一下解决方法
微信授权
微信授权分为两种类型:
静默授权:scope=snsapi_base。没有弹窗,只能获取到用户的openid。
非静默授权:scope=snsapi_userinfo。有弹窗,需要用户手动点击同意授权,可获取到用户的openid、昵称、头像、性别。
以下为官方文档中对两种授权的解释
关于网页授权的两种scope的区别说明
1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)
2、以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。
3、用户管理类接口中的“获取用户基本信息接口”,是在用户和公众号产生消息交互或关注后事件推送后,才能根据用户OpenID来获取用户基本信息。这个接口,包括其他微信接口,都是需要该用户(即openid)关注了公众号后,才能调用成功的。
微信授权的流程:
微信开放文档 (qq.com)
在微信的开放文档中有详细的说明,建议先阅读文档理清思路
解决思路
明白了具体的授权流程之后我们就可以来实现我们的业务了
1.正则匹配请求地址中的参数函数
getUrlCode(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null },
2.进入页面时调用这个函数去看地址中有没有code参数
getCode() { let code = this.getUrlCode('code') if (code === null || code === '') { window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.$common.wx.appID + '&redirect_uri=' + encodeURIComponent(this.$common.wx.wxcallback) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect' } else { uni.$u.http.get('/rest/getOpenId', { params: { code: code } }).then(res => { let openId = res.openid; if (openId != null && openId != '') { this.openId = openId console.log(this.openId) } }).catch(err => { }) } },
如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接
3.使用code换取openid及access_token等参数
当链接中有code的时候携带code请求下一个接口去获取openid和access_token等参数,这部分我是用Java写的后端来实现的,代码如下:
package tech.niua.rest.H5Controller; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import org.apache.http.HttpEntity; import org.apache.http.HttpStatus; import org.apache.http.client.methods.CloseableHttpResponse; import org.apache.http.client.methods.HttpGet; import org.apache.http.impl.client.CloseableHttpClient; import org.apache.http.impl.client.HttpClients; import org.apache.http.util.EntityUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import tech.niua.admin.common.constant.WeiXinProperties; import tech.niua.common.model.ResultCode; import tech.niua.common.model.ResultJson; import tech.niua.core.annotation.Log; import java.io.IOException; @RestController @RequestMapping("/rest") public class H5Controller { @Autowired WeiXinProperties weiXinProperties; /** * 根据code获取openid * * @param code * @return */ @Log(value = "根据code获取openid") @GetMapping("/getOpenId") public ResultJson getOpenId(String code) throws IOException { String url = "https://api.weixin.qq.com/sns/oauth2/access_token?&appid=" + weiXinProperties.getAppid() + "&secret=" + weiXinProperties.getAppSecret() + "&code=" + code + "&grant_type=authorization_code"; CloseableHttpClient client = HttpClients.createDefault(); HttpGet httpGet = new HttpGet(url); CloseableHttpResponse res = client.execute(httpGet); if (res.getStatusLine().getStatusCode() == HttpStatus.SC_OK) { HttpEntity entity = res.getEntity(); String result = EntityUtils.toString(entity, "UTF-8"); JSONObject jsonObject = JSON.parseObject(result); return ResultJson.ok(jsonObject); } return ResultJson.failure(ResultCode.BAD_REQUEST); } }
请求成功的话微信的接口会返回类似如下参数
{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" }
参数说明
请求错误时会返回如下
{"errcode":40029,"errmsg":"invalid code"}
4.拉取用户信息(需scope为 snsapi_userinfo)
如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。
请求方法
http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
参数说明
返回说明
正确时返回的JSON数据包如下:
{ "openid": "OPENID", "nickname": NICKNAME, "sex": 1, "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46", "privilege":[ "PRIVILEGE1" "PRIVILEGE2" ], "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }
错误时微信会返回JSON数据包如下(示例为openid无效):
{"errcode":40003,"errmsg":" invalid openid "}
这样业务就实现了,具体的其他接口请参照
微信开放文档 (qq.com)https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
总结
到此这篇关于UniApp开发H5接入微信登录的文章就介绍到这了,更多相关UniApp H5接入微信登录内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联!