尚医通-OAuth2-微信登录接口开发(三十一)

目录:

(1)微信登录-OAuth2介绍

(2)前台用户系统-微信登录-准备工作

(3)微信登录-生成微信二维码-接口开发

(4)微信登录-生成验证码-前端整合

(5)微信登录-获取扫码人信息-实现分析

(6)微信登录-获取联系人扫码信息-接口开发

(7)微信登录-手机号绑定和前端整合


(1)微信登录-OAuth2介绍

微信登录是基于理论知识OAuth2实现的

尚医通-OAuth2-微信登录接口开发(三十一)_第1张图片

1、OAuth2

OAuth2解决什么问题

1.1.1 开放系统间授权

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

尚医通-OAuth2-微信登录接口开发(三十一)_第2张图片

资源拥有者:照片拥有者

客户应用:云冲印

受保护的资源:照片

尚医通-OAuth2-微信登录接口开发(三十一)_第3张图片

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

 尚医通-OAuth2-微信登录接口开发(三十一)_第4张图片

用户将自己的"云存储"服务的用户名和密码,告诉"云冲印",后者就可以读取用户的照片了。这样的做法有以下几个严重的缺点。

(1)"云冲印"为了后续的服务,会保存用户的密码,这样很不安全

(2)Google不得不部署密码登录,而我们知道,单纯的密码登录并不安全

(3)"云冲印"拥有了获取用户储存在Google所有资料的权力,用户没法限制"云冲印"获得授权的范围和有效期。

(4)用户只有修改密码,才能收回赋予"云冲印"的权力。但是这样做,会使得其他所有获得用户授权的第三方应用程序全部失效。

(5)只要有一个第三方应用程序被破解,就会导致用户密码泄漏,以及所有被密码保护的数据泄漏。

总结:

将受保护的资源中的用户名和密码存储在客户应用的服务器上,使用时直接使用这个用户名和密码登录

适用于同一公司内部的多个系统,不适用于不受信的第三方应用

1.1.4方式二:通用开发者key

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

 尚医通-OAuth2-微信登录接口开发(三十一)_第5张图片

1.1.5方式三:颁发令牌

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

使用令牌:字符串 

尚医通-OAuth2-微信登录接口开发(三十一)_第6张图片

令牌类比仆从钥匙 

 尚医通-OAuth2-微信登录接口开发(三十一)_第7张图片

 令牌:就是按照约定的规则,生成字符串,这个字符串颁发给某个服务,它它拿着进行访问,

设置字符串的有效时间,随时去吊销这个字符串,令牌的颁发我们令牌字符串我们需要对它进行加密等等处理

OAth2它只约定我们生成颁发令牌,生成字符串,但是字符串按照什么规则生成,它并没有约定,只告诉你用字符串方式解决,具体可以像之前的一个工具JWT工具生成字符串的的规则

OAth2只约定解决方案,并没有约定怎么去做,它只是颁发令牌、设置令牌的有效时间、包括随时去解除这个令牌

尚医通-OAuth2-微信登录接口开发(三十一)_第8张图片尚医通-OAuth2-微信登录接口开发(三十一)_第9张图片

 尚医通-OAuth2-微信登录接口开发(三十一)_第10张图片

1.3 OAuth2的应用

1.3.1 微服务安全

现代微服务中系统微服务化以及应用的形态和设备类型增多,不能用传统的登录方式

核心的技术不是用户名和密码,而是token,由AuthServer颁发token,用户使用token进行登录

尚医通-OAuth2-微信登录接口开发(三十一)_第11张图片

1.3.2 社交登录

尚医通-OAuth2-微信登录接口开发(三十一)_第12张图片

