步骤1：在页面中先引入如下 JS 文件（支持https）：

var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

参数说明 我们需要写必须的那几个参数；

注意：接口的后台需要准备这几个参数：

1.需要在显示二维码的页面 引入前端api接口：

import weixinApi from ‘@/api/weixin’

2.然后在 mounted() 方法中添加以下方法

然后记得网关设置：

测试二维码展示：

手机点击确认后的：

请求网址: http://localhost:8160/api/ucenter/wx/callback?code=0815s6ll2O8vK94DBoll2u3htf45s6lP&state=1661166686989

请求网址: http://localhost:8160/api/ucenter/wx/callback?code=091927ll2UTvK94eW6nl2segEs3927lr&state=1661167265572

简单说，OAuth 就是一种授权机制。数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。

四、令牌与密码 令牌（token）与密码（password）的作用是一样的，都可以进入系统，但是有三点差异。

（1）令牌是短期的，到期会自动失效，用户自己无法修改。密码一般长期有效，用户不修改，就不会发生变化。

（2）令牌可以被数据所有者撤销，会立即失效。以上例而言，屋主可以随时取消快递员的令牌。密码一般不允许被他人撤销。

（3）令牌有权限范围（scope），比如只能进小区的二号门。对于网络服务来说，只读令牌就比读写令牌更安全。密码一般是完整权限。

上面这些设计，保证了令牌既可以让第三方应用获得权限，同时又随时可控，不会危及系统安全。这就是 OAuth 2.0 的优点。

注意，只要知道了令牌，就能进入系统。系统一般不会再次确认身份，所以令牌必须保密，泄漏令牌与泄漏密码的后果是一样的。 这也是为什么令牌的有效期，一般都设置得很短的原因。

1. 客户应用请求授权服务器获取Access Token
2. 授权服务器咨询用户意见
3. 用户同意授权
4. 授权服务器颁发Access Token 给 客户应用

创建工具类：httpclint:

在server_user模块：

在common-util中引入httpclient依赖：

<!--httpclient-->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
        </dependency>

第二步：通过 code 获取access_token

通过 code 获取access_token

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

前端：

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

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

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

3.4.3 父组件定义回调方法 在myheader.vue添加方法

mounted() 中增加方法：

然后methods中增加方法：

loginCallback(name, token, openid) {
      // 打开手机登录层，绑定手机号，改逻辑与手机登录一致
      if(openid != ) {
        this.userInfo.openid = openid
        this.showLogin()
      } else {
        this.setCookies(name, token)
      }
    },

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

//绑定手机号码
        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 YyghException(ResultCodeEnum.DATA_ERROR);
            }
        }

        if(userInfo == null){
            //判断是否第一次登录，根据手机号查询数据库，如果不存在相同的手机号就是第一次登录
            QueryWrapper<UserInfo> wrapper = new QueryWrapper<>();
            wrapper.eq("phone",phone);
             userInfo = baseMapper.selectOne(wrapper);
            if(null==userInfo ){//第一次使用这个手机号登录
                //添加信息到数据库
                userInfo = new UserInfo();
                userInfo.setName("");
                userInfo.setPhone(phone);
                userInfo.setStatus(1);//设置可用
                //this.save(userInfo);//保存到数据库
                baseMapper.insert(userInfo);
            }
        }