亲宝软件园·资讯

展开

UniApp H5接入微信登录

CodeXu-cyber 人气:0

最近的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_inaccess_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

总结

加载全部内容

相关教程
猜你喜欢
用户评论