測試賬號申請
測號響應流程：客戶端發(fā)送請求，微信服務器收到請求后，轉發(fā)到開發(fā)者服務器上，處理完后在發(fā)送給微信服務器，在返回給客戶端
1、打開微信公眾平臺，點擊測試帳號申請。地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login，
通過微信掃一掃授權就能進入到測試號管理頁面?？梢钥吹阶约旱拈_發(fā)者ID
測試號中的url需要自己有服務器編寫對應接口，點擊提交微信會像url發(fā)送數(shù)據(jù)根據(jù)返回結果判斷url是否配置成功；token為自己定義的字符串
最后在掃碼添加自己微信為開發(fā)者
下載中轉工具NATAPP-內(nèi)網(wǎng)穿透 基于ngrok的國內(nèi)高速內(nèi)網(wǎng)映射工具
下載后在網(wǎng)頁注冊，進行實名認證，申請免費隧道，會生成隧道信息，啟動natapp，
輸入 natapp -authtoken 隧道信息生成的authtoken 回車
這時就會生成自己的域名，在測試時需要一直開啟natapp
若是有企業(yè)公眾號那么就不用以上步驟，直接配置開發(fā)者WX即可
創(chuàng)建小程序測試：使用微信開發(fā)者工具通過掃碼登陸，點擊創(chuàng)建選擇小程序即可，AppID為剛才申請的。選擇需要編寫的模板即可使用HBuilder X與微信開發(fā)者工具實現(xiàn)授權登陸功能
首先需要在HBuilder上導入項目模板，在設置安全中配置微信開發(fā)者工具的目錄，然后點擊運行到小程序模擬器，這樣運行之后就會自動打開微信開發(fā)者工具
創(chuàng)建登陸頁面主要代碼login.vue，主要是調(diào)用微信提供的api獲取用戶的code，這在前端同時還獲取了用戶的基本信息發(fā)送給后端
<button class="confirm-btn" @click="wxlogin" :disabled="logining">登錄</button>
//對應邏輯
methods: {
wxlogin(){
uni.getUserProfile({
desc:"獲取資料",
success: (res) => {
console.log(res)
this.encryptedData=res.encryptedData
this.rawData=res.rawData
this.iv=res.iv
this.signature=res.signature
this.avatarUrl=res.userInfo.avatarUrl
this.name=res.userInfo.nickName
}
});//獲取用戶資料
uni.login({
provider: 'weixin',
success: (res) => {
this.code=res.code;
// console.log(this.code);
}
});
console.log(this.name)
console.log(this.avatarUrl)
//發(fā)送請求
uni.request({
url:"http://localhost:8081/api/dsxs/company/token",
method:"POST",
data: {
// encryptedData:this.encryptedData,
// rawData:this.rawData,
// iv:this.iv,
// signature:this.signature,
code:this.code,
img:this.avatarUrl,
name:this.name
},
success: (e) => {
console.log("向后端請求成功");
}
})
},后端可以通過之前申請的appID、appSecret和前端傳來的code獲取到用戶的openID與session_key
創(chuàng)建springboot項目，添加依賴
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>4.7.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--mybatis-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.3.1</version>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!--lombok用來簡化實體類-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity-engine-core</artifactId>
<version>2.0</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>配置好實體類與數(shù)據(jù)相關代碼后，將自己的appID、appSecret放在配置文件中
wx.open.app_id=xxxxxxxx
wx.open.app_secret=xxxxxxxxx創(chuàng)建獲取配置信息類
@Component
//@PropertySource("classpath:application.properties")
public class ConstantPropertiesUtil implements InitializingBean {
//讀取配置文件并賦值
@Value("${wx.open.app_id}")
private String appId;
@Value("${wx.open.app_secret}")
private String appSecret;
public static String WX_OPEN_APP_ID;
public static String WX_OPEN_APP_SECRET;
@Override
public void afterPropertiesSet() throws Exception {
WX_OPEN_APP_ID = appId;
WX_OPEN_APP_SECRET = appSecret;
}
}編寫用戶登錄控制層，這里我的實現(xiàn)邏輯是根據(jù)前端傳來的code，獲取用戶openID作為用戶的唯一標識。首先在數(shù)據(jù)庫中查詢有無當前用戶，要有創(chuàng)建token返回給前端對應信息。因為前端寫的是一次性將code與用戶信息全傳過來，用戶點擊登陸后會跳轉到授權頁面，用戶若點擊拒絕那么用戶信息將不會傳過來，只有code，這時我的處理邏輯是判斷有無用戶信息，若沒有不存如數(shù)據(jù)庫，這里由于用戶點擊授權會有時間響應所以做了一個短暫的休眠處理。
public class LoginController {
@Autowired
private UserService userService;
@PostMapping("token")
public R login(@RequestBody LoginBO loginBO) throws IOException, InterruptedException {
//拼接對應信息
StringBuffer baseAccessTokenUrl = new StringBuffer()
.append("https://api.weixin.qq.com/sns/jscode2session")
.append("?appid=%s")
.append("&secret=%s")
.append("&js_code=%s")
.append("&grant_type=authorization_code");
String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),
ConstantPropertiesUtil.WX_OPEN_APP_ID,
ConstantPropertiesUtil.WX_OPEN_APP_SECRET,
loginBO.getCode());
//像網(wǎng)站發(fā)送請求
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder().url(accessTokenUrl).build();
Response response = client.newCall(request).execute();
//請求成功會返回對應信息，解析為json
if (response.isSuccessful()){
String body = response.body().string();
JSONObject jsonObject = JSONObject.parseObject(body);
String session_key = jsonObject.getString("session_key");
String openid = jsonObject.getString("openid");
HashMap<String, Object> map = new HashMap<>();
Thread.sleep(1000);
//判斷數(shù)據(jù)中有無當前用戶
User userInfo = userService.getByOpenId(openid);
if (userInfo==null){
User user = new User();
user.setOpenid(openid);
if (loginBO.getName().equals("")){
return R.error().message("授權失敗");
}
user.setNickName(loginBO.getName());
user.setAvatarUrl(loginBO.getImg());
user.setStat(1);
userService.save(user);
userInfo = userService.getByOpenId(openid);
}
String token = JwtHelper.createToken(userInfo.getOpenid(),userInfo.getNickName(),userInfo.getAvatarUrl());
map.put("token",token);
map.put("nickname",userInfo.getNickName());
map.put("img",userInfo.getAvatarUrl());
return R.ok().data(map);
}
return R.error().message("授權失敗，請重試");
}
創(chuàng)建JWT生成token工具類
public class JwtHelper {
//過期時間 毫秒
private static long tokenExpiration = 60*60*1000;
//自定義秘鑰
private static String tokenSignKey = "123456";
public static String createToken(String openid,String nickName,String img) {
String token = Jwts.builder()
//設置分組
.setSubject("DSXS-USER")
//設置字符串過期時間
.setExpiration(new Date(System.currentTimeMillis() + tokenExpiration))
//私有部分
.claim("userId", openid)
.claim("userName", nickName)
.claim("img",img)
//設置秘鑰
.signWith(SignatureAlgorithm.HS512, tokenSignKey)
.compressWith(CompressionCodecs.GZIP)
.compact();
return token;
}
//從生成token字符串獲取userId值
public static String getUserId(String token) {
if(StringUtils.isEmpty(token)) return null;
Jws<Claims> claimsJws = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
Claims claims = claimsJws.getBody();
String userId = (String)claims.get("userId");
return (String)claims.get("userId");
}
public static String getUserName(String token) {
if(StringUtils.isEmpty(token)) return "";
Jws<Claims> claimsJws
= Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
Claims claims = claimsJws.getBody();
return (String)claims.get("userName");
}
public static String getImg(String token) {
if(StringUtils.isEmpty(token)) return "";
Jws<Claims> claimsJws
= Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
Claims claims = claimsJws.getBody();
return (String)claims.get("img");
}創(chuàng)建根據(jù)token獲取用戶信息方法文章來源：http://www.zghlxwxcb.cn/news/detail-782098.html
//根據(jù)token獲取用戶信息
@GetMapping("auth/getUserInfo")
public R getUserInfo(HttpServletRequest request) {
try{
String userId = AuthContextHolder.getUserId(request);
String userName = AuthContextHolder.getUserName(request);
String userImg = AuthContextHolder.getUserImg(request);
User user = new User();
user.setOpenid(userId);
user.setNickName(userName);
user.setAvatarUrl(userImg);
return R.ok().data("userInfo",user);
}catch (ExpiredJwtException e){
System.out.println("token失效");
}
return R.error().message("token失效");
}若有其他實現(xiàn)方式歡迎討論文章來源地址http://www.zghlxwxcb.cn/news/detail-782098.html
到了這里，關于微信公眾平臺測試號申請、使用HBuilder X與微信開發(fā)者工具實現(xiàn)授權登陸功能以及單點登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
