Uniapp + SpringBoot 開發(fā)微信H5項目微信公眾號授權(quán)登錄 JAVA后臺（一、配置使用微信公眾平臺測試公眾號）

這篇具有很好參考價值的文章主要介紹了Uniapp + SpringBoot 開發(fā)微信H5項目微信公眾號授權(quán)登錄 JAVA后臺（一、配置使用微信公眾平臺測試公眾號）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

申請測試號進行調(diào)試開發(fā)，測試號擁有大部分服務(wù)號有的接口權(quán)限。

一、接口配置信息填寫校驗

這里需要填寫一個URL和一個Token驗證字符串
我這里是用了natapp內(nèi)網(wǎng)穿透將本地的后臺8080端口服務(wù)映射到了 http://x7zws8.natappfree.cc
https://natapp.cn/在natapp官網(wǎng)注冊賬號并且申請免費隧道
h5授權(quán)公眾號登錄 springboot,java,uni-app,spring boot,微信,前端,微信公眾平臺
申請完了之后把域名綁定到自己的后臺

后臺接口：

    @RequestMapping(value = "/check", produces = "text/plain;charset=UTF-8", method = {RequestMethod.GET, RequestMethod.POST})
    //微信服務(wù)器根據(jù)配置的token，結(jié)合時間戳timestamp和隨機數(shù)nonce通過SHA1生成簽名，發(fā)起get請求，檢驗token的正確性，
    //檢驗正確原樣返回隨機字符串echostr，失敗返回空字符串
    public String check(HttpServletRequest request, HttpServletResponse response,
                        @RequestParam("signature") String signature,
                        @RequestParam("timestamp") String timestamp,
                        @RequestParam("nonce") String nonce,
                        String echostr) throws Exception {
        //若是為get請求，則為開發(fā)者模式驗證
        if ("get".equals(request.getMethod().toLowerCase())) {
            String checkSignature = SHA1.creatSHA1("token", timestamp, nonce);
            if (checkSignature.equals(signature)) {
                return echostr;
            }
        }
        return null;
    }

SHA1：

import java.security.MessageDigest;
import java.util.Arrays;

//SHA1加密算法類
public class SHA1 {
    /**
     *
     * @param token
     * @param timestamp 時間戳
     * @param nonce 隨機字符串
     * @return 安全簽名
     * @throws AesException
     */
    public static String creatSHA1(String token, String timestamp, String nonce) throws AesException
    {
        try {
            String[] array = new String[] { token, timestamp, nonce};
            StringBuffer sb = new StringBuffer();
            // 字符串排序
            Arrays.sort(array);
            for (int i = 0; i < 3; i++) {
                sb.append(array[i]);
            }
            String str = sb.toString();
            // SHA1簽名生成
            MessageDigest md = MessageDigest.getInstance("SHA-1");
            md.update(str.getBytes());
            byte[] digest = md.digest();

            StringBuffer hexstr = new StringBuffer();
            String shaHex = "";
            for (int i = 0; i < digest.length; i++) {
                shaHex = Integer.toHexString(digest[i] & 0xFF);
                if (shaHex.length() < 2) {
                    hexstr.append(0);
                }
                hexstr.append(shaHex);
            }
            return hexstr.toString();
        } catch (Exception e) {
            e.printStackTrace();
            throw new AesException(AesException.ComputeSignatureError);
        }
    }
}

AesException：

public class AesException extends Exception {

    public final static int OK = 0;
    public final static int ValidateSignatureError = -40001;
    public final static int ParseXmlError = -40002;
    public final static int ComputeSignatureError = -40003;
    public final static int IllegalAesKey = -40004;
    public final static int ValidateAppidError = -40005;
    public final static int EncryptAESError = -40006;
    public final static int DecryptAESError = -40007;
    public final static int IllegalBuffer = -40008;

    private int code;

    private static String getMessage(int code) {
        switch (code) {
            case ValidateSignatureError:
                return "簽名驗證錯誤";
            case ParseXmlError:
                return "xml解析失敗";
            case ComputeSignatureError:
                return "sha加密生成簽名失敗";
            case IllegalAesKey:
                return "SymmetricKey非法";
            case ValidateAppidError:
                return "appid校驗失敗";
            case EncryptAESError:
                return "aes加密失敗";
            case DecryptAESError:
                return "aes解密失敗";
            case IllegalBuffer:
                return "解密后得到的buffer非法";
            default:
                return null; // cannot be
        }
    }

    public int getCode() {
        return code;
    }

    public AesException(int code) {
        super(getMessage(code));
        this.code = code;
    }
}

校驗走完之后配置測試號中網(wǎng)頁服務(wù)下的網(wǎng)頁授權(quán)獲取基本用戶
h5授權(quán)公眾號登錄 springboot,java,uni-app,spring boot,微信,前端,微信公眾平臺

這里填自己前端項目運行后的地址我的后端項目端口是8080 uniapp前端運行完了之后的端口是8081所以我配置的是本地的ipv4 ip+端口號

