一.准備工作:
1.注冊開發者資質
1>目前只支持企業類型; 2>注冊之后,提供微信id和微信秘鑰
2.申請網站應用名稱
3.域名地址
二.配置文件
1.在模塊配置文件中配置application.properties中配置微信id,秘鑰和域名地址
wx.open.app_id=******
# 微信開放平台 appsecret
wx.open.app_secret=******
# 微信開放平台 重定向url
wx.open.redirect_url=******
二.創建類讀取配置文件中的內容
@Component
public class ConstantWxUtils implements InitializingBean {
@Value("${wx.open.app_id}")
private String appId;
@Value("${wx.open.app_secret}")
private String appSecret;
@Value("${wx.open.redirect_url}")
private String redirectUrl;
public static String WX_OPEN_APP_ID;
public static String WX_OPEN_APP_SECRET;
public static String WX_OPEN_REDIRECT_URL;
@Override
public void afterPropertiesSet() throws Exception {
WX_OPEN_APP_ID = appId;
WX_OPEN_APP_SECRET = appSecret;
WX_OPEN_REDIRECT_URL = redirectUrl;
}
}
三.生成微信掃描二維碼
直接請求微信提供的地址,向地址后面拼接參數
demo代碼:
四.掃描二維碼后獲取個人信息
1.執行本地的callback方法,獲取兩個值state(原樣傳遞)和code(臨時票據,隨機且唯一)
2.拿到code后請求微信提供的固定地址,獲取兩個值access_token(訪問憑證)和openid(每個微信唯一標識)
3.拿到access_token和openid后,再去請求一個微信固定地址,最終可以拿到微信個人信息(昵稱,頭像等)
4.根據微信信息使用jwt,生成token字符串,把token字符串通過路徑傳遞到首頁面
demo代碼:
五.首頁如何顯示數據
1.獲取首頁路徑中的token字符串
this.$route.query.token
2.把獲取的token值,放到cookie里面
3.調用后端接口,根據token值獲取用戶信息,把獲取出來的用戶信息放到cookie里面
前端demo代碼:
