微信小程序+PHP 實現授權登錄

1.寫wxml頁面

<!--前台頁面，通過判斷決定展示登錄還是信息-->
<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='/image/hhh.jpg'></image>
        </view>
 
        <view class='content'>
            <view>申請獲取以下權限</view>
            <text>獲得你的公開信息(昵稱，頭像等)</text>
        </view>
 
        <button class='bottom' type='primary' open-type="getUserInfo" bindtap="login">
            授權登錄
        </button>
    </view>
    <view wx:else>請升級微信版本</view>
</view>
 
<view wx:else>
    <view>我的首頁內容</view>
</view>

2.寫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;
}

3.寫js頁面

// index.js
// 獲取應用實例
const app = getApp()

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    // 前台判斷用的就是這個
    isHide: true
  },

  //點擊事件
  login(){
    var _this=this;
    wx.getUserProfile({
      desc: 'desc',
      success: (res)=>{
        //點擊允許后獲取微信昵稱與微信頭像
        var nickName=res.userInfo.nickName;
        var log=res.userInfo.avatarUrl;
        wx.login({
          success:function(e){
            //請求成功后獲取你的code值
            var code=e.code;
            wx.request({
              //請求后台
              url: 'http://www.day12.com/home/Login/loginInfo',
              //傳code、nickName、log
              data: {code:code,nickName:nickName,log:log},
              header:{
                'content-type':'application/x-www-form-urlencoded'
              },
              success: function(arr){
                //判斷后台請求成功后
                if(arr.data.code==200){
                  //將返回的ID值存入緩存中
                  wx.setStorageSync('id', arr.data.id)
                  //彈框提示
                  wx.showToast({
                    title: arr.data.msg,
                    icon: 'success'
                  })
                  //修改isHide值，以便於前台的判斷展示
                  _this.setData({
                    isHide:false
                  })
                }
              }
            })
          }
        })
      },
      fail:(res)=>{
        //點擊拒絕后彈框提示
        wx.showToast({
          title: '授權登錄失敗',
          icon: 'error'
        })
      }
    })
  }
})

4.寫PHP后台代碼

public function loginInfo(){
//        接收前台傳來的值
        $code=input('code');
        $nickName=input('nickName');
        $log=input('log');
//        判斷是否為空
        if (empty($code)||empty($nickName)||empty($log)){
            return json(['code'=>1,'data'=>'','mag'=>'參數不正確']);
        }

//        在config中封裝的，封裝樣式如下(這個碼用你自己的微信掃描后會出現) 網址:https://mp.weixin.qq.com/
//        return [
//            'appID'=>'',
//            'AppSecret'=>''
//        ];
        $appID=config('appID');
        $appSecret=config('AppSecret');

//        請求地址
        $url="https://api.weixin.qq.com/sns/jscode2session?appid=".$appID."&secret=".$appSecret."&js_code=".$code."&grant_type=authorization_code";
//        getUrl是在common中封裝的，封裝樣式如下
//        function getUrl($url){
//            $ch = curl_init();
//            curl_setopt($ch, CURLOPT_URL, $url);
//            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
//            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
//            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//            $output = curl_exec($ch);
//            curl_close($ch);
//            $output = json_decode($output,true);
//            return $output;
//        }
        $res=getUrl($url);

//        調用成功后定義一個新的數組，最主要的session_key和openid兩個值
        $arr=[
          'nickName'=>$nickName,
          'log'=>$log,
          'session_key'=>$res['session_key'],
          'openid'=>$res['openid'],
          'code'=>$code
        ];

//        new一個模型
        $model=new User();
//        根據openid查詢一條數據
        $item=$model->where('openid',$res['openid'])->find();
//        如果有就修改session_key這個字段，如果沒有就新添加一條數據
        if ($item){
            $data=$model->where('openid',$res['openid'])->update(['session_key'=>$res['session_key']]);
        }else{
            $data=$model->insert($arr);
        }
//        返回主鍵ID
        return json(['code'=>200,'id'=>$item['id'],'msg'=>'登錄成功']);
    }