ThinkPHP3.2.3 实现微信小程序微信授权登录

最新推荐文章于 2024-02-18 11:30:35 发布
最新推荐文章于 2024-02-18 11:30:35 发布
阅读量3.2k 收藏 17
点赞数 6
分类专栏： 微信小程序 文章标签： 微信小程序 微信授权登录 thinkphp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405938/article/details/115493340
版权

网上找了很多教程都不好使，最后自己又研究了一番，终于成功了

一、总体设计

小程序登录流程：客户端通过调用wx.login()，获取登录凭证（code），将此code发往服务器，服务器通过调用 auth.code2Session 接口，使用 code 换取 openid、unionid、session_key 等信息。

参考官方给出的时序图：
在这里插入图片描述

本实例中将openid作为用户唯一标识，存入数据库中。服务器后端通过ThinkPHP框架实现两个接口：

http://localhost/srclib/index.php/Home/User/wxlogin // 登录接口
http://localhost/srclib/index.php/Home/User/wxsign // 首次登录（微信授权登录）接口

1. 登录状态的维持

小程序在初始化时，在小程序onLaunch生命周期函数中调用wx.login()，向登录接口发送请求，将code发送给服务器。服务器接收到code后，调用https://api.weixin.qq.com/sns/jscode2session接口，将code，appid和appSecret发送给微信官方服务器，服务器会收到用户唯一标识openid和会话密钥 session_key等信息。

此时服务器后台在数据库User表中查询openid：

  • 如果在User表中没有查到该记录，则说明此用户是新用户，还未授权微信登录，服务器返回客户端的状态码err_code值为1，表示不存在该用户，需要用户手动授权微信登录；

  • 如果在User表中查到了该记录，则表示用户已授权微信登录，此时服务器返回客户端的状态码err_code值为0，表示登录成功，服务器将用户信息和状态码发送至前端。

客户端在接收到状态码后判断：

  • 若状态码为0，则表示登录成功。客户端接收到用户信息后，通过调用wx.setStorageSync()将用户信息加入本地缓存，并将登录状态设置为true，此时实现了登录状态的维持；

  • 若状态码为1，表示用户还未授权登录，此时跳转至auth页等待用户的授权操作。

首次授权后，小程序每次启动时，自动调用登录接口，并将在本地缓存中更新用户信息和登录状态，小程序其他页面在初始化时调用_initial()函数，从本地缓存中取出用户信息和登录状态，赋值给全局变量userInfo和loginState，此后小程序页面渲染时便可从全局变量获取用户信息，设置给页面对象的data属性值。

2. 微信授权登录的实现

微信官方提供了wx.getUserProfile接口，使用获取用户信息。在页面中加入一个button，监听用户点击，点击后获取用户信息，本实例中主要获取了用户昵称nickName和用户头像地址avatarUrl。之后向首次登录（微信授权登录）接口发送请求，输入数据为code、nickName和avatarUrl。

服务端接收到这些参数后，首先调用https://api.weixin.qq.com/sns/jscode2session接口，将code，appid和appSecret发送给微信官方服务器，服务器会收到用户唯一标识openid等参数，然后在数据库User表中查询该openid：

  • 如果在User表中没有查到该记录，则将openid、nickName和avatarUrl构建为一条用户记录数据，插入User表中，服务器返回客户端的状态码err_code值为0，表示新用户授权登录成功，服务器将用户信息和状态码发送至前端；

  • 如果在User表中查到了该记录，则表示该用户重复授权，抛出异常，此时服务器返回客户端的状态码err_code值为1。

二、步骤说明

1. 用户首次进入，显示授权登录按钮

在这里插入图片描述

2. 点击授权登录按钮，出现提示弹窗

在这里插入图片描述

3. 点击允许后，登录成功，跳转至个人中心页

在这里插入图片描述

4. 此后用户再次进入小程序，已自动登录，实现了登录状态的维持

在这里插入图片描述

三、完整代码

1. 小程序前端

