微信登录
微信小程序
1、配置登录按钮 ：在小程序页面中放置一个 button 组件，并设置其 open-type 属性为 getPhoneNumber，用于获取用户的手机号码，这是实现一键登录的关键组件。快捷跳转
2、调用微信登录接口 ：当用户点击登录按钮时，首先需要调用微信的登录接口 wx.login()，获取一个临时登录凭证 code。快捷跳转
button 组件属性 open-type 为 getPhoneNumber可忽略第三步，直接使用bindgetphonenumber方法获取到加密的手机号数据，将其发送到后端进行解密。
3、获取用户手机号 ：在获取到 code 后，通过 wx.getPhoneNumber() 接口获取用户的手机号码。需要注意的是，wx.getPhoneNumber() 接口会返回加密的手机号数据，需要将其发送到后端进行解密。
4、将数据发送到后端 ：将获取到的 code 和加密的手机号数据通过 wx.request() 发送到后端服务器。后端服务器会利用微信提供的接口和 appid、secret 等信息对 code 进行验证，并解密手机号数据，完成登录或注册流程。
5、处理登录结果 ：根据后端返回的登录结果，如果登录成功，后端通常会返回一个登录态凭证，如 token，前端需要将 token 存储起来，以便在后续的请求中使用。同时，可以跳转到相应的页面，完成登录后的逻辑。
// 在页面的 script 中
Page({
data: {
// 登录状态
},
// 登录按钮点击事件
bindGetPhoneNumber(e) {
const that = this;
// 调用微信登录接口
wx.login({
success(loginRes) {
if (loginRes.code) {
// 获取用户手机号
wx.getPhoneNumber({
success(res) {
// 将 code 和加密的手机号数据发送到后端
wx.request({
url: '后端登录接口地址',
method: 'POST',
data: {
code: loginRes.code,
encryptedData: res.encryptedData,
iv: res.iv
},
success(requestRes) {
if (requestRes.data.code === 0) {
// 登录成功，存储 token 等信息
wx.setStorageSync('token', requestRes.data.data.token);
// 跳转到首页或其他页面
} else {
// 登录失败，提示错误信息
wx.showToast({
title: requestRes.data.msg,
icon: 'none'
});
}
},
fail(err) {
console.error('请求登录接口失败', err);
}
});
},
fail(err) {
console.error('获取手机号失败', err);
}
});
} else {
console.error('微信登录失败', loginRes.errMsg);
}
},
fail(err) {
console.error('微信登录接口调用失败', err);
}
});
}
});
APP应用（uniapp开发）
1、打开项目的manifest.json文件，在“App模块配置”项的“OAuth(登录鉴权)”下，勾选“微信登录”：
2、填写 appid 微信开放平台申请应用的AppID值。填写 appSecret 微信开放平台申请应用的AppSecret值。填写 UniversalLinks iOS平台通用链接，必须与微信开放平台配置的一致，推荐使用一键生成iOS通用链接
3、客户端调用api向微信请求授权，获取临时票据（code），向开发者业务服务器发起网络请求
4、业务服务器通过code + 仅保存在服务器的appsecret参数，向：微信开放平台接口发起网络请求 快捷跳转。
5、业务服务器成功获取用户信息后，再依据unionid或openid查数据库的用户表并生成新token，并返回token给客户端
6、客户端得到token后，保存到storage完成登录。快捷跳转
uni.login({
"provider": "weixin",
"onlyAuthorize": true, // 微信登录仅请求授权认证
success: function(event){
const {code} = event
//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
uni.request({
url: 'https://www.example.com/loginByWeixin', //仅为示例，并非真实接口地址。
data: {
code: event.code
},
success: (res) => {
//获得token完成登录
uni.setStorageSync('token',res.token)
}
});
},
fail: function (err) {
// 登录授权失败
// err.code是错误码
}
})
公众号登录
1、引导用户进入授权页面。
2、接受用户授权同意，在回调页面中获取code。
3、通过code换取用户授权access_token（与服务端接口 access_token 不同）。
4、通过用户授权 access_token 和 openid 获取用户基本信息（支持UnionID机制）。
官方文档快捷跳转
getCode() { // 非静默授权，第一次有弹框
this.code = ''
var local = location.href;//获取当前url链接
var appid = '' //公众号appid
this.code = this.getUrlCode().code // 截取code
if (this.code == null || this.code === '') { // 如果没有code，则去请求
window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
} else {
// 携带用户code 登录业务接口调用
}
},
getUrlCode() { // 截取url中的code方法 截取微信返回的code 传递给后台
var url = location.search
this.winUrl = url
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
var strs = str.split("&")
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
}
}
return theRequest
},