(2)前台用户系统-微信登录-准备工作

 点击微信扫码登录按钮,出现二维码,需要进行扫描,扫描二维码,获得扫码的信息,然后再出现绑定手机号,然后数据最后添加到数据库中尚医通-OAuth2-微信登录接口开发(三十一)_第13张图片

 我们用到微信的相关操作,微信是腾讯开发的,需要调用腾讯那边的内容进行实现,需要先在微信的开放平台省注册一个用户,注册一个用户的目的就是让你有微信相关接口的权限,让他给你做一个授权,注册目前只支持企业级别的用户,个人用户不支持

2.1 前期准备

1、注册

微信开放平台:https://open.weixin.qq.com

2、邮箱激活

3、完善开发者资料

4、开发者资质认证

准备营业执照,1-2个工作日审批、300元

5、创建网站应用

提交审核,7个工作日审批

6、内网穿透

ngrok的使用

注册之后会提供一个id和秘钥,这里我们使用提供的,自己不在注册

尚医通-OAuth2-微信登录接口开发(三十一)_第14张图片

redirect_url: 创建一个网站应用,在二维码下面显示,网站名称,这个名字需要微信那边审核通过

 域名:扫码确认之后,完成扫码,完成扫码之后,得到扫码的信息,微信那端给我们做一个回调,扫码之后,会调用指定接口的路径,这个路径我们没有办法调用本地,默认找不到,需要找到一个网络返回的的域名,才能返回,这就需要一个能够返回的域名

获取access_token时序图

尚医通-OAuth2-微信登录接口开发(三十一)_第15张图片

第一步:请求CODE(生成授权URL)

第二步:通过code获取access_token(开发回调URL)

 在service_user模块中添加:微信的配置

尚医通-OAuth2-微信登录接口开发(三十一)_第16张图片

创建一个工具类读取配置文件刚才配置的内容:

尚医通-OAuth2-微信登录接口开发(三十一)_第17张图片

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 

尚医通-OAuth2-微信登录接口开发(三十一)_第18张图片

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

说明:微信登录二维码我们是以弹出层的形式打开,不是以页面形式,所以做法是不一样的,参考如下链接,上面有相关弹出层的方式

准备工作 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

如图:

尚医通-OAuth2-微信登录接口开发(三十一)_第19张图片

尚医通-OAuth2-微信登录接口开发(三十一)_第20张图片 尚医通-OAuth2-微信登录接口开发(三十一)_第21张图片

因此我们的操作步骤为:

第一步我们通过接口把对应参数返回页面;

第二步在头部页面启动打开微信登录二维码;

第三步处理登录回调接口;

第四步回调返回页面通知微信登录层回调成功

第五步如果是第一次扫描登录,则绑定手机号码,登录成功

接下来我们根据步骤,一步一步实现

 接下来我们写接口返回参数:

尚医通-OAuth2-微信登录接口开发(三十一)_第22张图片

在: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 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)微信登录-生成验证码-前端整合

尚医通-OAuth2-微信登录接口开发(三十一)_第23张图片

尚医通-OAuth2-微信登录接口开发(三十一)_第24张图片

参数成功返回: 

尚医通-OAuth2-微信登录接口开发(三十一)_第25张图片

 创建weixin.js:

尚医通-OAuth2-微信登录接口开发(三十一)_第26张图片

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:

尚医通-OAuth2-微信登录接口开发(三十一)_第27张图片

 尚医通-OAuth2-微信登录接口开发(三十一)_第28张图片

在mounted里面添加初始化微信js

尚医通-OAuth2-微信登录接口开发(三十一)_第29张图片

 书写点击微信Login方法

尚医通-OAuth2-微信登录接口开发(三十一)_第30张图片

 尚医通-OAuth2-微信登录接口开发(三十一)_第31张图片

 在网关加上这个访问的路径:

尚医通-OAuth2-微信登录接口开发(三十一)_第32张图片

测试点击如果验证码没有出来,修改配置文件:

尚医通-OAuth2-微信登录接口开发(三十一)_第33张图片

点击下方的微信登录:出现二维码:

尚医通-OAuth2-微信登录接口开发(三十一)_第34张图片

尚医通-OAuth2-微信登录接口开发(三十一)_第35张图片