app.js
// app.js
App({
  globalData: {
    loginState: false, // 用户登录状态
    userInfo: null // 用户信息
  },
  onLaunch() {
    this.login() // 登录
  },
  _initial() { // Page初始化函数，用于读取本地缓存，并更新全局变量
    this.globalData.userInfo = wx.getStorageSync('userInfo')
    this.globalData.loginState = wx.getStorageSync('loginState')
    console.log("登录状态："+this.globalData.loginState)
    console.log("用户信息：")
    console.log(this.globalData.userInfo)
  },
  login() {
    let _this = this
    // 登录请求
    wx.login({
      success: res => {
        wx.request({
          url: 'http://localhost/srclib/index.php/Home/User/wxlogin',
          method: 'post',
          data: {
            code: res.code
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success: function (res) {
            if(res.data.error_code == 1) { // 用户未授权登录
              console.log("error")
              wx.setStorageSync('loginState', false)
              wx.navigateTo({ // 跳转至授权页，等待用户授权
                url: '../auth/auth', 
              })
            } else if(res.data.error_code == 0) { // 登录成功
              wx.setStorageSync('userInfo', res.data.data) // 更新本地缓存
              wx.setStorageSync('loginState', true)
            }
          }
        })
      }
    })
  }
})
profile.js
// pages/profile/profile.js
const app = getApp()
const globalData = getApp().globalData
Page({
  data: {
    userInfo: null
  },
  onLoad() {
    app._initial() // 页面初始化
    this.setData({
      userInfo: globalData.userInfo
    })
  }
})
auth.js
// auth.js
const app = getApp()
const globalData = getApp().globalData
Page({
  data: {
    userInfo: null
  },
  onLoad() {
    app._initial() // 页面初始化
  },
  getUserProfile(e) {
    // 使用wx.getUserProfile获取用户信息
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中
      success: (res) => {
        globalData.userInfo = res.userInfo
        this.setData({
          userInfo: globalData.userInfo
        })
        this.sign()
      }
    })
  },
  sign() {
    let _this = this
    wx.showLoading({
      title: '加载中',
    })
    // 用户首次登录请求
    wx.login({
      success: res => {
        wx.request({
          url: 'http://localhost/srclib/index.php/Home/User/wxsign',
          method: 'post',
          data: {
            code: res.code,
            name: globalData.userInfo.nickName,
            avatarUrl: globalData.userInfo.avatarUrl
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success: function (res) {
            if(res.data.error_code == 1) { // 用户登录失败
              console.log("error")
            } else if(res.data.error_code == 0) { // 用户登录成功
              wx.setStorageSync('userInfo', res.data.data) // 更新本地缓存
              wx.setStorageSync('loginState', true)
              wx.hideLoading()
              wx.showToast({
                title: '授权成功',
                icon: 'success',
                duration: 2000,
                complete: (res) => {
                  wx.navigateTo({ // 跳转至个人中心页
                    url: '../profile/profile',
                  })
                },
              })
            }
          }
        })
      }
    })
  }
})
profile.wxml
<!--pages/profile/profile.wxml-->
<view class="container">
  <view class="userinfo">
    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.face_url}}" mode="cover"></image>
    <text class="userinfo-nickname">{{userInfo.username}}</text>
  </view>
</view>
auth.wxml
<!--auth.wxml-->
<view class="container">
  <button type="primary" bindtap="getUserProfile">授权微信登录</button>
</view>

2. 服务器后端

<?php
namespace Home\Controller;
use Think\Controller;
class UserController extends BaseController
{
    /**
     * 微信登录
     * @return [type] [description]
     */
    public function wxlogin()
    {
        // 校验参数是否存在
        if (!$_POST['code']) {
            $return_data = array();
            $return_data['error_code'] = 2;
            $return_data['msg'] = '参数不足: code';
            $this->ajaxReturn($return_data);
        } else {
            $appid = "wxc6a376950e1c45c0"; // appid
            $secret = "632hjdcba4c2b972c591738hdga91fvg"; // app密钥
            $code = $_POST['code']; // 小程序传来的code值
            $curl = curl_init();
            $url = "https://api.weixin.qq.com/sns/jscode2session?appid=" . $appid . "&secret=" . $secret . "&js_code=" . $code . "&grant_type=authorization_code";
            curl_setopt($curl, CURLOPT_URL, $url);
            curl_setopt($curl, CURLOPT_HEADER, 0);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
            $result = curl_exec($curl);
            $json = json_decode($result); // 对json数据解码
            $arr = get_object_vars($json);
            $openid = $arr['openid'];
            curl_close($curl);
            // 检验是否已经授权登录
            $User = M('User');
            // 构造查询条件
            $where = array();
            $where['openid'] = $openid;
            $user = $User->where($where)->find();
            if ($user) {
                $return_data = array();
                $return_data['error_code'] = 0;
                $return_data['msg'] = '登录成功';
                $return_data['data']['userid'] = $user['userid'];
                $return_data['data']['username'] = $user['username'];
                $return_data['data']['face_url'] = $user['face_url'];
                $this->ajaxReturn($return_data);
            } else {
                $return_data = array();
                $return_data['error_code'] = 1;
                $return_data['msg'] = '不存在该用户，请授权登录';
                $this->ajaxReturn($return_data);
            }
        }
    }

