小程序授权登录
大概流程:
wx.login()
是微信小程序提供的一个API,用于实现用户登录功能。
wx.login()
方法被调用后,如果成功生成code,它会返回一个对象,其中包含code字段。开发者可以将这个code发送到自己的服务器,
然后开发者服务器可以使用这个code调用微信的服务端接口
https://api.weixin.qq.com/sns/jscode2session
来换取用户的openid和session_key。拿到openid和session_key后与开发者服务器端账号关联,
关联后开发者服务器更改登录状态并返回登录token和用户信息给返给前端小程序,
小程序存储返回的token信息,然后在后续请求中带上token请求对应的数据。
以下是
wx.login()
方法的基本使用示例:// 获取code wx.login({ success: function(res) { if (res.code) { // 拿到code 发起网络请求 wx.request({ url: 'https://yourserver.com/api/login', // 开发者服务器地址 data: { code: res.code, // 其他需要传递的数据 }, method: 'POST', success: function(response) { // 处理服务器返回的数据 一般是登录信息 token = response.data.token StorageUtil.saveSync('ty-auth', token); console.log(response.data); }, fail: function() { // 请求失败的处理 } }); } else { console.log('登录失败!' + res.errMsg); } } });
const token = StorageUtil.getSync('ty-auth', null); wx.request({ url: 'https://example.com/api/resource', // 示例URL method: 'GET', // 请求方法 data: { // 请求的数据 }, header: { 'Access-Token': token, 'Content-Type': 'application/json' // 设置请求头 }, success: function(res) { // 请求成功的处理逻辑 console.log(res.data); // 打印服务器返回的数据 }, fail: function(err) { // 请求失败的处理逻辑 console.error(err); }, complete: function(res) { // 请求完成的处理逻辑(无论成功还是失败) } });
请注意,
wx.login()
生成的code是有时间限制的,通常有效期为5分钟,超时后需要用户重新触发登录流程。在实际应用中,你需要将上面的示例代码中的
https://yourserver.com/api/login
替换为你的服务器上处理登录请求的API地址,并且在服务器端实现相应的逻辑来处理微信服务端的响应。
一、获取临时登录凭证code
(前端)在小程序内调用 wx.login() 获取 临时登录凭证code ,并通过后端接口回传到开发者服务器。(临时登录凭证 code 只能使用一次)
二、code换取openId
小程序登录 | 微信开放文档后端服务器使用前端传入的临时登录凭证code appId secret 等参数后调用微信服务接口 auth.code2Session 来获取OpenID UnionID session_key
( appId appSecret 是开发服务器与小程序互相约定写死,为保证安全性无需传递,在小程序管理平台获得 )
openId:
1.同一个用户在微信小程序下的 OpenID 是相同的。
2.OpenID 是微信提供的一个全局唯一的标识符,用于识别一个用户。
3.无论在哪个微信小程序中,只要它是同一个微信账号,其 OpenID 都不会改变。
UnionID:
开发者拥有多个移动应用、网站应用、和公众账号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号(包括小程序),用户的 UnionID 是唯一的。
1.跨应用登录:用户在一个应用中登录后,可以使用 UnionID 在其他接入微信开放平台的应用中无缝登录,无需重复注册或输入账号密码。
2.用户账户集成:对于拥有多个服务的企业或平台,可以使用 UnionID 将用户的账户信息进行整合,提供一个统一的用户管理体系,方便用户在不同服务之间切换。
3.数据分析与用户画像:通过 UnionID,开发者可以追踪用户在多个应用中的行为,进行数据分析,构建用户画像,从而提供更加个性化的服务。
session_key:
1.在用户授权登录后由微信服务器生成,并发送给第三方应用的服务器
2.第三方应用需要向用户提供服务时,会使用 session_key 和加密算法 对用户数据加密
3.用户的设备接收到加密后的数据后,会使用同样的 session_key 和加密算法对数据进行解密,恢复出原始的用户数据
三、openId
与开发者服务器端账号关联
如果小程序需要与服务端的自有账号体系关联,开发者需要在服务器端处理openId
与自有账号的关联逻辑。这通常涉及到创建一个映射关系,将openId
映射到服务器端的用户账号。
1.首先需要验证这个openId
是否已经与微信用户账户关联过。如果用户之前已经通过微信登录过,服务器应该有该用户的openId
记录。如果用户尚未在服务器端注册,就需要创建一个新的账号。
2.将openId
与服务器端账号的关联信息存储在数据库中。这通常包括一个映射表,记录了每个openId
对应的服务器端账号ID。
3.将成功关联的结果返回给小程序端,通常是一个令牌(token)或者用户ID,小程序端可以使用这个token调用服务器端的各种API。
四、前端存储token
1.前端应用需要安全地存储这个token
,以便在后续的请求中携带,以证明用户的身份。通常这个token
会被存储在本地存储(localStorage或sessionStorage)中,或者作为cookie存储。
2.设置token
有效期: 为了防止用户在token
过期后仍然使用,前端应该设置token
的有效期,并在有效期过后要求用户重新登录。
五、wx.request请求头中携带token
wx.request(Object object)向开发服务器发起 HTTPS 网络请求。
前端在发起API请求时,应该在请求头中携带这个token
,通常是作为Authorization
头部的值。
服务器端在接收到请求后,会验证这个token
的有效性。
const token = null;
wx.request({
url: 'https://example.com/api/resource', // 示例URL
method: 'GET', // 请求方法
data: {
// 请求的数据
},
header: {
'Access-Token': token,
'Content-Type': 'application/json' // 设置请求头
},
success: function(res) {
// 请求成功的处理逻辑
console.log(res.data); // 打印服务器返回的数据
},
fail: function(err) {
// 请求失败的处理逻辑
console.error(err);
},
complete: function(res) {
// 请求完成的处理逻辑(无论成功还是失败)
}
});
-
验证
token
:这通常涉及到检查token
是否过期,是否被篡改,以及是否与请求的来源相匹配。 -
根据
token
提供服务: 如果token
验证成功,服务器端可以根据token
中包含的用户信息或其他标识来提供相应的服务,如获取用户数据、处理订单等。 -
处理
token
失效的情况: 如果token
失效或验证失败,服务器端应返回相应的错误信息,前端可以根据这些信息提示用户重新登录
六、退出登录
涉及到清除存储在前端的token
,并可能需要在服务器端也删除或失效与该token
关联的记录。