在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);
}
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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15