    /**
     *首次授权登录
     * @return [type] [description]
     */
    public function wxsign()
    {
        // 校验参数是否存在
        if (!$_POST['code']) {
            $return_data = array();
            $return_data['error_code'] = 2;
            $return_data['msg'] = '参数不足: code';
            $this->ajaxReturn($return_data);
        } else if (!$_POST['name']) {
            $return_data = array();
            $return_data['error_code'] = 2;
            $return_data['msg'] = '参数不足: name';
            $this->ajaxReturn($return_data);
        } else if (!$_POST['avatarUrl']) {
            $return_data = array();
            $return_data['error_code'] = 2;
            $return_data['msg'] = '参数不足: avatarUrl';
            $this->ajaxReturn($return_data);
        } else {
            $appid = "wxc6a376950e1c45c0"; // appid
            $secret = "632hjdcba4c2b972c591738hdga91fvg"; // app密钥
            $code = $_POST['code']; // 小程序传来的code值
            $curl = curl_init();
            $url = "https://api.weixin.qq.com/sns/jscode2session?appid=" . $appid . "&secret=" . $secret . "&js_code=" . $code . "&grant_type=authorization_code";
            curl_setopt($curl, CURLOPT_URL, $url);
            curl_setopt($curl, CURLOPT_HEADER, 0);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
            $result = curl_exec($curl);
            $json = json_decode($result); // 对json数据解码
            $arr = get_object_vars($json);
            $openid = $arr['openid'];
            curl_close($curl);
            // 检验是否已经授权过
            $User = M('User');
            // 构造查询条件
            $where = array();
            $where['openid'] = $openid;
            $user = $User->where($where)->find();
            if ($user) {
                $return_data = array();
                $return_data['error_code'] = 1;
                $return_data['msg'] = '登录失败';
                $this->ajaxReturn($return_data);
            } else {
                // 构建插入的数据 
                $data = array();
                $data['openid'] = $openid;
                $data['username'] = $_POST['name'];
                $data['face_url'] = $_POST['avatarUrl'];
                // 插入数据
                $result = $User->add($data);
                // add数据添加成功之后，返回的就是该条数据的id
                if ($result) {
                    // 插入数据执行成功
                    $return_data = array();
                    $return_data['error_code'] = 0;
                    $return_data['msg'] = '登录成功';
                    $return_data['data']['userid'] = $result;
                    $return_data['data']['username'] = $_POST['name'];
                    $return_data['data']['face_url'] = $_POST['avatarUrl'];
                    $this->ajaxReturn($return_data);
                } else {
                    // 插入数据执行失败
                    $return_data = array();
                    $return_data['error_code'] = 1;
                    $return_data['msg'] = '登录失败';
                    $this->ajaxReturn($return_data);
                }
            }
        }
    }
}
阿蓬2023
关注
  • 6
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
TP3.2 微信小程序支付
10-15
TP3.2微信小程序支付 线上可正常运行 希望对大家有所帮助 拉下来放好位置 正常 配置完成 就可正常运行
新大陆微信支付接口结合tp3.2框架的使用
weixin_36521716的博客
09-03 1264
新大陆支付的流程图: 第一步：     调取公众号查询接口       从返回的数据中拿到appid,appidkey       调用户信息接口    数字签名的获取方式 第二步：获取到用户的openid 第三步：调用公众号支付接口，获取数据 第五步：调用微信js api调起支付控件，等于ok之后页面会进行跳转到指定页面 ...
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS
最新发布
lindeliang的博客
02-18 1552
为RAM用户添加权限：AliyunOSSFullAccess、AliyunSTSAssumeRoleAccess，在左侧搜索框输入AliyunOSSFullAccess与AliyunSTSAssumeRoleAccess进行添加，然后点确定进行保存。云账号 AccessKey 是您访问阿里云 API 的密钥，具有账户的完全权限，使用 RAM 用户（而不是云账号）的 AccessKey 进行 API 调用。使用服务端签名时，需要先搭建一个签名服务，然后由客户端调用签名服务生成签名。
原创：微信小程序调用【统一下单】、【支付】、【支付回调】api并处理请求 1、服务器端使用TP3.2处理（随便写在一个Controller里面）...
weixin_30735391的博客
01-22 63
原创：微信小程序调用【统一下单】、【支付】、【支付回调】api并处理请求 https://www.cnblogs.com/xuzhengzong/p/7061141.html 转载于:https://www.cnblogs.com/kaka666/p/10306035.html...
微信小程序内容TP3.2安全校验----PHP代码
舞步天行者的博客
06-15 5734
微信小程序内容安全包括（1）校验一张图片是否含有违法违规内容 （*引用微信小程序开发文档 校验一张图片是否含有违法违规内容。应用场景举例：1）图片智能鉴黄：涉及拍照的工具类应用(如美拍，识图类应用)用户拍照上传检测；电商类商品上架图片检测；媒体类用户文章里的图片检测等；2）敏感人脸识别：用户头像；媒体类用户文章里的图片检测；社交类用户上传的图片检测等。频率限制：单个 appId 调用上限为...
微信小程序授权登录接口tp3.2
weixin_42998455的博客
07-27 3131
后端PHP代码 public function xcxindex() { //获取code $option_data_str = file_get_contents("php://input"); $request = json_decode($option_data_str, true); $code = isset($request['code']) ? $request['code'] : 0; //获取地址携带的参数（如推荐人id等） $totalurl
Thinkphp开发的微信小程序一键生成平台系统正版源码【站长亲测】
08-14
Thinkphp开发的微信小程序一键生成平台系统正版源码 由Thinkphp开发的一键生成小程序平台系统CMS开源系统，前后端源码29套小程序，可进行OEM代理招商，无需域名授权，里面附带多套小程序原生代码。
ThinkPHP 5.1+全开源带后台商城小程序源码程序+带详细安装使用文档
banzhuan678的博客
10-11 1014
介绍： ThinkPHP 5.1框架全开源商城小程序源码，代替了手机端的APP电脑端的独立网站。无需下载，触手可及。 1.源码部署自己服务器，全部数据自己掌握; 2.持续更新升级; 3.支持后台修改小程序端同步生效; 4.带安装搭建教程，同步更新; 5.支持自定义个人中心部分功能; 6.支持小程序内页DIY; 7.支持PC++端宣传网站版权自定义; 8.支持商家管理手机端。 网盘下载地址： http://kekewl.cc/KCX7KwuCTzj0 图片： ...
php（ThinkPHP）实现微信小程序的登录过程
qq_35511686的博客
11-10 2508
源码也在github中给出 https://github.com/wulongtao/think-wxminihelper 下面结合thinkPHP框架来实现以下微信小程序的登录流程，这些流程是结合了官网和github的一个网站综合实现的 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=2017112#wxloginobject https://github.com/cantoo/learning-wxapp/blob/ma
php接入微信JSAPI支付，微信内拉起支付，基于thinkPHP框架 WeChatDeveloper支付类包
武景涛的博客
08-18 831
文章：php接入微信支付，扫码支付和H5支付(非微信浏览器)，基于thinkPHP框架 WeChatDeveloper支付类包 踩坑指南 文章：php快速接入支付宝即时支付，PC网站支付和手机网站支付，基于thinkPHP框架 WeChatDeveloper支付类包 在使用前可以先看上面的微信扫码支付和H5支付的文章，本文主要介绍微信JSAPI支付，在微信内拉起支付； 开发注意事项： 1、在开发前请先确认回调的域名是否加入了JS安全域名，IP白名单，微信公众平台和微信支付平台都要...
php接入微信支付，扫码支付和H5支付(非微信浏览器)，基于thinkPHP框架 WeChatDeveloper支付类包 踩坑指南
武景涛的博客
08-17 1743
文章介绍 本文主要介绍通过thinkPHP5和第三方支付类包（WeChatDeveloper）实现快速接入微信扫码支付和微信H5手机网站支付（非微信浏览器），以及如何进行微信支付订单回调、如何判断手机和PC端、如果进行微信订单退款等，整理了部分在开发中经常遇到的错误和难踩的坑！ WeChatDeveloper介绍 WeChatDeveloper 是基于wechat-php-sdk重构，优化并完善； 运行最底要求 PHP 版本 5.4 , 建议在 PHP7 上运行以获取最佳性能...
基于ThinkPHP3.2.3的微信OAuth2.0微信网页授权
02-11
基于ThinkPHP3.2.3的微信OAuth2.0微信网页授权 基于ThinkPHP3.2.3的微信OAuth2.0微信网页授权
thinkphp3微信支付小程序支付
07-13
thinkphp3微信支付小程序支付，扫码支付。在项目中直接调用即可
thinkPHP3.2.3 支付 微信平台授权登录等工具锦集
05-18
thinkPHP3.2.3 开发 包含支付 微信平台 授权登录等工具锦集，授权聊天，带后台
基于ThinkPHP3.2.3的微信OAuth2.0微信网页授权 的sql
07-28
基于ThinkPHP3.2.3的微信OAuth2.0微信网页授权 的sql
基于thinkphp3.2.3微信授权登录及分享至好友，朋友圈
10-30
基于android 及IOS微信登录代码 获取微信用户信息，并且有完整案例，换上对应的AppID及APPSECRET便可运行
基于thinkphp3.2.3微信扫码登录
12-31
使用thinkphp框架，实现微信扫码登录只需要做简单配置即可使用
thinkphp3.2整合微信支付V3版本
05-25
因为要做一个项目，项目需要集成微信APP支付，框架用thinkphp3.2开发，微信支付V3版本，由于网站大部分资料都是来源于thinkphp与v2版本的整合，好多写的V3版本的下载之后都是V2版本的，太多的坑啊，下载了V3版本之后...
thinkphp3.2.3 微信PC端支付.zip
09-25
使用了thinkphp3.2.3框架+微信扫码支付等技术，phpqrcorde生成微信支付二维码，应用于电脑端的支付
thinkphp开发的微信小程序一键生成平台系统正版源码
02-01
thinkphp开发的微信小程序一键生成平台系统正版源码是一种基于thinkphp框架开发的专门用于生成微信小程序的系统源码。通过该系统，用户可以快速创建自己的微信小程序，无需编写复杂的代码，仅需要进行简单的配置和定制即可生成个性化的微信小程序。 该系统源码具有正版授权，保证了源码的合法性和可靠性。用户购买正版源码后，可以得到全面的技术支持和更新保障，确保系统的稳定运行和功能的持续优化。 使用该系统源码，用户可以实现以下功能： 1. 快速生成微信小程序：系统提供了丰富的模板和组件，用户可以根据自己的需求进行选择和定制，快速生成符合自己品牌风格的微信小程序。 2. 简单易用的配置：用户可以通过后台管理界面进行简单的配置，包括页面布局、颜色搭配、功能模块等，无需写代码即可完成设置。 3. 数据接口对接：系统提供了与微信接口的对接功能，可以实现小程序与后台数据库的数据交互，包括用户信息、商品信息、订单信息等。 4. 模块扩展和定制：系统允许用户根据自己的需求进行模块扩展和定制，可以添加特定的功能模块或者自定义页面。 5. 数据统计和分析：系统提供了数据统计和分析功能，可以统计用户访问量、用户行为等数据，为用户提供数据支持。 该系统源码的使用可以极大地简化微信小程序的开发流程，节省开发时间和成本，同时提供了丰富的功能和扩展性，使用户可以根据自己的需求定制自己的微信小程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值