目录:
(1)微信登录-OAuth2介绍
(2)前台用户系统-微信登录-准备工作
(3)微信登录-生成微信二维码-接口开发
(4)微信登录-生成验证码-前端整合
(5)微信登录-获取扫码人信息-实现分析
(6)微信登录-获取联系人扫码信息-接口开发
(7)微信登录-手机号绑定和前端整合
(1)微信登录-OAuth2介绍
微信登录是基于理论知识OAuth2实现的
1、OAuth2
OAuth2解决什么问题
1.1.1 开放系统间授权
照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源
资源拥有者:照片拥有者
客户应用:云冲印
受保护的资源:照片
1.1.3方式一:用户名密码复制
用户将自己的"云存储"服务的用户名和密码,告诉"云冲印",后者就可以读取用户的照片了。这样的做法有以下几个严重的缺点。
(1)"云冲印"为了后续的服务,会保存用户的密码,这样很不安全。
(2)Google不得不部署密码登录,而我们知道,单纯的密码登录并不安全。
(3)"云冲印"拥有了获取用户储存在Google所有资料的权力,用户没法限制"云冲印"获得授权的范围和有效期。
(4)用户只有修改密码,才能收回赋予"云冲印"的权力。但是这样做,会使得其他所有获得用户授权的第三方应用程序全部失效。
(5)只要有一个第三方应用程序被破解,就会导致用户密码泄漏,以及所有被密码保护的数据泄漏。
总结:
将受保护的资源中的用户名和密码存储在客户应用的服务器上,使用时直接使用这个用户名和密码登录
适用于同一公司内部的多个系统,不适用于不受信的第三方应用
1.1.4方式二:通用开发者key
适用于合作商或者授信的不同业务部门之间
1.1.5方式三:颁发令牌
接近OAuth2方式,需要考虑如何管理令牌、颁发令牌、吊销令牌,需要统一的协议,因此就有了OAuth2协议
使用令牌:字符串
令牌类比仆从钥匙
令牌:就是按照约定的规则,生成字符串,这个字符串颁发给某个服务,它它拿着进行访问,
设置字符串的有效时间,随时去吊销这个字符串,令牌的颁发我们令牌字符串我们需要对它进行加密等等处理
OAth2它只约定我们生成颁发令牌,生成字符串,但是字符串按照什么规则生成,它并没有约定,只告诉你用字符串方式解决,具体可以像之前的一个工具JWT工具生成字符串的的规则
OAth2只约定解决方案,并没有约定怎么去做,它只是颁发令牌、设置令牌的有效时间、包括随时去解除这个令牌
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的使用
注册之后会提供一个id和秘钥,这里我们使用提供的,自己不在注册
redirect_url: 创建一个网站应用,在二维码下面显示,网站名称,这个名字需要微信那边审核通过
域名:扫码确认之后,完成扫码,完成扫码之后,得到扫码的信息,微信那端给我们做一个回调,扫码之后,会调用指定接口的路径,这个路径我们没有办法调用本地,默认找不到,需要找到一个网络返回的的域名,才能返回,这就需要一个能够返回的域名
获取access_token时序图
第一步:请求CODE(生成授权URL)
第二步:通过code获取access_token(开发回调URL)
在service_user模块中添加:微信的配置
创建一个工具类读取配置文件刚才配置的内容:
-
package com.
atguigu.
yygh.
user.
utils;
-
-
import org.
springframework.
beans.
factory.
InitializingBean;
-
import org.
springframework.
beans.
factory.
annotation.
Value;
-
import org.
springframework.
stereotype.
Component;
-
-
@Component
-
public
class
ConstantWxPropertiesUtils
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;
-
-
@Value(
"${yygh.baseUrl}")
-
private
String yyghBaseUrl;
-
-
-
public
static
String
WX_OPEN_APP_ID;
-
public
static
String
WX_OPEN_APP_SECRET;
-
public
static
String
WX_OPEN_REDIRECT_URL;
-
public
static
String
YYGH_BASE_URL;
-
-
-
@Override
-
public
void
afterPropertiesSet() throws
Exception {
-
WX_OPEN_APP_ID = appId;
-
WX_OPEN_APP_SECRET = appSecret;
-
WX_OPEN_REDIRECT_URL = redirectUrl;
-
YYGH_BASE_URL = yyghBaseUrl;
-
}
-
}
创建controller:WeixinApiController
-
package com.atguigu.yygh.user.api;
-
-
import org.springframework.stereotype.Controller;
-
import org.springframework.web.bind.
annotation.RequestMapping;
-
-
//微信操作的接口
-
@Controller
-
@RequestMapping("/api/ucenter/wx")
-
public
class
WeixinApiController {
-
-
-
-
//1 生成微信扫描的二维码
-
-
-
//2 回调的方法,得到扫描人的信息
-
}
(3)微信登录-生成微信二维码-接口开发
操作模块:service-user
说明:微信登录二维码我们是以弹出层的形式打开,不是以页面形式,所以做法是不一样的,参考如下链接,上面有相关弹出层的方式
如图:
因此我们的操作步骤为:
第一步我们通过接口把对应参数返回页面;
第二步在头部页面启动打开微信登录二维码;
第三步处理登录回调接口;
第四步回调返回页面通知微信登录层回调成功
第五步如果是第一次扫描登录,则绑定手机号码,登录成功
接下来我们根据步骤,一步一步实现
接下来我们写接口返回参数:
在:WeixinApiController :中添加方法:
-
package com.atguigu.yygh.user.api;
-
-
import com.atguigu.yygh.common.result.Result;
-
import com.atguigu.yygh.user.utils.ConstantWxPropertiesUtils;
-
import org.springframework.stereotype.Controller;
-
import org.springframework.web.bind.annotation.GetMapping;
-
import org.springframework.web.bind.annotation.RequestMapping;
-
import org.springframework.web.bind.annotation.ResponseBody;
-
-
import javax.servlet.http.HttpSession;
-
import java.io.UnsupportedEncodingException;
-
import java.net.URLEncoder;
-
import java.util.HashMap;
-
import java.util.Map;
-
-
//微信操作的接口
-
@Controller
-
@RequestMapping("/api/ucenter/wx")
-
public
class
WeixinApiController {
-
-
-
-
//1 生成微信扫描的二维码
-
//返回生成二维码需要的参数
-
@GetMapping("getLoginParam")
-
@ResponseBody
-
public Result
genQrConnect
(HttpSession session)
throws UnsupportedEncodingException {
-
-
Map<String, Object> map =
new
HashMap<>();
-
map.put(
"appid", ConstantWxPropertiesUtils.WX_OPEN_APP_ID);
-
String
redirectUri
= URLEncoder.encode(ConstantWxPropertiesUtils.WX_OPEN_REDIRECT_URL,
"UTF-8");
-
map.put(
"redirectUri", redirectUri);
-
map.put(
"scope",
"snsapi_login");
-
map.put(
"state", System.currentTimeMillis()+
"");
//System.currentTimeMillis()+""
-
return Result.ok(map);
-
}
-
-
-
-
//2 回调的方法,得到扫描人的信息
-
}
(4)微信登录-生成验证码-前端整合
参数成功返回:
创建weixin.js:
-
import request
from
'@/utils/request'
-
-
const api_name =
`/api/ucenter/wx`
-
-
export
default {
-
getLoginParam(
) {
-
return
request({
-
url:
`${api_name}/getLoginParam`,
-
method:
`get`
-
})
-
}
-
}
在myheader.vue中引入这个js:
在mounted里面添加初始化微信js
书写点击微信Login方法
在网关加上这个访问的路径:
测试点击如果验证码没有出来,修改配置文件:
点击下方的微信登录:出现二维码:
微信那段扫描我们的二维码,微信那端会回调咱的方法,咱的方法中会得到扫码人的信息,把信息加到数据库中,在这过程中微信要给它绑定一个手机号最终完成操作
(5)微信登录-获取扫码人信息-实现分析
修改service_user模块的端口号:8106
(6)微信登录-获取联系人扫码信息-接口开发
httpclient请求微信提供的地址,原来是在地址栏输入地址回车请求,目前是程序中做到,不是用浏览器请求,所以用到这个技术,可以简单理解为不需要浏览器,帮助我们请求地址,然后得到地址返回的数据,或得到请求接口返回的数据,这就叫httpclient模拟浏览器请求和响应的过程
在common-util中引入依赖:
创建工具类:HttpClientUtils
-
package com.atguigu.yygh.user.utils;
-
-
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;
-
}
-
}
-
}
-
UserInfoService 接口:
-
package com.atguigu.yygh.user.service;
-
-
import com.atguigu.yygh.model.user.UserInfo;
-
import com.atguigu.yygh.vo.user.LoginVo;
-
import com.baomidou.mybatisplus.
extension.service.IService;
-
-
import java.util.
Map;
-
-
public
interface UserInfoService extends IService<UserInfo> {
-
//用户手机登录接口
-
Map<
String,
Object> login(LoginVo loginVo);
-
-
//根据openid判断数据库是否存在微信的扫描人信息
-
UserInfo selectWxInfoOpenId(
String openid);
-
}
实现类: UserInfoServiceImpl:添加实现方法:
在WexinApiController:微信扫码回调方法
-
package com.atguigu.yygh.user.api;
-
-
import com.alibaba.fastjson.JSONObject;
-
import com.atguigu.yygh.common.helper.JwtHelper;
-
import com.atguigu.yygh.common.result.Result;
-
import com.atguigu.yygh.model.user.UserInfo;
-
import com.atguigu.yygh.user.service.UserInfoService;
-
import com.atguigu.yygh.user.utils.ConstantWxPropertiesUtils;
-
import com.atguigu.yygh.user.utils.HttpClientUtils;
-
import org.springframework.beans.factory.annotation.Autowired;
-
import org.springframework.stereotype.Controller;
-
import org.springframework.util.StringUtils;
-
import org.springframework.web.bind.annotation.GetMapping;
-
import org.springframework.web.bind.annotation.RequestMapping;
-
import org.springframework.web.bind.annotation.ResponseBody;
-
-
import javax.servlet.http.HttpSession;
-
import java.io.UnsupportedEncodingException;
-
import java.net.URLEncoder;
-
import java.util.HashMap;
-
import java.util.Map;
-
-
//微信操作的接口
-
@Controller
-
@RequestMapping("/api/ucenter/wx")
-
public
class
WeixinApiController {
-
@Autowired
-
private UserInfoService userInfoService;
-
-
-
//1 生成微信扫描的二维码
-
//返回生成二维码需要的参数
-
@GetMapping("getLoginParam")
-
@ResponseBody
-
public Result
genQrConnect
(HttpSession session)
throws UnsupportedEncodingException {
-
-
Map<String, Object> map =
new
HashMap<>();
-
map.put(
"appid", ConstantWxPropertiesUtils.WX_OPEN_APP_ID);
-
String
redirect_Uri
= URLEncoder.encode(ConstantWxPropertiesUtils.WX_OPEN_REDIRECT_URL,
"UTF-8");
-
map.put(
"redirect_Uri", redirect_Uri);
-
map.put(
"scope",
"snsapi_login");
-
map.put(
"state", System.currentTimeMillis()+
"");
//System.currentTimeMillis()+""
-
return Result.ok(map);
-
}
-
-
-
//微信扫描后回调的方法
-
@GetMapping("callback")
//code和state是回调函数请求过来的时候携带的2个参数
-
public String
callback
(String code,String state) {
-
//第一步 获取临时票据 code
-
System.out.println(
"code:"+code);
-
-
//第二步 拿着code和微信id和秘钥,请求微信固定地址 ,得到两个值
-
//使用code和appid以及appscrect换取access_token字符串
-
// %s 占位符
-
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(),
-
ConstantWxPropertiesUtils.WX_OPEN_APP_ID,
-
ConstantWxPropertiesUtils.WX_OPEN_APP_SECRET,
-
code);
-
//使用httpclient请求这个地址
-
try {
-
String
accesstokenInfo
= HttpClientUtils.get(accessTokenUrl);
-
System.out.println(
"accesstokenInfo:"+accesstokenInfo);
-
//从返回字符串获取两个值 openid 和 access_token
-
JSONObject
jsonObject
= JSONObject.parseObject(accesstokenInfo);
-
String
access_token
= jsonObject.getString(
"access_token");
-
String
openid
= jsonObject.getString(
"openid");
-
-
//判断数据库是否存在微信的扫描人信息
-
//根据openid判断
-
UserInfo
userInfo
= userInfoService.selectWxInfoOpenId(openid);
-
if(userInfo ==
null) {
//数据库不存在微信信息
-
-
//第三步 拿着openid 和 access_token请求微信地址,得到扫描人信息
-
String
baseUserInfoUrl
=
"https://api.weixin.qq.com/sns/userinfo" +
-
"?access_token=%s" +
-
"&openid=%s";
-
String
userInfoUrl
= String.format(baseUserInfoUrl, access_token, openid);
-
String
resultInfo
= HttpClientUtils.get(userInfoUrl);
-
System.out.println(
"resultInfo:"+resultInfo);
-
JSONObject
resultUserInfoJson
= JSONObject.parseObject(resultInfo);
-
//解析用户信息
-
//用户昵称
-
String
nickname
= resultUserInfoJson.getString(
"nickname");
-
//用户头像
-
String
headimgurl
= resultUserInfoJson.getString(
"headimgurl");
-
-
//获取扫描人信息添加数据库
-
userInfo =
new
UserInfo();
-
userInfo.setNickName(nickname);
-
userInfo.setOpenid(openid);
-
userInfo.setStatus(
1);
-
userInfoService.save(userInfo);
-
}
-
//返回name和token字符串
-
Map<String,String> 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);
-
-
//判断userInfo是否有手机号,如果手机号为空,返回openid
-
//如果手机号不为空,返回openid值是空字符串
-
//前端判断:如果openid不为空,绑定手机号,如果openid为空,不需要绑定手机号
-
if(StringUtils.isEmpty(userInfo.getPhone())) {
-
map.put(
"openid", userInfo.getOpenid());
-
}
else {
-
map.put(
"openid",
"");
-
}
-
//使用jwt生成token字符串
-
String
token
= JwtHelper.createToken(userInfo.getId(), name);
-
map.put(
"token", token);
-
//跳转到前端页面
-
return
"redirect:" + ConstantWxPropertiesUtils.YYGH_BASE_URL +
"/weixin/callback?token="+map.get(
"token")+
"&openid="+map.get(
"openid")+
"&name="+URLEncoder.encode(map.get(
"name"),
"utf-8");
-
}
catch (Exception e) {
-
e.printStackTrace();
-
return
null;
-
}
-
}
-
-
}
(7)微信登录-手机号绑定和前端整合
创建weixin callback.vue
-
<template>
-
<!-- header -->
-
<div>
</div>
-
<!-- footer -->
-
</template>
-
<script>
-
export
default {
-
layout:
"empty",
-
data(
) {
-
return {};
-
},
-
mounted(
) {
-
let token =
this.
$route.
query.
token;
-
let name =
this.
$route.
query.
name;
-
let openid =
this.
$route.
query.
openid;
-
// 调用父vue方法
-
window.
parent[
"loginCallback"](name, token, openid);
-
},
-
};
-
</script>
这是一个中转页面,得到参数值,再调用弹框里面的方法,一会在myheader弹框中写上这个回调方法loginCallback,callback做一个中转页面,由页面在跳到弹框里面更加方便
在myheader.vue中添加:
myheader.vue详细代码:
-
<template>
-
<div class="header-container">
-
<div class="wrapper">
-
<!-- logo -->
-
<div class="left-wrapper v-link selected">
-
<img
-
style=
"width: 50px"
-
width=
"50"
-
height=
"50"
-
src=
"~assets/images/logo.png"
-
/>
-
<span class="text">尚医通 预约挂号统一平台
</span>
-
</div>
-
<!-- 搜索框 -->
-
<div class="search-wrapper">
-
<div class="hospital-search animation-show">
-
<el-autocomplete
-
class=
"search-input small"
-
prefix-icon=
"el-icon-search"
-
v-model=
"hosname"
-
:fetch-suggestions=
"querySearchAsync"
-
placeholder=
"点击输入医院名称"
-
@
select=
"handleSelect"
-
>
-
<span
-
slot=
"suffix"
-
class=
"search-btn v-link highlight clickable selected"
-
>搜索
-
</span>
-
</el-autocomplete>
-
</div>
-
</div>
-
<!-- 右侧 -->
-
<!-- 右侧 -->
-
<div class="right-wrapper">
-
<span class="v-link clickable">帮助中心
</span>
-
<span
-
v-if=
"name == ''"
-
class=
"v-link clickable"
-
@
click=
"showLogin()"
-
id=
"loginDialog"
-
>登录/注册</span
-
>
-
<el-dropdown v-if="name != ''" @command="loginMenu">
-
<span class="el-dropdown-link">
-
{{ name }}
<i class="el-icon-arrow-down el-icon--right"></i>
-
</span>
-
<el-dropdown-menu class="user-name-wrapper" slot="dropdown">
-
<el-dropdown-item command="/user">实名认证
</el-dropdown-item>
-
<el-dropdown-item command="/order">挂号订单
</el-dropdown-item>
-
<el-dropdown-item command="/patient">就诊人管理
</el-dropdown-item>
-
<el-dropdown-item command="/logout" divided
-
>退出登录</el-dropdown-item
-
>
-
</el-dropdown-menu>
-
</el-dropdown>
-
</div>
-
</div>
-
-
<!-- 登录弹出层 -->
-
<el-dialog
-
:visible.sync=
"dialogUserFormVisible"
-
style=
"text-align: left; display: none"
-
top=
"50px"
-
:append-to-body=
"true"
-
width=
"960px"
-
@
close=
"closeDialog()"
-
>
-
<div class="container">
-
<!-- 手机登录 #start -->
-
<div class="operate-view" v-if="dialogAtrr.showLoginType === 'phone'">
-
<div class="wrapper" style="width: 100%">
-
<div class="mobile-wrapper" style="position: static; width: 70%">
-
<span class="title">
{{ dialogAtrr.labelTips }}
</span>
-
<el-form>
-
<el-form-item>
-
<el-input
-
v-model=
"dialogAtrr.inputValue"
-
:placeholder=
"dialogAtrr.placeholder"
-
:maxlength=
"dialogAtrr.maxlength"
-
class=
"input v-input"
-
>
-
<span
-
slot=
"suffix"
-
class=
"sendText v-link"
-
v-if=
"dialogAtrr.second > 0"
-
>
{{ dialogAtrr.second }}
s
-
</span>
-
<span
-
slot=
"suffix"
-
class=
"sendText v-link highlight clickable selected"
-
v-if=
"dialogAtrr.second == 0"
-
@
click=
"getCodeFun()"
-
>重新发送
-
</span>
-
</el-input>
-
</el-form-item>
-
</el-form>
-
<div class="send-button v-button" @click="btnClick()">
-
{{ dialogAtrr.loginBtn }}
-
</div>
-
</div>
-
<div class="bottom">
-
<div class="wechat-wrapper" @click="weixinLogin()">
-
<span class="iconfont icon">
</span>
-
</div>
-
<span class="third-text"> 第三方账号登录
</span>
-
</div>
-
</div>
-
</div>
-
<!-- 手机登录 #end -->
-
-
<!-- 微信登录 #start -->
-
<div class="operate-view" v-if="dialogAtrr.showLoginType === 'weixin'">
-
<div class="wrapper wechat" style="height: 400px">
-
<div>
-
<div id="weixinLogin">
</div>
-
</div>
-
<div class="bottom wechat" style="margin-top: -80px">
-
<div class="phone-container">
-
<div class="phone-wrapper" @click="phoneLogin()">
-
<span class="iconfont icon">
</span>
-
</div>
-
<span class="third-text"> 手机短信验证码登录
</span>
-
</div>
-
</div>
-
</div>
-
</div>
-
<!-- 微信登录 #end -->
-
-
<div class="info-wrapper">
-
<div class="code-wrapper">
-
<div>
-
<img
-
src=
"//img.114yygh.com/static/web/code_login_wechat.png"
-
class=
"code-img"
-
/>
-
<div class="code-text">
-
<span class="iconfont icon">
</span>微信扫一扫关注
-
</div>
-
<div class="code-text">“快速预约挂号”
</div>
-
</div>
-
<div class="wechat-code-wrapper">
-
<img
-
src=
"//img.114yygh.com/static/web/code_app.png"
-
class=
"code-img"
-
/>
-
<div class="code-text">扫一扫下载
</div>
-
<div class="code-text">“预约挂号”APP
</div>
-
</div>
-
</div>
-
<div class="slogan">
-
<div>xxxxxx官方指定平台
</div>
-
<div>快速挂号 安全放心
</div>
-
</div>
-
</div>
-
</div>
-
</el-dialog>
-
-
<div>
</div>
-
<!--解决登录框样式不对-->
-
</div>
-
</template>
-
<script>
-
import cookie
from
"js-cookie";
-
import
Vue
from
"vue";
-
-
import userInfoApi
from
"@/api/userInfo";
-
import smsApi
from
"@/api/msm";
-
import hospitalApi
from
"@/api/hosp";
-
import weixinApi
from
"@/api/weixin";
-
-
const defaultDialogAtrr = {
-
showLoginType:
"phone",
// 控制手机登录与微信登录切换
-
-
labelTips:
"手机号码",
// 输入框提示
-
-
inputValue:
"",
// 输入框绑定对象
-
placeholder:
"请输入您的手机号",
// 输入框placeholder
-
maxlength:
11,
// 输入框长度控制
-
-
loginBtn:
"获取验证码",
// 登录按钮或获取验证码按钮文本
-
-
sending:
true,
// 是否可以发送验证码
-
second: -
1,
// 倒计时间 second>0 : 显示倒计时 second=0 :重新发送 second=-1 :什么都不显示
-
clearSmsTime:
null,
// 倒计时定时任务引用 关闭登录层清除定时任务
-
};
-
export
default {
-
data(
) {
-
return {
-
userInfo: {
-
phone:
"",
-
code:
"",
-
openid:
"",
-
hosname:
"",
-
},
-
-
dialogUserFormVisible:
false,
-
// 弹出层相关属性
-
dialogAtrr: defaultDialogAtrr,
-
-
name:
"",
// 用户登录显示的名称
-
};
-
},
-
-
created(
) {
-
this.
showInfo();
-
},
-
mounted(
) {
-
//在页面渲染之后执行的方法
-
// 注册全局登录事件对象
-
window.
loginEvent =
new
Vue();
-
// 监听登录事件
-
loginEvent.$on(
"loginDialogEvent",
function (
) {
-
document.
getElementById(
"loginDialog").
click();
-
});
-
// 触发事件,显示登录层:loginEvent.$emit('loginDialogEvent')
-
-
//初始化微信js body下面追加一个文件
-
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);
-
};
-
},
-
-
methods: {
-
//微信回调方法
-
loginCallback(
name, token, openid) {
-
// 打开手机登录层,绑定手机号,改逻辑与手机登录一致
-
if (openid !=
null || openid !=
"") {
-
this.
userInfo.
openid = openid;
-
this.
showLogin();
-
}
else {
-
this.
setCookies(name, token);
-
}
-
},
-
-
// 绑定登录或获取验证码按钮
-
btnClick(
) {
-
// 判断是获取验证码还是登录
-
if (
this.
dialogAtrr.
loginBtn ==
"获取验证码") {
-
this.
userInfo.
phone =
this.
dialogAtrr.
inputValue;
-
-
// 获取验证码
-
this.
getCodeFun();
-
}
else {
-
// 登录
-
this.
login();
-
}
-
},
-
-
// 绑定登录,点击显示登录层
-
showLogin(
) {
-
this.
dialogUserFormVisible =
true;
-
-
// 初始化登录层相关参数
-
this.
dialogAtrr = { ...defaultDialogAtrr };
-
},
-
-
// 登录
-
login(
) {
-
this.
userInfo.
code =
this.
dialogAtrr.
inputValue;
-
-
if (
this.
dialogAtrr.
loginBtn ==
"正在提交...") {
-
this.
$message.
error(
"重复提交");
-
return;
-
}
-
if (
this.
userInfo.
code ==
"") {
-
this.
$message.
error(
"验证码必须输入");
-
return;
-
}
-
if (
this.
userInfo.
code.
length !=
6) {
-
this.
$message.
error(
"验证码格式不正确");
-
return;
-
}
-
this.
dialogAtrr.
loginBtn =
"正在提交...";
-
userInfoApi
-
.
login(
this.
userInfo)
-
.
then(
(response) => {
-
console.
log(response.
data);
-
// 登录成功 设置cookie
-
this.
setCookies(response.
data.
name, response.
data.
token);
-
})
-
.
catch(
(e) => {
-
this.
dialogAtrr.
loginBtn =
"马上登录";
-
});
-
},
-
-
setCookies(
name, token) {
-
cookie.
set(
"token", token, {
domain:
"localhost" });
-
cookie.
set(
"name", name, {
domain:
"localhost" });
-
window.
location.
reload();
-
},
-
-
// 获取验证码
-
getCodeFun(
) {
-
if (!
/^1[34578]\d{9}$/.
test(
this.
userInfo.
phone)) {
-
this.
$message.
error(
"手机号码不正确");
-
return;
-
}
-
-
// 初始化验证码相关属性
-
this.
dialogAtrr.
inputValue =
"";
-
this.
dialogAtrr.
placeholder =
"请输入验证码";
-
this.
dialogAtrr.
maxlength =
6;
-
this.
dialogAtrr.
loginBtn =
"马上登录";
-
-
// 控制重复发送
-
if (!
this.
dialogAtrr.
sending)
return;
-
-
// 发送短信验证码
-
this.
timeDown();
-
this.
dialogAtrr.
sending =
false;
-
smsApi
-
.
sendCode(
this.
userInfo.
phone)
-
.
then(
(response) => {
-
this.
timeDown();
-
})
-
.
catch(
(e) => {
-
this.
$message.
error(
"发送失败,重新发送");
-
// 发送失败,回到重新获取验证码界面
-
this.
showLogin();
-
});
-
},
-
-
// 倒计时
-
timeDown(
) {
-
if (
this.
clearSmsTime) {
-
clearInterval(
this.
clearSmsTime);
-
}
-
this.
dialogAtrr.
second =
60;
-
-
this.
dialogAtrr.
labelTips =
"验证码已发送至" +
this.
userInfo.
phone;
-
this.
clearSmsTime =
setInterval(
() => {
-
--
this.
dialogAtrr.
second;
-
if (
this.
dialogAtrr.
second <
1) {
-
clearInterval(
this.
clearSmsTime);
-
this.
dialogAtrr.
sending =
true;
-
this.
dialogAtrr.
second =
0;
-
}
-
},
1000);
-
},
-
-
// 关闭登录层
-
closeDialog(
) {
-
if (
this.
clearSmsTime) {
-
clearInterval(
this.
clearSmsTime);
-
}
-
},
-
-
showInfo(
) {
-
let token = cookie.
get(
"token");
-
if (token) {
-
this.
name = cookie.
get(
"name");
-
console.
log(
this.
name);
-
}
-
},
-
-
loginMenu(
command) {
-
if (
"/logout" == command) {
-
cookie.
set(
"name",
"", {
domain:
"localhost" });
-
cookie.
set(
"token",
"", {
domain:
"localhost" });
-
-
//跳转页面
-
window.
location.
href =
"/";
-
}
else {
-
window.
location.
href = command;
-
}
-
},
-
-
handleSelect(
item) {
-
window.
location.
href =
"/hospital/" + item.
hoscode;
-
},
-
-
weixinLogin(
) {
-
this.
dialogAtrr.
showLoginType =
"weixin";
-
//初始化微信的相关参数
-
weixinApi.
getLoginParam().
then(
(response) => {
-
var obj =
new
WxLogin({
-
self_redirect:
true,
-
id:
"weixinLogin",
// 需要显示的容器id
-
appid: response.
data.
appid,
// 公众号appid wx*******
-
scope: response.
data.
scope,
// 网页默认即可
-
redirect_uri: response.
data.
redirect_Uri,
// 授权成功后回调的url
-
state: response.
data.
state,
// 可设置为简单的随机数加session用来校验
-
style:
"black",
// 提供"black"、"white"可选。二维码的样式
-
href:
"",
// 外部css文件url,需要https
-
});
-
});
-
},
-
-
phoneLogin(
) {
-
this.
dialogAtrr.
showLoginType =
"phone";
-
this.
showLogin();
-
},
-
},
-
};
-
</script>
-
-
然后修改一下手机登录的部分,我们把微信登录跟手机号绑定写到一起,微信扫描之后还是进入手机的登录页面
修改UserInfoServiceImpl:的手机登录
-
//用户手机登录接口
-
@Override
-
public
Map<
String,
Object>
login(
LoginVo loginVo) {
-
//从loginVo里面获取输入的手机号和验证码
-
String phone = loginVo.
getPhone();
-
String code = loginVo.
getCode();
-
//校验参数 判断手机号和验证码是否为空
-
if(
StringUtils.
isEmpty(phone) ||
StringUtils.
isEmpty(code)) {
-
throw
new
HospitalException(
ResultCodeEnum.
PARAM_ERROR);
-
}
-
-
//(整合阿里云短信服务)判断手机验证码和输入的验证码是否一致
-
//校验校验验证码
-
String mobleCode = redisTemplate.
opsForValue().
get(phone);
-
if(!code.
equals(mobleCode)) {
-
throw
new
HospitalException(
ResultCodeEnum.
CODE_ERROR);
-
}
-
-
//绑定手机号码
-
UserInfo userInfo =
null;
-
if(!
StringUtils.
isEmpty(loginVo.
getOpenid())) {
-
userInfo =
this.
selectWxInfoOpenId(loginVo.
getOpenid());
-
if(
null != userInfo) {
-
userInfo.
setPhone(loginVo.
getPhone());
-
this.
updateById(userInfo);
-
}
else {
-
throw
new
HospitalException(
ResultCodeEnum.
DATA_ERROR);
-
}
-
}
-
//如果userInf为空做的是正常的手机登录
-
if (userInfo==
null){
-
//判断是否是第一次登录:根据手机号查询数据库,如果不存在相同的手机号就是第一次登录
-
QueryWrapper<
UserInfo> queryWrapper =
new
QueryWrapper<>();
-
queryWrapper.
eq(
"phone", phone);
-
userInfo = baseMapper.
selectOne(queryWrapper);
-
if(
null == userInfo) {
//等于空表示第一次使用这个手机号登录
-
userInfo =
new
UserInfo();
-
userInfo.
setName(
"");
-
userInfo.
setPhone(phone);
-
userInfo.
setStatus(
1);
-
baseMapper.
insert(userInfo);
-
}
-
}
-
-
-
//校验是否被禁用
-
if(userInfo.
getStatus() ==
0) {
//判断用户状态是否为0禁用状态
-
throw
new
HospitalException(
ResultCodeEnum.
LOGIN_DISABLED_ERROR);
-
}
-
-
-
//不是第一次登录,直接登陆
-
-
//返回登录的信息 :返回用户名 返回tocken信息
-
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);
-
-
//JWT工具类生成token
-
String token =
JwtHelper.
createToken(userInfo.
getId(), name);
-
map.
put(
"token", token);
-
-
return map;
-
}
点击登录:
点击第三方账号登录:
用手机扫描二维码:
yygh_user数据库表user_nfo成功插入一条数据:
然后显示绑定手机号:
这页面换成了昵称显示登录:
转载:https://blog.csdn.net/dengfengling999/article/details/128758669