在uni-app项目中,如何实现微信小程序openid的获取

1、问题

  在开发微信小程序的时候,我们需要当前的微信小程序用户和我们的后台用户建立关联,这个时候,我们就需要通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。

  我们可以获取微信小程序用户的openid作为唯一标识,和后台用户进行绑定,获取方式也比较简单,这里做一下记录,方便后续可以快速查找并使用。

2、uni提供的login()方法

  因为要基于uni-app项目进行开发,所以我们需要了解uni提供的login()方法,具体支持如下:
在这里插入图片描述

关于uni的login()方法的详细用法,可以参考《uni-app 官方文档》

3、微信小程序的登录

登录流程时序

在这里插入图片描述
  首先,调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
  然后,调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key。

详细内容请参考《微信小程序 官方文档》

4、实现代码

4.1、后端代码实现

  主要实现调用 auth.code2Session 接口,换取 用户唯一标识 OpenID。因为需要用到小程序的appid和secret两个常量值,这两个值,尤其是secret需要保密的,不饿能够泄露,所以一般需要后台代码实现,如果不考虑安全问题,前端代码也可以直接获取openid。

//获取openId
//Service类中定义
private final static String GetOpenId = "https://api.weixin.qq.com/sns/jscode2session?appid={appid}&secret={secret}&grant_type=authorization_code&js_code={code}";

public String getOpenId(String appid, String secret,String code){
        if(StringUtils.isEmpty(appid) || StringUtils.isEmpty(secret) || StringUtils.isEmpty(code)){
            logger.error("获取微信用户openId时,缺少appid、secret或code参数!");
            throw new WxBzException(SysErrorCode.SYS_ERROR_700000,"获取微信用户openId时,缺少appid、secret或code参数!");
        }
        Map<String, Object> param = new HashMap<>();
        param.put("appid",appid);
        param.put("secret",secret);
        param.put("code",code);
        ResponseEntity resp = restTemplate.getForEntity(GetOpenId, String.class,param);
        return resp.getBody().toString();
    }


/**
 * 获取openId
 * @return
 */
 //Controller类中定义
@RequestMapping("/getOpenId")
public String getOpenId(String code){
   String openId = wxCommonService.getOpenId(WxConstants.WX_XCX_APPID,WxConstants.WX_XCX_SECRET,code);
   return this.renderSuccessData(openId);
}
4.2、前端代码实现

  前端代码就是获取code,然后再使用code去后台调用上述方法,换取openid即可。因为uni的login()方法封装了微信wx.login()方法,所以我们这里直接调用的是uni.login()方法,返回code后,再通过getOpenId()方法调用后台接口即可。

这里我们把openid存在了全局变量globalData

getUserEnter(){
	uni.login({
		success:(res)=>{
			this.$u.api.getOpenId({
				code:res.code
			}).then( data => {
				getApp().globalData.openid = JSON.parse(data.data).openid;
				console.log(getApp().globalData.openid);
			});
		},
		fail:(err) => {
			console.log(err);
		}
	});
}
  • 1
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uni-app 是一款跨平台应用开发框架,既支持生成 App,也支持生成各个平台的小程序,其微信小程序的授权方法有一些不同。 首先,对于 App 来说,可以使用 uni-app 提供的登录模块,该模块支持微信、支付宝等第三方平台的授权登录。对于微信授权登录,可以通过以下步骤实现: 1. 在 uni-app项目安装并引入 uni-login 模块:`npm install @dcloudio/uni-login` 2. 在需要授权的页面,添加登录按钮或其它触发授权的元素。 3. 在点击登录按钮的事件处理函数,调用 uni.login 方法进行微信登录授权。 4. 在 uni.login 的回调,可以通过返回的 code 或 token 等信息进行登录验证、获取用户信息等操作。 而对于生成微信小程序uni-app 也提供了相关的授权方式。在 uni-app ,可以使用 openidunionid 来进行用户标识和登录验证。具体的授权方法如下: 1. 在微信小程序app.json 文件,将 `"appid"` 字段设置为你的小程序AppID。 2. 在 uni-app项目引入并使用 uni.login 方法,通过该方法登录获取 code。 3. 将获取到的 code 发送至后台,后台通过 code 调用微信的 API 获取 openid 和 session_key。 4. 后台获取openid 和 session_key 后,可以将其存储在数据库,用于用户标识和登录验证。 总之,无论是在 uni-app 生成 App 还是小程序,都可以通过 uni-login 模块实现微信授权登录。对于 App,可以直接使用登录模块进行授权;对于小程序,可以通过 openid 和 session_key 实现用户标识和登录验证。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姠惢荇者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值