UniApp开发H5接入微信登录的全过程
作者:CodeXu-cyber 发布时间:2024-04-10 16:21:13
最近的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"
}
参数说明
参数 | 描述 |
---|---|
access_token | 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同 |
expires_in | access_token接口调用凭证超时时间,单位(秒) |
refresh_token | 用户刷新access_token |
openid | 用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID |
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
参数说明
参数 | 描述 |
---|---|
access_token | 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同 |
openid | 用户的唯一标识 |
lang | 返回国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语 |
返回说明
正确时返回的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"
}
参数 | 描述 |
---|---|
openid | 用户的唯一标识 |
nickname | 用户昵称 |
sex | 用户的性别,值为1时是男性,值为2时是女性,值为0时是未知 |
province | 用户个人资料填写的省份 |
city | 普通用户个人资料填写的城市 |
country | 国家,如中国为CN |
headimgurl | 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。 |
privilege | 用户特权信息,json 数组,如微信沃卡用户为(chinaunicom) |
unionid | 只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。 |
错误时微信会返回JSON数据包如下(示例为openid无效):
{"errcode":40003,"errmsg":" invalid openid "}
这样业务就实现了,具体的其他接口请参照
微信开放文档 (qq.com)https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
来源:https://blog.csdn.net/qq_16469323/article/details/123076104
猜你喜欢
- 执行python脚本的时候,有时需要获取命令行参数的相关信息。C语言通过argc和argv来获取参数的个数和参数的内容,python中通过s
- 相信各位phper在日常开发中,会经常遇到需要合并数组的场景。那么,在php中都有哪一些方法可以用来合并数组呢。第一种,使用&ldq
- 使用通用视图的方法是在URLconf文件中创建配置字典,然后把这些字典作为URLconf元组的第三个成员。例如,下面是一个呈现静态“关于”页
- 基于的phantomjs的自动化,会出现1.flash不支持2.部分基于view的按钮点不到,部分按钮是基于flash的(尤其是在于上传按钮
- 环境配置系统:Windows10版本:python 3.8Turtle扫盲1.绘图窗体的设置turtle.setup(width, heig
- python数组和矩阵先创建一个一维数组直接定义一个数组:a = [1,2,3,4,5]b = ['a','c
- 如今WEB的安全问题影响着整个安全界,SQL注入,跨站脚本攻击等攻击受到了关注。 网络安全问题日益变的更加重要,国内依然有很多主机受到此类安
- 实际应用中,会遇到需要把表的某些行转换成列,或者把列转换成行的情况。比如一张表在数据库中是这样的:图1但是,需要的结果可能是这样:图2这个时
- pytorch中尝试用多进程加载训练数据集,源码如下:trainloader = torch.utils.data.DataLoader(t
- 快速上手我们都知道go语言没有原生的注解,但是做业务开发有些时候没有注解确实不方便。go-doudou通过go语言标准库ast/parser
- 一:需重定义神经网络继续训练的方法1.训练代码import numpy as npimport tensorflow as tfx_data
- 本文介绍了vscode 远程调试python的方法,分享给大家,具有如下:实验环境远程服务器:京东云,1核2G,centos7.3 64bi
- 引言 本文通过python3、第三方python库Selenium和谷歌浏览器Chrome,完成WPS表单的自动填写。开发环境配置 py
- 一、缓存目的1、减小过载2、避免重复计算3、提高系统性能二、如何进行缓存三、缓存类型四、缓存粒度分类五、缓存的设置与使用示例一:CACHES
- 使用pip安装python库的几种方式1、使用pip在线安装1.1 安装单个package格式如下:pip install SomePack
- TCP客户端程序开发1. 开发 TCP 客户端程序开发步骤回顾创建客户端套接字对象和服务端套接字建立连接发送数据接收数据关闭客户端套接字2.
- Balloons(气球状提示)问题摘要气球状提示(Balloon)是一个小型的弹出窗口,用于通知用户出现非关键性问题或控件处于某种特殊情况。
- 为什么要使用Enum.(Why?)在普通类别中,枚举和我们在对象中定义的类变量一样的,每一个类变量就是一个枚举项,访问方式如下:class
- 通过锁机制,可以实现多线程同时对某个表进行操作。如下图所示,在某个时刻,用户甲、用户乙、用户丙可能会同时或者先后(前面一个作业还没有完成)对
- 模块的作用是:允许从任何文件里得到任何一行或几行,并且使用缓存进行优化。有几个API接口linecache.getlines(filenam