Wechat applet +php realizes authorized login

1. Write wxml page

<!-- Foreground page , Decide whether to display login or information through judgment -->
<view wx:if="{
   {isHide}}">
    <view wx:if="{
   {canIUse}}" >
        <view class='header'>
            <image src='/image/hhh.jpg'></image>
        </view>
 
        <view class='content'>
            <view> Request permission to </view>
            <text> Get your public information ( nickname , Head etc. )</text>
        </view>
 
        <button class='bottom' type='primary' open-type="getUserInfo" bindtap="login">
             Authorized login 
        </button>
    </view>
    <view wx:else> Please upgrade wechat version </view>
</view>
 
<view wx:else>
    <view> My homepage content </view>
</view>

2. Write wxss page

.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. Write js page

// index.js
//  Get application instance 
const app = getApp()

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    //  This is what the front desk judges 
    isHide: true
  },

  // Click event 
  login(){
    var _this=this;
    wx.getUserProfile({
      desc: 'desc',
      success: (res)=>{
        // Click allow to get wechat nickname and wechat avatar 
        var nickName=res.userInfo.nickName;
        var log=res.userInfo.avatarUrl;
        wx.login({
          success:function(e){
            // Get your... After the request is successful code value 
            var code=e.code;
            wx.request({
              // Request backstage 
              url: 'http://www.day12.com/home/Login/loginInfo',
              // Pass on code、nickName、log
              data: {code:code,nickName:nickName,log:log},
              header:{
                'content-type':'application/x-www-form-urlencoded'
              },
              success: function(arr){
                // Judge whether the background request is successful 
                if(arr.data.code==200){
                  // Will return ID Values are stored in the cache 
                 wx.setStorageSync('token', arr.data.data.token)
                  // Bullet box prompt 
                  wx.showToast({
                    title: arr.data.msg,
                    icon: 'success'
                  })
                  // modify isHide value , To facilitate the judgment and display of the front desk 
                  _this.setData({
                    isHide:false
                  })
                }
              }
            })
          }
        })
      },
      fail:(res)=>{
        // Click reject to pop up a prompt 
        wx.showToast({
          title: ' Authorization login failed ',
          icon: 'error'
        })
      }
    })
  }
})

4. Write PHP Background code

public function loginInfo(){
        // Receive the value from the foreground 
        $code=input('code');
        $nickName=input('nickName');
        $log=input('log');
        // Determine whether it is null 
        if (empty($code)||empty($nickName)||empty($log)){
            return json(['code'=>1,'data'=>'','mag'=>' parameter is incorrect ']);
        }

        // stay config The encapsulation of , The packaging style is as follows ( This code will appear after scanning with your own wechat )  website :https://mp.weixin.qq.com/
//        return [
//            'appID'=>'',
//            'AppSecret'=>''
//        ];
        $appID=config('appID');
        $appSecret=config('AppSecret');

        // Request address 
        $url="https://api.weixin.qq.com/sns/jscode2session?appid=".$appID."&secret=".$appSecret."&js_code=".$code."&grant_type=authorization_code";
//        getUrl Is in common The encapsulation of , The packaging style is as follows 
//        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);

        // Define a new array after the call succeeds , Most important session_key and openid Two values 
        $arr=[
          'nickName'=>$nickName,
          'log'=>$log,
          'session_key'=>$res['session_key'],
          'openid'=>$res['openid'],
        ];

        // according to openid Query a piece of data 
        $item=User::where('openid',$res['openid'])->find();
        // If there is, modify session_key This field , If not, add a new piece of data 
        if ($item){
            $data=User::where('openid',$res['openid'])->update(['session_key'=>$res['session_key']]);
            $token=JWTS::createJwt($item->id);
            // Return primary key ID TOKEN
            return json(['code' => 200, 'data'=>[
                'uid' => $item->id,
                'token'=>$token,
            ], 'msg' => ' Login successful ',]);
        }else{
            // add to 
            $data =User::addUser($arr);
            $token=JWTS::createJwt($data->id);
            // Return primary key ID TOKEN
            return json(['code' => 200, 'data'=>[
                'uid' => $data->id,
                'token'=>$token,
            ], 'msg' => ' Login successful ',]);
        }
    }

Wechat applet +PHP Realize authorized login - Dragon-v - Blog Garden (cnblogs.com)