微信扫码登录实现
1.前端準備
定義一個div容器，用于展示生成的二維碼
<div id="weixinLogin"></div>
安裝二維碼插件
npm install vue-qriously --save-dev
在main.js中進行引入插件
import VueQriously from 'vue-qriously' Vue.use(VueQriously)
編寫一個微信二維碼生成插件的方法
weixinLogin() {
getLoginParam().then(response=>{
varobj=newWxLogin({
self_redirect:true,
id:'weixinLogin',//需要顯示的容器id
appid:response.data.appid,//公眾號appidwx*******
scope:response.data.scope,//網頁默認即可
redirect_uri:response.data.redirectUrl,//redirectUrl//授權成功后回調的url
state:response.data.state,//可設置為簡單的隨機數加session用來校驗
style:'black',//提供"black"、"white"可選。二維碼的樣式
href:''//外部css文件url，需要https
})
})
},
注意：此處需要的參數定義在后端，需要調用接口來獲取，對應接口如下
api：
const BASEURL = "/api/user/wx";
//獲取微信參數
export function getLoginParam() {
return request({
url: `${BASEURL}/getLoginParam/`,
method: "get",
});
}
2.后端實現
后端接口實現：
WX_OPEN_REDIRECT_URL為http://localhost:8160/api/user/wx/callback
這里的url即為掃描成功后跳轉的頁面
/**
* 獲取二維碼相關參數
*/
@GetMapping("getLoginParam")
@ResponseBody
public Result getLoginParam() {
Map<String, Object> map = new HashMap<>();
map.put("appid", ConstantWxUtils.WX_OPEN_APP_ID);
map.put("scope", "snsapi_login");
//對redirect_url進行URLEncoder編碼
String redirectUrl = ConstantWxUtils.WX_OPEN_REDIRECT_URL;
try {
redirectUrl = URLEncoder.encode(redirectUrl, "utf-8");
} catch (Exception e) {
e.printStackTrace();
}
map.put("redirectUrl", redirectUrl);
map.put("response_type", "code");
map.put("state", "Eric");
return Result.ok(map);
}
遠程調用微信接口可能用到的工具類
package com.gh.util;
import org.apache.commons.io.IOUtils;
import org.apache.commons.lang.StringUtils;
import org.apache.http.Consts;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.HttpClient;
import org.apache.http.client.config.RequestConfig;
import org.apache.http.client.config.RequestConfig.Builder;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.conn.ConnectTimeoutException;
import org.apache.http.conn.ssl.SSLConnectionSocketFactory;
import org.apache.http.conn.ssl.SSLContextBuilder;
import org.apache.http.conn.ssl.TrustStrategy;
import org.apache.http.conn.ssl.X509HostnameVerifier;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;
import org.apache.http.message.BasicNameValuePair;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLException;
import javax.net.ssl.SSLSession;
import javax.net.ssl.SSLSocket;
import java.io.IOException;
import java.net.SocketTimeoutException;
import java.security.GeneralSecurityException;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Set;
public class HttpClientUtils {
public static final int connTimeout=10000;
public static final int readTimeout=10000;
public static final String charset="UTF-8";
private static HttpClient client = null;
static {
PoolingHttpClientConnectionManager cm = new PoolingHttpClientConnectionManager();
cm.setMaxTotal(128);
cm.setDefaultMaxPerRoute(128);
client = HttpClients.custom().setConnectionManager(cm).build();
}
public static String postParameters(String url, String parameterStr) throws ConnectTimeoutException, SocketTimeoutException, Exception{
return post(url,parameterStr,"application/x-www-form-urlencoded",charset,connTimeout,readTimeout);
}
public static String postParameters(String url, String parameterStr,String charset, Integer connTimeout, Integer readTimeout) throws ConnectTimeoutException, SocketTimeoutException, Exception{
return post(url,parameterStr,"application/x-www-form-urlencoded",charset,connTimeout,readTimeout);
}
public static String postParameters(String url, Map<String, String> params) throws ConnectTimeoutException,
SocketTimeoutException, Exception {
return postForm(url, params, null, connTimeout, readTimeout);
}
public static String postParameters(String url, Map<String, String> params, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,
SocketTimeoutException, Exception {
return postForm(url, params, null, connTimeout, readTimeout);
}
public static String get(String url) throws Exception {
return get(url, charset, null, null);
}
public static String get(String url, String charset) throws Exception {
return get(url, charset, connTimeout, readTimeout);
}
/**
* 發送一個 Post 請求, 使用指定的字符集編碼.
*
* @param url
* @param body RequestBody
* @param mimeType 例如 application/xml "application/x-www-form-urlencoded" a=1&b=2&c=3
* @param charset 編碼
* @param connTimeout 建立鏈接超時時間,毫秒.
* @param readTimeout 響應超時時間,毫秒.
* @return ResponseBody, 使用指定的字符集編碼.
* @throws ConnectTimeoutException 建立鏈接超時異常
* @throws SocketTimeoutException 響應超時
* @throws Exception
*/
public static String post(String url, String body, String mimeType,String charset, Integer connTimeout, Integer readTimeout)
throws ConnectTimeoutException, SocketTimeoutException, Exception {
HttpClient client = null;
HttpPost post = new HttpPost(url);
String result = "";
try {
if (StringUtils.isNotBlank(body)) {
HttpEntity entity = new StringEntity(body, ContentType.create(mimeType, charset));
post.setEntity(entity);
}
// 設置參數
RequestConfig.Builder customReqConf = RequestConfig.custom();
if (connTimeout != null) {
customReqConf.setConnectTimeout(connTimeout);
}
if (readTimeout != null) {
customReqConf.setSocketTimeout(readTimeout);
}
post.setConfig(customReqConf.build());
HttpResponse res;
if (url.startsWith("https")) {
// 執行 Https 請求.
client = createSSLInsecureClient();
res = client.execute(post);
} else {
// 執行 Http 請求.
client = HttpClientUtils.client;
res = client.execute(post);
}
result = IOUtils.toString(res.getEntity().getContent(), charset);
} finally {
post.releaseConnection();
if (url.startsWith("https") && client != null&& client instanceof CloseableHttpClient) {
((CloseableHttpClient) client).close();
}
}
return result;
}
/**
* 提交form表單
*
* @param url
* @param params
* @param connTimeout
* @param readTimeout
* @return
* @throws ConnectTimeoutException
* @throws SocketTimeoutException
* @throws Exception
*/
public static String postForm(String url, Map<String, String> params, Map<String, String> headers, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,
SocketTimeoutException, Exception {
HttpClient client = null;
HttpPost post = new HttpPost(url);
try {
if (params != null && !params.isEmpty()) {
List<NameValuePair> formParams = new ArrayList<NameValuePair>();
Set<Entry<String, String>> entrySet = params.entrySet();
for (Entry<String, String> entry : entrySet) {
formParams.add(new BasicNameValuePair(entry.getKey(), entry.getValue()));
}
UrlEncodedFormEntity entity = new UrlEncodedFormEntity(formParams, Consts.UTF_8);
post.setEntity(entity);
}
if (headers != null && !headers.isEmpty()) {
for (Entry<String, String> entry : headers.entrySet()) {
post.addHeader(entry.getKey(), entry.getValue());
}
}
// 設置參數
Builder customReqConf = RequestConfig.custom();
if (connTimeout != null) {
customReqConf.setConnectTimeout(connTimeout);
}
if (readTimeout != null) {
customReqConf.setSocketTimeout(readTimeout);
}
post.setConfig(customReqConf.build());
HttpResponse res = null;
if (url.startsWith("https")) {
// 執行 Https 請求.
client = createSSLInsecureClient();
res = client.execute(post);
} else {
// 執行 Http 請求.
client = HttpClientUtils.client;
res = client.execute(post);
}
return IOUtils.toString(res.getEntity().getContent(), "UTF-8");
} finally {
post.releaseConnection();
if (url.startsWith("https") && client != null
&& client instanceof CloseableHttpClient) {
((CloseableHttpClient) client).close();
}
}
}
/**
* 發送一個 GET 請求
*/
public static String get(String url, String charset, Integer connTimeout,Integer readTimeout)
throws ConnectTimeoutException,SocketTimeoutException, Exception {
HttpClient client = null;
HttpGet get = new HttpGet(url);
String result = "";
try {
// 設置參數
Builder customReqConf = RequestConfig.custom();
if (connTimeout != null) {
customReqConf.setConnectTimeout(connTimeout);
}
if (readTimeout != null) {
customReqConf.setSocketTimeout(readTimeout);
}
get.setConfig(customReqConf.build());
HttpResponse res = null;
if (url.startsWith("https")) {
// 執行 Https 請求.
client = createSSLInsecureClient();
res = client.execute(get);
} else {
// 執行 Http 請求.
client = HttpClientUtils.client;
res = client.execute(get);
}
result = IOUtils.toString(res.getEntity().getContent(), charset);
} finally {
get.releaseConnection();
if (url.startsWith("https") && client != null && client instanceof CloseableHttpClient) {
((CloseableHttpClient) client).close();
}
}
return result;
}
/**
* 從 response 里獲取 charset
*/
@SuppressWarnings("unused")
private static String getCharsetFromResponse(HttpResponse ressponse) {
// Content-Type:text/html; charset=GBK
if (ressponse.getEntity() != null && ressponse.getEntity().getContentType() != null && ressponse.getEntity().getContentType().getValue() != null) {
String contentType = ressponse.getEntity().getContentType().getValue();
if (contentType.contains("charset=")) {
return contentType.substring(contentType.indexOf("charset=") + 8);
}
}
return null;
}
/**
* 創建 SSL連接
* @return
* @throws GeneralSecurityException
*/
private static CloseableHttpClient createSSLInsecureClient() throws GeneralSecurityException {
try {
SSLContext sslContext = new SSLContextBuilder().loadTrustMaterial(null, new TrustStrategy() {
public boolean isTrusted(X509Certificate[] chain,String authType) throws CertificateException {
return true;
}
}).build();
SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(sslContext, new X509HostnameVerifier() {
@Override
public boolean verify(String arg0, SSLSession arg1) {
return true;
}
@Override
public void verify(String host, SSLSocket ssl)
throws IOException {
}
@Override
public void verify(String host, X509Certificate cert)
throws SSLException {
}
@Override
public void verify(String host, String[] cns,
String[] subjectAlts) throws SSLException {
}
});
return HttpClients.custom().setSSLSocketFactory(sslsf).build();
} catch (GeneralSecurityException e) {
throw e;
}
}
}
View Code
微信掃碼登錄回調
注意：掃碼登錄會自動獲取一個隨機code，這個code是微信發給用戶的臨時令牌。我們可以根據code再次請求微信第三方登陸接口得到access_token（正式令牌）
/**
* 微信掃碼登錄回調
*/
@GetMapping("callback")
public String callback(String code, String state) {
//拿著臨時票據code和微信id和密鑰，請求微信固定地址，得到兩個值accessToken和openId
//使用code和appid以及appscrect換取access_token
StringBuffer baseAccessTokenUrl = new StringBuffer()
.append("https://api.weixin.qq.com/sns/oauth2/access_token")
.append("?appid=%s")
.append("&secret=%s")
.append("&code=%s")
.append("&grant_type=authorization_code");
String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),
ConstantWxUtils.WX_OPEN_APP_ID,
ConstantWxUtils.WX_OPEN_APP_SECRET,
code);//替換url中的值
try {
String accessTokenInfo = HttpClientUtils.get(accessTokenUrl);
JSONObject jsonObject = JSONObject.parseObject(accessTokenInfo);
String access_token = jsonObject.getString("access_token");
String openid = jsonObject.getString("openid");
//判斷數據庫是否存在掃描人信息
UserInfo userInfo = userInfoService.findByOpenId(openid);
if (userInfo == null) {
//拿著access_token和openid去請求微信地址，得到掃描人信息
String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +
"?access_token=%s" +
"&openid=%s";
String userInfoUrl = String.format(baseUserInfoUrl, access_token, openid);
String resultUserInfo = HttpClientUtils.get(userInfoUrl);
JSONObject object = JSONObject.parseObject(resultUserInfo);
//解析用戶信息(頭像，昵稱等等)
String headimgurl = object.getString("headimgurl");
String nickname = object.getString("nickname");
//添加數據庫
userInfo = new UserInfo();
userInfo.setNickName(nickname);
userInfo.setOpenid(openid);
userInfo.setStatus(1);
userInfoService.insert(userInfo);
}
//返回name和token字符串
Map<String, Object> map = new HashMap<>();
String name = userInfo.getName();
if (StringUtils.isEmpty(name)) {
name = userInfo.getNickName();
}
if (StringUtils.isEmpty(name)) {
name = userInfo.getPhone();
}
map.put("name", name);
// 前端判斷openid不為空，需要綁定手機號，如果為空不要綁定手機號
if (StringUtils.isEmpty(userInfo.getPhone())) {
map.put("openid", openid);
} else {
map.put("openid", "");
}
String token = JwtHelper.createToken(userInfo.getId(), name);
map.put("token", token);
return "redirect:" + ConstantWxUtils.YYGH_BASE_URL + "/weixin/callback?token="+map.get("token")+"&openid="+map.get("openid")+"&name="+URLEncoder.encode((String)map.get("name"));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
注意：上述方法返回值是一個前端vue頁面，這個頁面作為一個中間頁面callback.vue，用來獲取返回攜帶的參數。
<template>
<!--header-->
<div>
</div>
<!--footer-->
</template>
<script>
exportdefault{
// layout:"empty",
data(){
return{
}
},
mounted(){
lettoken=this.$route.query.token
letname=this.$route.query.name
letopenid=this.$route.query.openid
//調用父vue方法
window.parent['loginCallback'](name,token,openid)
}
}
</script>
在父組件進行接收：
mounted(){
//微信回調的方法
letself=this;
window["loginCallback"]=(name,token,openid)=>{
self.loginCallback(name,token,openid);
}
}
判斷openid是否為空，如果不為空，需要綁定手機號，如果為空不要綁定手機號
loginCallback(name,token,openid){
console.log("openid="+openid)
if(openid!=null){
this.userInfo.openid=openid
this.showLogin()
}else{
this.setCookies(name,token)
}
},
把name和token存在cookie
setCookies(name, token) {
cookie.set("token", token, { domain: "localhost" });
cookie.set("name", name, { domain: "localhost" });
window.location.reload();
}
#MySignature {
display: block;
background-color: #95FFE9;
border-radius: 7px;
box-shadow: 1px 1px 1px #6B6B6B;
padding: 10px;
line-height: 1.5;
text-shadow: 1px 1px 1px #FFF;
font-size: 16px;
}
#MySignature a {
margin: 0;
padding: 0;
display: contents;
}
一點點學習，一絲絲進步。不懈怠，才不會被時代所淘汰!
總結
- 上一篇： Halcon学习：坏点检测
- 下一篇： Vue 组件 生命周期函数mounted