二、后端配置 + 拼裝URL + 通過Code獲取用戶OpenID和基本信息

在SpringBoot項目的pom中引入依賴

        <dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>weixin-java-mp</artifactId>
            <version>4.6.0</version>
        </dependency>

創(chuàng)建配置類

import com.ruoyi.system.domain.WechatConfig;
import com.ruoyi.system.service.IWechatConfigService;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl;
import me.chanjar.weixin.mp.config.WxMpConfigStorage;
import me.chanjar.weixin.mp.config.impl.WxMpDefaultConfigImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class WxMpConfig {

    @Autowired
    private IWechatConfigService wechatConfigService;

    @Bean
    public WxMpConfigStorage wxMpConfigStorage() {
        WxMpDefaultConfigImpl configStorage = new WxMpDefaultConfigImpl();
        WechatConfig wechatConfig = wechatConfigService.selectWechatConfigById(1L);
        //我這里是做成了獲取數(shù)據(jù)庫中保存的AppID和AppSercret正常情況下寫死就可以
        configStorage.setAppId(wechatConfig.getAppId());
        configStorage.setSecret(wechatConfig.getAppSecret());
        return configStorage;
    }

    @Bean
    public WxMpService wxMpService(WxMpConfigStorage configStorage) {
        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(configStorage);
        return wxMpService;
    }
}

之后就可以在Controller中正常使用了
/authorize 接口其實只做了一步操作就是構(gòu)建獲取code的url 構(gòu)建完成之后返回給前端前端直接重定向
buildAuthorizationUrl其中的三個參數(shù)
第一個是回調(diào)地址
第二個填snsapi_base 或者 snsapi_userinfo
snsapi_base 是之能獲取到 openid 而 snsapi_userinfo 是可以獲取到用戶基本信息
snsapi_base是靜默獲取而 snsapi_userinfo 需要用戶點擊授權(quán)

@RestController
@RequestMapping("/wx")
public class WeChatController extends BaseController {
    @GetMapping("/authorize")
    public AjaxResult test() {
        WxOAuth2Service oAuth2Service = wxMpService.getOAuth2Service();
        String redirectUrl = oAuth2Service.buildAuthorizationUrl("http://192.168.1.100:8081", "snsapi_userinfo", null);
        return success(redirectUrl);
    }

    @GetMapping("/userInfo")
    public AjaxResult userInfo(@RequestParam("code") String code) throws WxErrorException {
        WxOAuth2Service oAuth2Service = wxMpService.getOAuth2Service();
        WxOAuth2AccessToken wxMpOAuth2AccessToken = oAuth2Service.getAccessToken(code);
        logger.info("【wxMpOAuth2AccessToken：】{}", wxMpOAuth2AccessToken);
        String openId = wxMpOAuth2AccessToken.getOpenId();
        logger.info("【openid：】{}", openId);
        WxOAuth2UserInfo userInfo = oAuth2Service.getUserInfo(wxMpOAuth2AccessToken, "zh_CN");
        logger.info("【用戶信息：】{}", userInfo.toString());
        return success(userInfo);
    }
}

二、uniapp前端調(diào)用

前端首先調(diào)用 /authorize 獲取拼裝好的地址然后重定向并獲取code
getUrlCode來判斷地址中是否包含code如果有的話拿著code去獲取用戶基本信息和openid文章來源地址http://www.zghlxwxcb.cn/news/detail-839140.html

<template>
	<view class="content">
		<image class="logo" :src="loginUser.headImgUrl ? loginUser.headImgUrl : '/static/logo.png'"></image>
		<view class="text-area">
			<text class="title">{{loginUser.openid}}</text>
		</view>
		<button type="default" @click="login">登錄</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginUser:{}
			}
		},
		onLoad(query) {
			const that = this;
			let code = that.getUrlCode();
			if (code) {
				console.log("有code")
				console.log(code)
				uni.request({
					url: "http://192.168.1.100:8080/wx/userInfo",
					data: {
						code: code
					},
					success(res) {
						console.log("獲取到用戶信息")
						console.log(res.data.data);
						that.loginUser = res.data.data;
					}
				})
			} else {
				console.log("沒有code")
			}
		},
		methods: {
			login() {
				uni.request({
					url: "http://192.168.1.100:8080/wx/authorize",
					success(res) {
						window.location.href = res.data.msg;
					}
				})
			},
			getUrlCode() {
				return (
					decodeURIComponent(
						(new RegExp("[?|&]" + "code" + "=" + "([^&;]+?)(&|#|;|$)").exec(
							location.href
						) || [, ""])[1].replace(/\+/g, "%20")
					) || null
				);
			},
		}
	}
</script>

到了這里，關(guān)于Uniapp + SpringBoot 開發(fā)微信H5項目微信公眾號授權(quán)登錄 JAVA后臺（一、配置使用微信公眾平臺測試公眾號）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！