尚医通-OAuth2-微信登录接口开发(三十一)_第36张图片

 微信那段扫描我们的二维码,微信那端会回调咱的方法,咱的方法中会得到扫码人的信息,把信息加到数据库中,在这过程中微信要给它绑定一个手机号最终完成操作

(5)微信登录-获取扫码人信息-实现分析

尚医通-OAuth2-微信登录接口开发(三十一)_第37张图片

修改service_user模块的端口号:8106

尚医通-OAuth2-微信登录接口开发(三十一)_第38张图片

 (6)微信登录-获取联系人扫码信息-接口开发

尚医通-OAuth2-微信登录接口开发(三十一)_第39张图片

尚医通-OAuth2-微信登录接口开发(三十一)_第40张图片 httpclient请求微信提供的地址,原来是在地址栏输入地址回车请求,目前是程序中做到,不是用浏览器请求,所以用到这个技术,可以简单理解为不需要浏览器,帮助我们请求地址,然后得到地址返回的数据,或得到请求接口返回的数据,这就叫httpclient模拟浏览器请求和响应的过程

尚医通-OAuth2-微信登录接口开发(三十一)_第41张图片

在common-util中引入依赖:

尚医通-OAuth2-微信登录接口开发(三十一)_第42张图片

 尚医通-OAuth2-微信登录接口开发(三十一)_第43张图片

创建工具类: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 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);
            }
            // 设置参数
            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 params, Map headers, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,
            SocketTimeoutException, Exception {

        HttpClient client = null;
        HttpPost post = new HttpPost(url);
        try {
            if (params != null && !params.isEmpty()) {
                List formParams = new ArrayList();
                Set> entrySet = params.entrySet();
                for (Entry 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 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 接口: 

尚医通-OAuth2-微信登录接口开发(三十一)_第44张图片

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 {
    //用户手机登录接口
    Map login(LoginVo loginVo);

    //根据openid判断数据库是否存在微信的扫描人信息
    UserInfo selectWxInfoOpenId(String openid);
}

实现类: UserInfoServiceImpl:添加实现方法:

尚医通-OAuth2-微信登录接口开发(三十一)_第45张图片

 在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 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 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 

尚医通-OAuth2-微信登录接口开发(三十一)_第46张图片


  
  

这是一个中转页面,得到参数值,再调用弹框里面的方法,一会在myheader弹框中写上这个回调方法loginCallback,callback做一个中转页面,由页面在跳到弹框里面更加方便

在myheader.vue中添加:

尚医通-OAuth2-微信登录接口开发(三十一)_第47张图片

myheader.vue详细代码:




 然后修改一下手机登录的部分,我们把微信登录跟手机号绑定写到一起,微信扫描之后还是进入手机的登录页面

修改UserInfoServiceImpl:的手机登录

尚医通-OAuth2-微信登录接口开发(三十一)_第48张图片

//用户手机登录接口
    @Override
    public Map 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 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 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;
    }

 尚医通-OAuth2-微信登录接口开发(三十一)_第49张图片

点击登录:

尚医通-OAuth2-微信登录接口开发(三十一)_第50张图片

点击第三方账号登录:

尚医通-OAuth2-微信登录接口开发(三十一)_第51张图片

用手机扫描二维码:

 尚医通-OAuth2-微信登录接口开发(三十一)_第52张图片

 yygh_user数据库表user_nfo成功插入一条数据:

尚医通-OAuth2-微信登录接口开发(三十一)_第53张图片

 

尚医通-OAuth2-微信登录接口开发(三十一)_第54张图片

 

 然后显示绑定手机号:尚医通-OAuth2-微信登录接口开发(三十一)_第55张图片

 尚医通-OAuth2-微信登录接口开发(三十一)_第56张图片

这页面换成了昵称显示登录:

尚医通-OAuth2-微信登录接口开发(三十一)_第57张图片

 

你可能感兴趣的:(#,尚医通项目,微信)