php实现微信小程序授权登录功能(实现流程)


Posted in PHP onNovember 13, 2019

先上图

php实现微信小程序授权登录功能(实现流程)php实现微信小程序授权登录功能(实现流程)php实现微信小程序授权登录功能(实现流程)php实现微信小程序授权登录功能(实现流程)

实现流程:

1、授权登陆按钮和正文信息放到了同一个页面,未授权的时候显示登陆按钮,已授权的时候隐藏登陆按钮,显示正文信息,当然也可以授权和正文分开成两个页面,在授权页面的onload里判断是否已授权,若已授权就直接跳转正文的页面。这里只说授权按钮和正文在同一页面的情况。

2、在onload里先判断是否已授权,如果已授权,就隐藏授权登陆按钮,显示正文信息,如果没有授权,显示授权登陆按钮。

3、前端使用button的open-type="getUserInfo"来操作,点击授权按钮之后,“e”中会携带userInfo,用户的基本信息(和使用wx.getUserInfo接口获取的数据一样,所以我是在"e"里面直接取的,没有调用wx.getUserInfo接口)

4、使用wx.login接口获取登陆凭证code,使用code去后解密换取openid,传输code的时候带上第3步获取的用户信息一块发送给后台解密(也可以不携带,携带的目的是为了验证签名,这样安全一些,不验证也可以)

5、后台解密使用的是“auth.code2Session”接口,解密用到的SDK下载地址

“https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html”。

5、后台解密之后(后台语言用的是php),会返回openid等敏感信息,就还可以把这些信息存起来了。

6、获取授权成功之后,再隐藏授权登陆按钮,显示正文信息。

7、如果用户点击拒绝授权,提示引导用户再次授权。

注意,要考虑到授权失败的情况

以下是详细代码

wxml

<view wx:if="{{isHide}}">
  <view wx:if="{{canIUse}}" >
    <view class='header'>
      <image src='/images/icon/wx_login.png'></image>
    </view>
 
    <view class='content'>
      <view>申请获取以下权限</view>
      <text>获得你的公开信息(昵称,头像等)</text>
    </view>
 
    <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
      授权登录
    </button>
  </view>
  <view wx:else>请升级微信版本</view>
</view>
 
<view wx:else>
  <view>我的首页内容</view>
</view>

wxss

.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}
.header image {
  width: 200rpx;
  height: 200rpx;
}
.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}
.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}
.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}

js

// pages/test1/test1.js
var app = getApp();
Page({
 /**
  * 页面的初始数据
  */
 data: {
  //判断小程序的API,回调,参数,组件等是否在当前版本可用。
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  isHide: false
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  var that = this;
  // 查看是否授权
  wx.getSetting({
   success: function (res) {
    if (!res.authSetting['scope.userInfo']) {
     // 还未授权,显示授权按钮
     that.setData({
      isHide: true
     });
    } else {
     // 已授权,隐藏授权按钮,显示正文
     that.setData({
      isHide: false
     });
    }
   }
  })
 },
 //授权登陆按钮
 bindGetUserInfo: function (e) {
  var that = this;
  console.log(e)
  if (e.detail.userInfo) {
   //用户授权登陆,并跳转首页
   // that.getOpenid()
   wx.login({
    success: function (res) {
     // 请求自己后台获取用户openid
     wx.request({
      url: app.domain + 'teacherapi/Wx_Decode/WxDecode',
      method: 'POST',
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      data: {
       encryptedData: e.detail.encryptedData,
       signature: e.detail.signature,
       rawData: e.detail.rawData,
       iv: e.detail.iv,
       code: res.code
      },
      success: function (res_user) {
       if (res_user.data.status == 0) {
        var data = JSON.parse(res_user.data.msg)//json转对象
        //授权成功返回的数据,根据自己需求操作
        console.log(data)
        //授权成功后,隐藏授权按钮,显示正文
        that.setData({
         isHide: false
        });
       }
      }, fail: function () {
       that.showModal('获取授权信息失败')
      }
     })
    }
   })
  } else {
   //用户按了拒绝授权按钮,提示引导授权
   that.showModal('请授权后使用小程序')
  }
 },
 //未授权弹窗
 showModal: function (e) {
  wx.showModal({
   title: '提示',
   content: e,
   showCancel: false,
   confirmText: '返回授权',
   success: function (res) {
    if (res.confirm) {
     console.log('用户点击了“返回授权”')
    }
   }
  })
 },
})

php

<?php
namespace app\teacherapi\controller;
use think\Controller;
/**
* @date: 2018-12
* 微信操作类
*/
class WxDecode extends Controller
{
  public function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_URL, $url);
    $res = curl_exec($curl);
    curl_close($curl);
    return $res;
  }
  /**
   * @author: zxf
   * @date: 2018-12-08
   * @description: 解密微信用户敏感数据
   * @return array
   */
  public function WxDecode()
  {
    // 接收参数
    $data = request() -> param();
    // 引入解密文件 在微信小程序开发文档下载
    vendor('wx.WXBizDataCrypt');
    vendor('wx.ErrorCode');
    $appid = config('TESTPPID');
    $appsecret = config('TESTSECREET');
    $grant_type = "authorization_code"; //授权(必填)
    $code = $data['code'];    //有效期5分钟 登录会话
    $encryptedData=$data['encryptedData'];
    $iv = $data['iv'];
    $signature = $data['signature'];
    $rawData = $data['rawData'];
    // 拼接url
    $url = "https://api.weixin.qq.com/sns/jscode2session?"."appid=".$appid."&secret=".$appsecret."&js_code=".$code."&grant_type=".$grant_type;
    $res = json_decode($this->httpGet($url),true);
    $sessionKey = $res['session_key']; //取出json里对应的值
    $signature2 = sha1(htmlspecialchars_decode($rawData).$sessionKey);
    // 验证签名
    if ($signature2 !== $signature){
      return json("验签失败");
    } 
    // 获取解密后的数据
    $pc = new \WXBizDataCrypt($appid, $sessionKey);
    $errCode = $pc->decryptData($encryptedData, $iv, $data );
    if ($errCode == 0) {
      return return_succ($data);
    } else {
      return return_error($errCode);
    }
  }
}
PHP 相关文章推荐
如何过滤高亮显示非法字符
Oct 09 PHP
PHP配置文件中最常用四个ini函数
Mar 19 PHP
PHP读取目录下所有文件的代码
Jan 07 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
May 26 PHP
php的ajax框架xajax入门与试用介绍
Dec 19 PHP
php面向对象 字段的声明与使用
Jun 14 PHP
教你如何使用php session
Oct 28 PHP
利用浏览器的Javascript控制台调试PHP程序
Jan 08 PHP
Docker 如何布置PHP开发环境
Jun 21 PHP
PHP实现权限管理功能示例
Sep 22 PHP
php+croppic.js实现剪切上传图片功能
Aug 14 PHP
Laravel 实现添加多语言提示信息
Oct 25 PHP
php 命名空间(namespace)原理与用法实例小结
Nov 13 #PHP
在 PHP 和 Laravel 中使用 Traits的方法
Nov 13 #PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
Nov 13 #PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
Nov 13 #PHP
php array 转json及java 转换 json数据格式操作示例
Nov 13 #PHP
Yii框架学习笔记之应用组件操作示例
Nov 13 #PHP
Yii框架自定义数据库操作组件示例
Nov 11 #PHP
You might like
PHP 日期加减的类,很不错
2009/10/10 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python图书管理系统
2020/04/05 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
学期个人工作总结
2015/02/13 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
高中同学会致辞
2015/08/01 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB