微信小程序授权登录

  • 首先要明确授权登录的业务流程:微信官方文档中对授权登录已经解释的很清楚了,在这里再简单赘述下吧。
  • 业务需求是:小程序在加载时,登录并获取用户信息。如果没有用户信息则跳转到引导或着登录页。
  • 业务逻辑是:首先调用wx.login函数获取code,然后向服务器发送请求,根据拿到的code换取登录凭证openId最后再根据openId查询绑定的用户信息。如果用户已存在则直接获取用户信息,否做跳转至引导页或登录页,获取到用户信息后将信息存到全局数据中便于调用,==> 登录完成。
  • 但由于小程序存在分享页面等功能,用户打开不一定都是初始页面。小程序的onLaunch生命周期和页面onLoad生命周期函数是同时运行的,其中的请求也是异步的。可能会存在登录后但获取用户信息未完成,页面已经开始调用用户信息并请求数据,所以,页面要在登录函数中进行验证,如果小程序的加载函数先执行完成,页面就继续执行;如果页面先加载完成,则把请求数据的函数传入到app.js中。当小程序加载函数完成后再调用。
在app.js中的onLaunch生命周期函数中, 当然页可以写在自定义的login登录页(需要手动登录时),根据个人情况看吧:
 /**

  * 生命周期函数--监听小程序加载(函数只加载一次)

  */
onLaunch: function () {
  let that = this;
  // 提示信息
  wx.showLoading({
    title: "加载中...",
    mask: true,
  });
  wx.login({
    success: (res) => {
      that.request(
        //请求地址: url:''
        "/sysLogin/loginPage/lodin",
        {
          // 参数
          jsCode: res.data,
        },
        // 成功后回调
        (succRes) => {
          wx.hideLoading();
          if (succRes.statusCode == 200) {
            if (succRes.data.code == 200) {
              //存储用户information
              that.globalData.userInfo = succRes.data.payload.data;
              that.globalData.id = succRes.data.payload.data.id;
              that.globalData.openId = succRes.data.payload.openId;
              // 获取加载的页面
              let pages = getCurrentPages();
              // 获取当前页面
              let currentPages = pages[pages.length - 1];
              // 获取当前页面的url
              let url = currentPages.route;
              //判断是哪个页面 如果是引导页
              if (url == "pages/guidance/guidance") {
                // 跳转至首页
                wx.showToast({
                  icon: "none",
                  mask: true,
                  title: "登录成功, 请稍等...",
                });
                setTimeout(function () {
                  wx.switchTab({
                    url: "pages/index/index",
                  });
                }, 2000);
              } else {
                wx.showToast({
                  title: "已登录",
                  icon: "none",
                  duration: 1500,
                });
              }
            } else if ((succRes, data.code == 400)) {
              // 不存在已关联用户,则跳转至引导页
              let pages = getCurrentPages(); // 获取加载的页面
              let currentPages = pages[pages.length - 1]; // 获取当前页面
              let url = currentPages.route; // 获取当前页面的url
              // 判断是否为引导页
              if (url != "pages/guidance/guidance") {
                wx.showModal({
                  title: "尚未登录平台,请先登录",
                  confirmText: "去登录",
                  showCancel: false,
                  success: function (res) {
                    if (res.confirm) {
                      wx.reLaunch({
                        url: "/pages/guidance/guidance",
                      });
                    }
                  },
                });
              }
            }
          } else {
            //如果状态码不是200 提示错误信息
            wx.showModal({
              title: "错误提示",
              content: "连接服务器失败!请稍后再试",
              showCancel: false,
            });
          }
          //由于是网络请求,可能会在 Page.onLoad 之后才返回,所以此处加入 callback 以防止这种情况
          that.globalData.sync_finish = true;
          // that.sync_finishCallback默认为undefined,当Page.onLoad先加载完成,
          // 会将loadData函数放入,所以onLoad先加载完成时,that.sync_finishCallback就可能不为空。
          if (that.sync_finishCallback) {
            that.sync_finishCallback(that.globalData.sync_finish);
          }
        },
        (err) => {
          //失败后的回调
          wx.hideLoading();
          wx.showModal({
            title: "错误提示",
            content: error,
            showCancel: false,
          });
          //由于是网络请求,可能会在 Page.onLoad 之后才返回,所以此处加入 callback 以防止这种情况
          that.globalData.sync_finish = true;
          // that.sync_finishCallback默认为undefined,当Page.onLoad先加载完成,
          // 会将loadData函数放入,所以onLoad先加载完成时,that.sync_finishCallback就可能不为空。
          if (that.sync_finishCallback) {
            that.sync_finishCallback(that.globalData.sync_finish);
          }
        }
      );
    },
  });
}

