1 登录需求

2 登录需求

1. 登录采取弹出层的形式
2. 登录方式：
3. 手机号码+手机验证码
4. 微信扫描
5. 无注册界面，第一次登录根据手机号判断系统是否存在，如果不存在则自动注册
6. 微信扫描登录成功必须绑定手机号码，即：第一次扫描成功后绑定手机号，以后登录扫描直接登录成功
7. 网关统一判断登录状态，如何需要登录，页面弹出登录层

3 微信登录

1、OAuth2

3.1 OAuth2解决什么问题

1.1.1 开放系统间授权

照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源

1.1.2图例

资源拥有者：照片拥有者
客户应用：云冲印
受保护的资源：照片

1.1.3方式一：用户名密码复制

用户将自己的”云存储”服务的用户名和密码，告诉”云冲印”，后者就可以读取用户的照片了。这样的做法有以下几个严重的缺点。
（1）”云冲印”为了后续的服务，会保存用户的密码，这样很不安全。
（2）Google不得不部署密码登录，而我们知道，单纯的密码登录并不安全。
（3）”云冲印”拥有了获取用户储存在Google所有资料的权力，用户没法限制”云冲印”获得授权的范围和有效期。
（4）用户只有修改密码，才能收回赋予”云冲印”的权力。但是这样做，会使得其他所有获得用户授权的第三方应用程序全部失效。
（5）只要有一个第三方应用程序被破解，就会导致用户密码泄漏，以及所有被密码保护的数据泄漏。
总结：
将受保护的资源中的用户名和密码存储在客户应用的服务器上，使用时直接使用这个用户名和密码登录
适用于同一公司内部的多个系统，不适用于不受信的第三方应用

1.1.4方式二：通用开发者key

适用于合作商或者授信的不同业务部门之间

1.1.5方式三：颁发令牌

接近OAuth2方式，需要考虑如何管理令牌、颁发令牌、吊销令牌，需要统一的协议，因此就有了OAuth2协议

令牌类比仆从钥匙

1.2 OAuth2最简向导

1.2.1 OAuth主要角色

1.2.2最简向导

川崎高彦：OAuth2领域专家，开发了一个OAuth2 sass服务，OAuth2 as Service，并且做成了一个公司
在融资的过程中为了向投资人解释OAuth2是什么，于是写了一篇文章，《OAuth2最简向导》

1.3 OAuth2的应用

1.3.1 微服务安全

现代微服务中系统微服务化以及应用的形态和设备类型增多，不能用传统的登录方式
核心的技术不是用户名和密码，而是token，由AuthServer颁发token，用户使用token进行登录

1.3.2 社交登录

2、微信登录介绍

2.1 前期准备

1、注册
微信开放平台：https://open.weixin.qq.com
2、邮箱激活
3、完善开发者资料
4、开发者资质认证
准备营业执照，1-2个工作日审批、300元
5、创建网站应用
提交审核，7个工作日审批
6、内网穿透
ngrok的使用

2.2 授权流程

参考文档：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=e547653f995d8f402704d5cb2945177dc8aa4e7e&lang=zh_CN
获取access_token时序图

第一步：请求CODE（生成授权URL）
第二步：通过code获取access_token（开发回调URL）

3、服务器端开发

操作模块：service-user
说明：微信登录二维码我们是以弹出层的形式打开，不是以页面形式，所以做法是不一样的，参考如下链接，上面有相关弹出层的方式
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
如图：

因此我们的操作步骤为：
第一步我们通过接口把对应参数返回页面；
第二步在头部页面启动打开微信登录二维码；
第三步处理登录回调接口；
第四步回调返回页面通知微信登录层回调成功
第五步如果是第一次扫描登录，则绑定手机号码，登录成功
接下来我们根据步骤，一步一步实现

3.1 返回微信登录参数

3.1.1 添加配置

在application-dev.yml添加配置

3.1.2 添加配置类

| @Componentpublic class ConstantPropertiesUtil implements InitializingBean {

@Value(**"${wx.open.app_id}"**)<br />    **private **String **appId**;

@Value(**"${wx.open.app_secret}"**)<br />    **private **String **appSecret**;

@Value(**"${wx.open.redirect_url}"**)<br />    **private **String **redirectUrl**;

@Value(**"${yygh.baseUrl}"**)<br />    **private **String **yyghBaseUrl**;

**public static **String _WX_OPEN_APP_ID_;<br />    **public static **String _WX_OPEN_APP_SECRET_;<br />    **public static **String _WX_OPEN_REDIRECT_URL_;

**public static **String _YYGH_BASE_URL_;

@Override<br />    **public void **afterPropertiesSet() **throws **Exception {<br />        _WX_OPEN_APP_ID _= **appId**;<br />        _WX_OPEN_APP_SECRET _= **appSecret**;<br />        _WX_OPEN_REDIRECT_URL _= **redirectUrl**;<br />        _YYGH_BASE_URL _= **yyghBaseUrl**;<br />    }<br />} |

| —- |

3.1.3 添加接口

添加com.atguigu.yygh.user.api.WeixinApiController 类

| @Controller
@RequestMapping(“/api/ucenter/wx”)
public class WeixinApiController {

@Autowired<br />    **private **UserInfoService **userInfoService**;<br />    @Autowired<br />    **private **RedisTemplate **redisTemplate**;

_/**<br />     * 获取微信登录参数<br />     */<br />    _@GetMapping(**"getLoginParam"**)<br />    @ResponseBody<br />    **public **Result genQrConnect(HttpSession session) **throws **UnsupportedEncodingException {<br />        String redirectUri = URLEncoder._encode_(ConstantPropertiesUtil._WX_OPEN_REDIRECT_URL_, **"UTF-8"**);<br />        Map<String, Object> map = **new **HashMap<>();<br />        map.put(**"appid"**, ConstantPropertiesUtil._WX_OPEN_APP_ID_);<br />        map.put(**"redirectUri"**, redirectUri);<br />        map.put(**"scope"**, **"snsapi_login"**);<br />        map.put(**"state"**, System._currentTimeMillis_()+**""**);_//System.currentTimeMillis()+""<br />        _**return **Result._ok_(map);<br />    }<br />} |

| —- |

3.2 前端显示登录二维码

3.2.1 封装api请求

创建/api/user/wexin.js文件

3.2.2 修改组件

修改layouts/myheader.vue文件，添加微信二维码登录逻辑
1、引入api

1. 引入微信js | mounted() {
   // 注册全局登录事件对象
   window.loginEvent = new Vue();
   // 监听登录事件
   loginEvent.$on(‘loginDialogEvent’, function () {
   document.getElementById(“loginDialog”).click();
   })
   // 触发事件，显示登录层：loginEvent.$emit(‘loginDialogEvent’)
   //初始化微信js
   const script = document.createElement(‘script’)
   script.type = ‘text/javascript’
   script.src = ‘https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js‘
   document.body.appendChild(script)
   
   // 微信登录回调处理
   let self = this;
   window[“loginCallback”] = (name,token, openid) => {
   self.loginCallback(name, token, openid);
   }
   }, | | —- |

1. 实例化微信JS对象

添加微信登录方法

说明：微信登录方法已绑定weixinLogin()，查看页面

1. 测试

刷新页面，查看效果

3.3 处理微信回调

3.3.1 添加httpclient工具类

添加com.atguigu.yygh.user.util.HttpClientUtils类

| 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 params) throws ConnectTimeoutException,
SocketTimeoutException, Exception {
return postForm(url, params, null, connTimeout, readTimeout);
}

public static String postParameters(String url, Map 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;<br />         **if **(url.startsWith(**"https"**)) {<br />            _// 执行 Https 请求.<br />            _client = _createSSLInsecureClient_();<br />            res = client.execute(post);<br />         } **else **{<br />            _// 执行 Http 请求.<br />            _client = HttpClientUtils._client_;<br />            res = client.execute(post);<br />         }<br />         result = IOUtils._toString_(res.getEntity().getContent(), charset);<br />      } **finally **{<br />         post.releaseConnection();<br />         **if **(url.startsWith(**"https"**) && client != **null**&& client **instanceof **CloseableHttpClient) {<br />            ((CloseableHttpClient) client).close();<br />         }<br />      }<br />      **return **result;<br />   }

/*
提交form表单

@param url
* @param params
* @param connTimeout
* @param readTimeout
* @return
__ * @throws ConnectTimeoutException
* @throws SocketTimeoutException
* @throws Exception
*/
public static String postForm(String url, Map params, Map headers, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,
SocketTimeoutException, Exception {

  HttpClient client = **null**;<br />      HttpPost post = **new **HttpPost(url);<br />      **try **{<br />         **if **(params != **null **&& !params.isEmpty()) {<br />            List<NameValuePair> formParams = **new **ArrayList<NameValuePair>();<br />            Set<Entry<String, String>> entrySet = params.entrySet();<br />            **for **(Entry<String, String> entry : entrySet) {<br />               formParams.add(**new **BasicNameValuePair(entry.getKey(), entry.getValue()));<br />            }<br />            UrlEncodedFormEntity entity = **new **UrlEncodedFormEntity(formParams, Consts.**_UTF_8_**);<br />            post.setEntity(entity);<br />         }

     **if **(headers != **null **&& !headers.isEmpty()) {<br />            **for **(Entry<String, String> entry : headers.entrySet()) {<br />               post.addHeader(entry.getKey(), entry.getValue());<br />            }<br />         }<br />         _// 设置参数<br />         _Builder customReqConf = RequestConfig._custom_();<br />         **if **(connTimeout != **null**) {<br />            customReqConf.setConnectTimeout(connTimeout);<br />         }<br />         **if **(readTimeout != **null**) {<br />            customReqConf.setSocketTimeout(readTimeout);<br />         }<br />         post.setConfig(customReqConf.build());<br />         HttpResponse res = **null**;<br />         **if **(url.startsWith(**"https"**)) {<br />            _// 执行 Https 请求.<br />            _client = _createSSLInsecureClient_();<br />            res = client.execute(post);<br />         } **else **{<br />            _// 执行 Http 请求.<br />            _client = HttpClientUtils._client_;<br />            res = client.execute(post);<br />         }<br />         **return **IOUtils._toString_(res.getEntity().getContent(), **"UTF-8"**);<br />      } **finally **{<br />         post.releaseConnection();<br />         **if **(url.startsWith(**"https"**) && client != **null<br />               **&& client **instanceof **CloseableHttpClient) {<br />            ((CloseableHttpClient) client).close();<br />         }<br />      }<br />   }

/*
发送一个 GET 请求
*/
public static String get(String url, String charset, Integer connTimeout,Integer readTimeout)
throws ConnectTimeoutException,SocketTimeoutException, Exception {

  HttpClient client = **null**;<br />      HttpGet get = **new **HttpGet(url);<br />      String result = **""**;<br />      **try **{<br />         _// 设置参数<br />         _Builder customReqConf = RequestConfig._custom_();<br />         **if **(connTimeout != **null**) {<br />            customReqConf.setConnectTimeout(connTimeout);<br />         }<br />         **if **(readTimeout != **null**) {<br />            customReqConf.setSocketTimeout(readTimeout);<br />         }<br />         get.setConfig(customReqConf.build());

     HttpResponse res = **null**;

     **if **(url.startsWith(**"https"**)) {<br />            _// 执行 Https 请求.<br />            _client = _createSSLInsecureClient_();<br />            res = client.execute(get);<br />         } **else **{<br />            _// 执行 Http 请求.<br />            _client = HttpClientUtils._client_;<br />            res = client.execute(get);<br />         }

     result = IOUtils._toString_(res.getEntity().getContent(), charset);<br />      } **finally **{<br />         get.releaseConnection();<br />         **if **(url.startsWith(**"https"**) && client != **null **&& client **instanceof **CloseableHttpClient) {<br />            ((CloseableHttpClient) client).close();<br />         }<br />      }<br />      **return **result;<br />   }

/*
从 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<br />            **public boolean **verify(String arg0, SSLSession arg1) {<br />               **return true**;<br />            }

        @Override<br />            **public void **verify(String host, SSLSocket ssl)<br />                  **throws **IOException {<br />            }

        @Override<br />            **public void **verify(String host, X509Certificate cert)<br />                  **throws **SSLException {<br />            }

        @Override<br />            **public void **verify(String host, String[] cns,<br />                           String[] subjectAlts) **throws **SSLException {<br />            }<br />         });<br />         **return **HttpClients._custom_().setSSLSocketFactory(sslsf).build();

  } **catch **(GeneralSecurityException e) {<br />         **throw **e;<br />      }<br />   }<br />} |

| —- |

3.3.2 添加回调接口获取access_token

在WeixinApiController 类添加回调方法

| /*
微信登录回调

@param code
* @param state
* @return
__ */@RequestMapping(“callback”)public String callback(String code, String state) {
//获取授权临时票据
_System.**_out.println(“微信授权服务器回调。。。。。。”);
System.out.println(“state = “ + state);
System.out.println(“code = “ **+ code);

**if **(StringUtils._isEmpty_(state) &#124;&#124; StringUtils._isEmpty_(code)) {<br />        **_log_**.error(**"非法回调请求"**);<br />        **throw new **YyghException(ResultCodeEnum.**_ILLEGAL_CALLBACK_REQUEST_ERROR_**);<br />    }

_//使用code和appid以及appscrect换取access_token<br />    _StringBuffer baseAccessTokenUrl = **new **StringBuffer()<br />            .append(**"https://api.weixin.qq.com/sns/oauth2/access_token"**)<br />            .append(**"?appid=%s"**)<br />            .append(**"&secret=%s"**)<br />            .append(**"&code=%s"**)<br />            .append(**"&grant_type=authorization_code"**);

String accessTokenUrl = String._format_(baseAccessTokenUrl.toString(),<br />            ConstantPropertiesUtil._WX_OPEN_APP_ID_,<br />            ConstantPropertiesUtil._WX_OPEN_APP_SECRET_,<br />            code);

String result = **null**;<br />    **try **{<br />        result = HttpClientUtils._get_(accessTokenUrl);<br />    } **catch **(Exception e) {<br />        **throw new **YyghException(ResultCodeEnum.**_FETCH_ACCESSTOKEN_FAILD_**);<br />    }

System.**_out_**.println(**"使用code换取的access_token结果 = " **+ result);

JSONObject resultJson = JSONObject._parseObject_(result);<br />    **if**(resultJson.getString(**"errcode"**) != **null**){<br />        **_log_**.error(**"获取access_token失败：" **+ resultJson.getString(**"errcode"**) + resultJson.getString(**"errmsg"**));<br />        **throw new **YyghException(ResultCodeEnum.**_FETCH_ACCESSTOKEN_FAILD_**);<br />    }

String accessToken = resultJson.getString(**"access_token"**);<br />    String openId = resultJson.getString(**"openid"**);<br />    **_log_**.info(accessToken);<br />    **_log_**.info(openId);

_//根据access_token获取微信用户的基本信息<br />    //先根据openid进行数据库查询<br />   // UserInfo userInfo = userInfoService.getByOpenid(openId);<br />    // 如果没有查到用户信息,那么调用微信个人信息获取的接口<br />   // if(null == userInfo){<br />        //如果查询到个人信息，那么直接进行登录<br />        //使用access_token换取受保护的资源：微信的个人信息<br />        _String baseUserInfoUrl = **"https://api.weixin.qq.com/sns/userinfo" **+<br />                **"?access_token=%s" **+<br />                **"&openid=%s"**;<br />        String userInfoUrl = String._format_(baseUserInfoUrl, accessToken, openId);<br />        String resultUserInfo = **null**;<br />        **try **{<br />            resultUserInfo = HttpClientUtils._get_(userInfoUrl);<br />        } **catch **(Exception e) {<br />            **throw new **YyghException(ResultCodeEnum.**_FETCH_USERINFO_ERROR_**);<br />        }<br />        System.**_out_**.println(**"使用access_token获取用户信息的结果 = " **+ resultUserInfo);

    JSONObject resultUserInfoJson = JSONObject._parseObject_(resultUserInfo);<br />        **if**(resultUserInfoJson.getString(**"errcode"**) != **null**){<br />            **_log_**.error(**"获取用户信息失败：" **+ resultUserInfoJson.getString(**"errcode"**) + resultUserInfoJson.getString(**"errmsg"**));<br />            **throw new **YyghException(ResultCodeEnum.**_FETCH_USERINFO_ERROR_**);<br />        }

    _//解析用户信息<br />        _String nickname = resultUserInfoJson.getString(**"nickname"**);<br />        String headimgurl = resultUserInfoJson.getString(**"headimgurl"**);

    UserInfo userInfo = **new **UserInfo();<br />        userInfo.setOpenid(openId);<br />        userInfo.setNickName(nickname);<br />        userInfo.setStatus(1);<br />        **userInfoService**.save(userInfo);<br />   _// }

_Map<String, Object> map = **new **HashMap<>();<br />    String name = userInfo.getName();<br />    **if**(StringUtils._isEmpty_(name)) {<br />        name = userInfo.getNickName();<br />    }<br />    **if**(StringUtils._isEmpty_(name)) {<br />        name = userInfo.getPhone();<br />    }<br />    map.put(**"name"**, name);<br />    **if**(StringUtils._isEmpty_(userInfo.getPhone())) {<br />        map.put(**"openid"**, userInfo.getOpenid());<br />    } **else **{<br />        map.put(**"openid"**, **""**);<br />    }<br />    String token = JwtHelper._createToken_(userInfo.getId(), name);<br />    map.put(**"token"**, token);<br />    **return "redirect:" **+ ConstantPropertiesUtil._YYGH_BASE_URL _+ **"/weixin/callback?token="**+map.get(**"token"**)+**"&openid="**+map.get(**"openid"**)+**"&name="**+URLEncoder._encode_((String)map.get(**"name"**));<br />} |

| —- |

3.3.3 获取用户信息

3.3.3.1 根据openid查询用户是否已注册

1、UserInfoService类添加接口

2、UserInfoServiceImpl类添加接口实现

3.3.3.2 根据access_token获取用户信息

    JSONObject resultUserInfoJson = JSONObject._parseObject_(resultUserInfo);**if**(resultUserInfoJson.getString(**"errcode"**) != **null**){**_log_**.error(**"获取用户信息失败："**+ resultUserInfoJson.getString(**"errcode"**) + resultUserInfoJson.getString(**"errmsg"**));**throw new **YyghException(ResultCodeEnum.**_FETCH_USERINFO_ERROR_**);<br />        }<br />_//解析用户信息_String nickname = resultUserInfoJson.getString(**"nickname"**);<br />        String headimgurl = resultUserInfoJson.getString(**"headimgurl"**);

    userInfo = **new **UserInfo();<br />        userInfo.setOpenid(openId);<br />        userInfo.setNickName(nickname);<br />        userInfo.setStatus(1);**userInfoService**.save(userInfo);<br />    }

Map<String, Object> map = **new **HashMap<>();<br />    String name = userInfo.getName();**if**(StringUtils._isEmpty_(name)) {<br />        name = userInfo.getNickName();<br />    }**if**(StringUtils._isEmpty_(name)) {<br />        name = userInfo.getPhone();<br />    }<br />    map.put(**"name"**, name);**if**(StringUtils._isEmpty_(userInfo.getPhone())) {<br />        map.put(**"openid"**, userInfo.getOpenid());<br />    } **else **{<br />        map.put(**"openid"**, **""**);<br />    }<br />    String token = JwtHelper._createToken_(userInfo.getId(), name);<br />    map.put(**"token"**, token);**return "redirect:"**+ ConstantPropertiesUtil._YYGH_BASE_URL _+ **"/weixin/callback?token="**+map.get(**"token"**)+**"&openid="**+map.get(**"openid"**)+**"&name="**+URLEncoder._encode_((String)map.get(**"name"**));<br />} |

说明：我们根据返回openid判断是否需要绑定手机号码，如果需要绑定，那么我们要根据openid用户用户信息，然后更新上手机号码

3.4 回调返回页面

操作：yygh-site
说明：我们只期望返回一个空页面，然后跟登录层通信就可以了，其实就是一个过渡页面，所以我们要给这个过渡页面定义一个空模板

3.4.1定义空模块

添加空模板组件：/layouts/empty.vue

3.4.2回调返回页面

根据返回路径/weixin/cakkback，我们创建组件/weixin/cakkback.vue

说明：在页面我们就能够接收到返回来的参数

3.4.3 父组件定义回调方法

在myheader.vue添加方法

3.5 服务器绑定手机号码

页面绑定手机号码会把openid传递过来，我们根据openid找到用户信息，然后绑定手机号码
修改UserInfoServiceImpl类登录方法

3.6 myheader.vue完整代码