How to obtain openid of wechat applet in uni app project

1、 problem

   When developing wechat apps , We need the current wechat applet users to establish an association with our background users , This is the time , We need to easily obtain the user id provided by wechat through the login ability officially provided by wechat , Quickly build the user system within the applet .

   We can get wechat applet users openid As a unique identifier , Bind with background users , The acquisition method is also relatively simple , Here is the record , It is convenient for the follow-up to quickly find and use .

2、uni Provided login() Method

   Because it's based on uni-app Project development , So we need to understand uni Provided login() Method , Specific support is as follows ：

About uni Of login() Detailed usage of method , You can refer to 《uni-app Official documents 》.

3、 Login of wechat applet

Login process sequence

   First , call wx.login() obtain Temporary login credentials code , And back to the developer server .
   then , call auth.code2Session Interface , Exchange for User unique identification OpenID 、 The user's unique identity under the wechat open platform account UnionID（ If the current applet has been bound to wechat open platform account ） and session key session_key.

Please refer to the details 《 Wechat applet Official documents 》.

4、 Implementation code

4.1、 Back end code implementation

   It is mainly used to call auth.code2Session Interface , Exchange for User unique identification OpenID. Because small programs are needed appid and secret Two constant values , These two values , In especial secret Confidential , Not hungry can leak , Therefore, background code is generally required , If you don't think about safety , The front-end code can also be obtained directly openid.

// obtain openId
//Service Definition in class 
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(" Access to wechat users openId when , The lack of appid、secret or code Parameters ！");
            throw new WxBzException(SysErrorCode.SYS_ERROR_700000," Access to wechat users openId when , The lack of appid、secret or code Parameters ！");
        }
        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();
    }


/** *  obtain openId * @return */
 //Controller Definition in class 
@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、 Front end code implementation

   Front end code is to get code, And then use code Go to the background and call the above method , Exchange for openid that will do . because uni Of login() Method encapsulates wechat wx.login() Method , So what we call directly here is uni.login() Method , return code after , Re pass getOpenId() Method to call the background interface .

Here we put openid There are global variables 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);
		}
	});
}