微信掃碼登錄超詳細教程

一、OAuth2

1、OAuth2介紹

2、OAuth2解決什麼問題

（1）OAuth2提出的背景

  照片擁有者想要在雲沖印服務上打印照片，雲沖印服務需要訪問雲存儲服務上的資源。（2）圖例

  資源擁有者：照片擁有者
  客戶應用：雲沖印
  受保護的資源：照片

3、方式一：用戶名密碼複製
適用於同一公司內部的多個系統，不適用於不受信的第三方應用

4、方式二：通用開發者key
適用於合作商或者授信的不同業務部門之間

5、方式三：辦法令牌
接近OAuth2方式，需要考慮如何管理令牌、頒發令牌、吊銷令牌，需要統一的協議，因此就有了OAuth2協議

二、微信掃碼登錄實現流程

1、基本流程介紹

2、微信掃碼登錄具體實現

項目目錄結構

application.yml

wx:
  open:
    # 微信開放平臺 appid
    appid: wxed9954c01bb897
    # 微信開放平臺 appsecret
    appsecret: a7482517235173ddb788de60b90e
    # 微信開放平臺 重定向url（guli.shop需要在微信開放平臺配置）
    redirecturl: http://guli.shop/api/ucenter/wx/callback

ConstantWxUtils

@ConfigurationProperties(prefix = "wx.open")
@Component
@Data
public class ConstantWxUtils {

    private String appId;

    private String appSecret;

    private String redirectUrl;
}

WxApiController

@Controller
@CrossOrigin
@RequestMapping("/api/ucenter/wx")
public class WxApiController {

    @Autowired
    private ConstantWxUtils constantWxUtils;
    @Autowired
    private UcenterMemberService ucenterMemberService;

