手把手教你做微信小程序授权登录交互(一)

• 一、uni.login请求临时code
• 二、uni.request向后台交换数据
• 三、源代码
• 前台：在GetUserInfo中添加接口
• 后台：SpringBoot后台数据处理
• 四、实现效果

开发需求：我们团队在开发微信小程序过程中，需要绑定微信用户的信息到数据库里，那么就需要获得用户的唯一标识openid,而微信为了安全，是禁止小程序直接访问该接口,因此我们不能直接拿到用户的openid，从而需要通过调用微信接口实现授权登录。

我是孙不坚1208，这篇文章是在2021年暑假参加山东省大学生软件设计大赛时所写，主要是第一次接触小程序开发（uniapp+springboot），遇到的问题都记下来了，后面我也会持续更新出我的专栏《微信小程序开发指南》，欢迎与我一起学习，希望我的文章能够帮助到大家。

这篇文章是基于uniapp+springboot的微信小程序授权登录交互，对uniapp不熟悉的可以去这篇两万字的博客（【前端之旅】uni-app学习笔记）了解一下。

官方登录流程图(逻辑流程)：

主要步骤:

1. 前端获取到code(wx.login)，传入服务器。

2. 服务器通过参数AppID和AppSecret访问官方接口，获取到OpenId。

3. 服务器将OpenId进行相应的业务处理并返回给前端。

注意事项

1. 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。

2. 临时登录凭证 code 只能使用一次。

一、uni.login请求临时code

在微信小程序中，使用微信开放接口:wx.login(Object object)，调用接口获取登录凭证（code）

在uniapp中，我们通过uni.login(OBJECT)，调用接口获取登录凭证（code）。

OBJECT 参数说明

success 返回参数说明

示例

uni.login({
  provider: 'weixin',
  success: function (res) {
    console.log(res.Result);
  }
});

二、uni.request向后台交换数据

我们通过 uni.request(OBJECT)：向后台发起请求，后台通过前台发送得到的凭证（code），需要后台发送请求到微信接口，然后微信返回一个json格式的字符串到后台，后台处理之后，进而换取用户登录态信息,包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid）及本次登录的会话密钥（session_key）等， 再返回到前台。

uni.request(OBJECT)：发起网络请求。

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

OBJECT 参数说明

method 有效值

必须大写，有效值在不同平台差异说明不同。

success 返回参数说明

data 数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

• 对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

示例

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

返回值

如果希望返回一个 requestTask 对象，需要至少传入 success / fail / complete 参数中的一个。例如：

var requestTask = uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    complete: ()=> {}
});
requestTask.abort();

如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：Promise 封装

通过 requestTask，可中断请求任务。

requestTask 对象的方法列表

示例

const requestTask = uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        name: 'name',
        age: 18
    },
    success: function(res) {
        console.log(res.data);
    }
});
// 中断请求任务
requestTask.abort();

Tips

• 请求的 header 中 content-type 默认为 application/json。
• 避免在 header 中使用中文，或者使用 encodeURIComponent 进行编码，否则在百度小程序报错。
• 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
• H5 端本地调试需注意跨域问题，参考：调试跨域问题解决方案
• H5端 cookie 受跨域限制（和平时开发网站时一样），旧版的 uni.request 未支持 withCredentials 配置，可以直接使用 xhr 对象或者其他类库。
• uni-app 插件市场有flyio、axios等三方封装的拦截器可用
• localhost、127.0.0.1等服务器地址，只能在电脑端运行，手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络
• 单次网络请求数据量建议控制在50K以下（仅指json数据，不含图片），过多数据应分页获取，以提升应用体验。

附：了解各种平台的ID，它们都有相同的功能。

• OpenID：在微信应用（公众号、小程序等）默认使用 OpenID，在开发中请求的接口返回的一般都是OpenID。在小程序或微信网页里不用做授权，静默情况下也能拿到 OpenID。可以说 OpenID 是微信生态里最重要的一个 ID。可以理解 OpenID 是通过 AppID 和微信用户 ID 加密得到的，其与微信应用（每个应用会有 AppID）相关，每个微信应用都会生成一个唯一的用户的识别。
• AppID 和 AppSecret：公众号和小程序都会有一个 AppID 用来标识当前的微信应用，而如果需要开发的话，接口的请求都需要用到 AppSecret。
• 微信用户 ID：微信用户 ID 是有加密的，是无法拿到的。一般我们使用微信机器人开发的话，常用的是微信号或者微信昵称作为 ID。
• UnionID：在微信开放平台里面，做了账号绑定后，就会生成一个统一的 UnionID，绑定后的微信应用（小程序、公众号等）都可以使用一个 ID。获取 UnionID 需要经过用户授权。
• UUID：主要是针对于前端的设备，比如小程序或者网页的，因为获取 OpenID 需要一定的开发，所以如果在获取不到的情况下，我们一般会给当前浏览器或者小程序生成一个随机的 ID。
• UserID：用户的真实 ID，一般是存在数据库的 ID。