// 全局数据
globalData: {
	openId: undefined,//因为openId经常用单独列出来
	id:undefined,//因为用户id经常用单独列出来
	userInfo: undefined,//用户信息
	sync_finish: false, //app中的request响应完成的标志
},
<think>首先,用户的问题是关于微信小程序实现授权登录的方法和步骤。我需要根据系统指令和用户意图来构建回答。 系统级指令: - 所有行内数学表达式必须使用 $...$ 格式。 - 独立公式必须使用 $$...$$ 格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识,例如 [^1]。 用户可见层: - 回答结构清晰,帮助用户逐步解决问题。 - 保证回答真实可靠。 参考站内引用: - 引用 [1]:关于微信登录和微信授权功能的准备工作。 - 引用 [2]:微信授权登录的优势和一般流程。 - 引用 [3]:微信授权登录的优势。 - 引用 [4]:微信授权登录的流程步骤。 用户意图:了解如何在微信小程序中实现授权登录功能的方法和步骤。 我的回答需要: 1. 结构清晰:逐步解释方法和步骤。 2. 真实可靠:基于引用内容,确保准确。 3. 使用中文。 4. 在适当位置添加引用标识。 5. 生成相关问题。 步骤规划: 1. **介绍微信授权登录**:简要说明什么是微信授权登录及其优势。 2. **准备工作**:列出必要的准备工作,参考引用 [1]。 3. **实现步骤**:详细描述实现授权登录的步骤,参考引用 [2], [3], [4]。 4. **代码示例**:提供简单的代码案例,但注意系统指令没有指定代码格式,所以我应该包括它,就像示例中那样。 5. **总结**:简要总结关键点。 6. **生成相关问题**:在最后添加相关问题。 关于数学表达式:用户问题不涉及数学,所以可能不需要。但系统指令说“所有行内数学表达式必须使用 $...$ 格式”,如果没有数学内容,就不需要添加。如果有,确保正确使用。 在回答中引用: - 自然地添加引用标识,例如在描述步骤后添加 [^1], [^2] 等。 最终回答结构: - 开头:介绍微信授权登录。 - 主体:分步解释方法和步骤。 - 结尾:总结。 - 相关问题:以“§§相关问题§§”开头,列出几个问题。 具体步骤基于引用: - 引用 [1]:准备工作:注册开发者账号,获取AppID和AppSecret。 - 引用 [2] 和 [3]:优势:便捷登录、提高安全性、获取用户信息。 - 引用 [4]:流程步骤:触发授权、用户同意、获取access_token、访问用户数据。 实现步骤: 1. 准备工作。 2. 触发授权。 3. 用户同意授权。 4. 获取access_token。 5. 访问用户数据。 6. 处理用户信息。 代码示例:引用 [2] 提到“导入小程序授权登陆项目”,我可以提供一个简单的伪代码或示例代码,类似于示例中的Python代码,但用微信小程序的JS代码。 使用微信小程序的官方API: - wx.login() 获取code。 - 发送code到服务器,换取session_key和openid。 - wx.getUserProfile() 或 wx.getUserInfo() 获取用户信息(注意:微信有更新,可能需要使用新API)。 最新微信小程序授权登录流程: - 使用wx.login()获取临时登录凭证code。 - 将code发送到开发者服务器。 - 服务器使用code、appid、appsecret向微信服务器换取session_key和openid。 - 使用wx.getUserProfile()获取用户信息(需要用户授权)。 确保回答真实可靠:基于微信官方文档。 生成相关问题: - 例如:1. 如何处理授权拒绝的情况?2. 如何确保用户信息安全?3. 微信授权登录的优势有哪些?4. 授权登录的常见错误有哪些? 现在,构建回答。</think>### 微信小程序实现授权登录的方法和步骤 微信小程序授权登录是一种便捷的用户身份验证方式,允许用户通过微信账号快速登录小程序,无需额外注册。该方法基于微信开放平台的API实现,能提升用户体验和安全性。下面我将逐步解释实现方法和具体步骤,确保内容真实可靠,参考了微信官方文档和最佳实践。 #### 一、准备工作 在开始实现授权登录前,需完成以下基础工作: 1. **注册微信开放平台账号**:访问微信开放平台(open.weixin.qq.com),注册开发者账号并完成实名认证。 2. **创建小程序**:在开放平台后台创建小程序项目,获取小程序的AppID和AppSecret(用于后续API调用)[^1]。 3. **配置小程序信息**:在小程序后台设置合法域名(如服务器域名),确保API请求安全。 4. **服务器准备**:准备一个后端服务器(如Node.js或Java),用于处理微信API请求和存储用户数据。 准备工作完成后,即可进入授权登录的实现流程。 #### 二、授权登录实现步骤 以下是微信小程序授权登录的标准流程,分为前端(小程序端)和后端(服务器端)操作。步骤基于微信官方API设计,确保安全可靠。 1. **前端:触发授权请求** - 在小程序中,用户点击登录按钮时,调用微信API(如`wx.login()`)获取临时登录凭证(code)。 - 示例代码(使用微信小程序JavaScript): ```javascript wx.login({ success: (res) => { if (res.code) { // 将code发送到后端服务器 wx.request({ url: 'https://your-server.com/api/login', method: 'POST', data: { code: res.code }, success: (response) => { console.log('服务器响应:', response.data); } }); } else { console.error('获取code失败:', res.errMsg); } } }); ``` - **说明**:`wx.login()`自动获取code,无需用户额外授权。code有效期为5分钟,需及时发送到服务器[^4]。 2. **用户同意授权** - 如果需要获取用户信息(如昵称、头像),调用`wx.getUserProfile()`(微信推荐方式)弹出授权窗口。 - 用户点击“同意”后,前端获取加密的用户信息(encryptedData和iv)。 ```javascript wx.getUserProfile({ desc: '用于完善用户资料', success: (res) => { const { encryptedData, iv } = res; // 将encryptedData和iv发送到后端解密 wx.request({ url: 'https://your-server.com/api/user-info', method: 'POST', data: { encryptedData, iv }, success: (response) => { console.log('用户信息:', response.data); } }); }, fail: (err) => { console.error('授权失败:', err); } }); ``` - **关键点**:从2021年起,微信不再支持`wx.getUserInfo()`直接获取用户信息,必须使用`wx.getUserProfile()`并声明用途(desc参数)[^3]。 3. **后端:获取access_token和用户信息** - 后端服务器接收前端发送的code,向微信服务器请求换取access_token(或session_key)。 - 请求URL:`https://api.weixin.qq.com/sns/jscode2session?appid=YOUR_APPID&secret=YOUR_SECRET&js_code=CODE&grant_type=authorization_code` - 响应示例:`{ "session_key": "xxx", "openid": "xxx" }` - 使用session_key解密前端发送的encryptedData和iv,获取用户原始信息(如openid、昵称、头像)。 - **解密算法**:使用AES-128-CBC模式,参考微信官方文档。 - 后端存储用户openid和session_key,并生成自定义登录态(如token)返回给前端[^2][^4]。 4. **前端处理登录态** - 前端接收后端返回的自定义token,存储在本地(如`wx.setStorageSync('token', token)`)。 - 后续请求时,将token添加到header中验证用户身份。 5. **错误处理与安全优化** - **授权拒绝处理**:如果用户点击“拒绝”,前端捕获fail回调,提示用户重新授权。 - **安全措施**: - 后端验证请求来源(检查referer),防止CSRF攻击。 - 定期刷新session_key,避免泄露。 - 敏感操作(如支付)需额外安全验证[^3][^4]。 #### 三、优势与注意事项 - **优势**:微信授权登录简化注册流程,提升用户体验;通过微信服务器验证,增强账号安全性;可获取基础用户信息,实现个性化服务[^2][^3]。 - **注意事项**: - 遵守微信隐私政策,明确告知用户数据用途。 - 测试阶段使用微信开发者工具模拟授权流程。 - 正式上线前需提交微信审核。 通过以上步骤,您可以在微信小程序中高效实现授权登录功能。整个过程耗时约1-2小时开发,具体取决于服务器配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值