    //1.生成微信二維碼
    @GetMapping("/login")
    public String getWxCode(){

        String baseUrl = "https://open.weixin.qq.com/connect/qrconnect"+
                "?appid=%s"+
                "&redirect_uri=%s"+
                "&response_type=%s"+
                "&scope=snsapi_login"+
                "&state=%s"+
                "#wechat_redirect";

        //對redict_url進行編碼
        String redictUrl = constantWxUtils.getRedirectUrl();
        try {
            URLEncoder.encode(redictUrl,"utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        String url = String.format(baseUrl,
                constantWxUtils.getAppId(),
                redictUrl,
                "code",
                "coderkun");

        //請求微信地址
        return "redirect:"+url;
    }

    //2.獲取掃描人信息，獲取票據
    @GetMapping("/callback")
    public String callback(String code, String state){
        try {
            //1 獲取code值，臨時票據，類似於驗證碼
            //2 拿着code,appid和appSecret請求 微信固定的地址，得到兩個值 accsess_token 和 openid
            String baseAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token" +
                    "?appid=%s" +
                    "&secret=%s" +
                    "&code=%s" +
                    "&grant_type=authorization_code";
            //拼接三個參數 ：id  祕鑰 和 code值
            String accessTokenUrl = String.format(
                    baseAccessTokenUrl,
                    constantWxUtils.getAppId(),
                    constantWxUtils.getAppSecret(),
                    code
            );
            //請求這個拼接好的地址，得到返回兩個值 accsess_token 和 openid
            //使用httpclient發送請求，得到返回結果
            String accessTokenInfo = HttpClientUtils.get(accessTokenUrl);

            //從accessTokenInfo字符串獲取出來兩個值 accsess_token 和 openid
            //把accessTokenInfo字符串轉換map集合，根據map裏面key獲取對應值
            //使用json轉換工具 Gson
            Gson gson = new Gson();
            HashMap mapAccessToken = gson.fromJson(accessTokenInfo, HashMap.class);
            String access_token = (String)mapAccessToken.get("access_token");
            String openid = (String)mapAccessToken.get("openid");

            //把掃描人信息添加數據庫裏面
            //判斷數據表裏面是否存在相同微信信息，根據openid判斷
            UcenterMember member = ucenterMemberService.getOpenIdMember(openid);
            if(member == null) {//memeber是空，表沒有相同微信數據，進行添加

                //3 拿着得到accsess_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 userInfo = HttpClientUtils.get(userInfoUrl);
                //獲取返回userinfo字符串掃描人信息
                HashMap userInfoMap = gson.fromJson(userInfo, HashMap.class);
                String nickname = (String)userInfoMap.get("nickname");//暱稱
                String headimgurl = (String)userInfoMap.get("headimgurl");//頭像

                member = new UcenterMember();
                member.setOpenid(openid);
                member.setNickname(nickname);
                member.setAvatar(headimgurl);
                ucenterMemberService.save(member);
            }

            //使用jwt根據member對象生成token字符串
            String jwtToken = JwtUtils.getJwtToken(member.getId(), member.getNickname());
            //最後：返回首頁面，通過路徑傳遞token字符串(不能直接設置到cookie中，因爲cookie不能解決跨域問題)
            return "redirect:http://localhost:3000?token="+jwtToken;
        }catch(Exception e) {
            throw new GuliException(20001,"登錄失敗");
        }

    }
}

WxApiServiceImpl

//根據openid查詢用戶
@Override
public UcenterMember getOpenIdMember(String openid) {
    QueryWrapper<UcenterMember> wrapper = new QueryWrapper<>();
    wrapper.eq("open_id",openid);
    UcenterMember member = baseMapper.selectOne(wrapper);
    return member;
}

微信掃碼登錄之後在主頁顯示用戶信息(微信暱稱和頭像)

export default {
  data() {
    return {
        token:'',
        loginInfo: {
          id: '',
          age: '',
          avatar: '',
          mobile: '',
          nickname: '',
          sex: ''
        }
    }
  },
  created() {
    //獲取路徑裏面token值
    this.token = this.$route.query.token
    console.log(this.token)
    if(this.token) {//判斷路徑是否有token值
       this.wxLogin()
    }
	//如果路徑中沒有token值則走之前
    this.showInfo()
  },
  methods:{
    //微信登錄顯示的方法
    wxLogin() {
      //console.log('************'+this.token)
      //把token值放到cookie裏面
      cookie.set('user_token',this.token,{domain: 'localhost'})
      cookie.set('user_info','',{domain: 'localhost'}) //先設置用戶信息爲空
     //console.log('====='+cookie.get('guli_token'))
      //調用接口，根據token值獲取用戶信息
      loginApi.getLoginUserInfo()
        .then(response => {
          // console.log('################'+response.data.data.userInfo)
           this.loginInfo = response.data.data.userInfo
           cookie.set('user_info',this.loginInfo,{domain: 'localhost'})
        })
    },
    //創建方法，從cookie獲取用戶信息
    showInfo() {
      //從cookie獲取用戶信息
      var userStr = cookie.get('user_info')
      // 把字符串轉換json對象(js對象)
      if(userStr) {
        this.loginInfo = JSON.parse(userStr)
      }
    },
    //退出
    logout() {
      //清空cookie值
      cookie.set('user_token','',{domain: 'localhost'})
      cookie.set('user_info','',{domain: 'localhost'})
      //回到首頁面
      window.location.href = "/";
    }
  }
};
</script>

最後附上HttpClient的一個工具類

package com.young.serviceusercenter.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;

/**
 *  依賴的jar包有：commons-lang-2.6.jar、httpclient-4.3.2.jar、httpcore-4.3.1.jar、commons-io-2.4.jar
 * @author zhaoyb
 *
 */
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);
			}
			// 設置參數
			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 請求
	 *
	 * @param url
	 * @param charset
	 * @param connTimeout  建立鏈接超時時間,毫秒.
	 * @param readTimeout  響應超時時間,毫秒.
	 * @return
	 * @throws ConnectTimeoutException   建立鏈接超時
	 * @throws SocketTimeoutException   響應超時
	 * @throws Exception
	 */
	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
	 *
	 * @param ressponse
	 * @return
	 */
	@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;
		}
	}

	public static void main(String[] args) {
		try {
			String str= post("https://localhost:443/ssl/test.shtml","name=12&page=34","application/x-www-form-urlencoded", "UTF-8", 10000, 10000);
			//String str= get("https://localhost:443/ssl/test.shtml?name=12&page=34","GBK");
            /*Map<String,String> map = new HashMap<String,String>();
            map.put("name", "111");
            map.put("page", "222");
            String str= postForm("https://localhost:443/ssl/test.shtml",map,null, 10000, 10000);*/
			System.out.println(str);
		} catch (ConnectTimeoutException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SocketTimeoutException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

}