微信登录

微信小程序

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
},