UniApp开发H5接入微信登录的全过程

网友投稿 842 2023-11-14

−目录微信授权解决思路1.正则匹配请求地址中的参数函数2.进入页面时调用这个函数去看地址中有没有code参数3.使用code换取openid及access_token等参数 4.拉取用户信息(需scope为 snsapi_userinfo)总结

最近的uniapp开发中遇到了H5调微信授权登录的业务，记录一下解决方法

微信授权

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.正则匹配请求地址中的参数函数

?
1
2
3
getUrlCode(name) {
return decodeURIComponent((new RegExp([?|&] + name + = + ([^&;]+?)(&|#|;|$)).exec(location.href) ||[, ])[1].replace(/\+/g, %20)) || null
},

2.进入页面时调用这个函数去看地址中有没有code参数

如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接

3.使用code换取openid及access_token等参数 

当链接中有code的时候携带code请求下一个接口去获取openid和access_token等参数，这部分我是用Java写的后端来实现的，代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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);
}
}

请求成功的话微信的接口会返回类似如下参数

?
1
2
3
4
5
6
7
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}

参数说明 

参数描述access_token网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同expires_inaccess_token接口调用凭证超时时间，单位（秒）refresh_token用户刷新access_tokenopenid用户唯一标识，请注意，在未关注公众号时，用户访问公众号的网页，也会产生一个用户和公众号唯一的OpenIDscope用户授权的作用域，使用逗号（,）分隔

 请求错误时会返回如下

?
1
{"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

参数说明

参数描述access_token网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同openid用户的唯一标识lang返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语

返回说明

正确时返回的JSON数据包如下：

?
1
2
3
4
5
6
7
8
9
10
11
{  
"openid": "OPENID",
"nickname": NICKNAME,
"sex": 1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl":"https://thirdwx.qlogo-/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
参数描述openid用户的唯一标识nickname用户昵称sex用户的性别，值为1时是男性，值为2时是女性，值为0时是未知province用户个人资料填写的省份city普通用户个人资料填写的城市country国家，如中国为CNheadimgurl用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。privilege用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）unionid只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。

错误时微信会返回JSON数据包如下（示例为openid无效）:

?
1
{"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接入微信登录内容请搜索脚本

您可能感兴趣的文章:uni-app 微信小程序授权登录的实现步骤使用 UniApp 实现小程序的微信登录功能uni-app微信小程序登录授权的实现vue中uni-app 实现小程序登录注册功能详解使用uni-app开发微信小程序之登录模块uni-app中使用手机号一键登录的详细图文教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：网页 数据 app开发 示例 管理
上一篇:自己开发app和找app开发公司开发的优势劣势分析！
下一篇:开发一个app大概多少钱？app制作难不难
相关文章

 发表评论

暂时没有评论，来抢沙发吧~