微信小程序和php的登录实现

微信小程序和php的登录实现

首先用户登录所需的是用户的唯一标识openid，获取openid后再获取用户信息即刻存储到数据库中。
注意：若errcode为40029要新建一个小程序项目填写你的appid
若ajax请求失败，右上角详情-本地设置-勾选->不效验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书

一、前端请求

onLoad: function (options) {
    wx.login({
       success:function(res){
         //发送请求
         wx.request({
           url: 'http://localhost/test/wxlogin.php', //接口地址
           data: {code:res.code},
           header: {
             'content-type': 'application/json' //默认值
           },
           success: function (res) {
             console.log(res.data)
           }
         })
       }
     })
  },

二、php代码

首先登录微信小程序网站-开发管理-开发设置，找到你的appid和appsecret

<?php
		$code = $_GET['code'];
		$appid = '你的appid';
		$AppSecret = '你的appsecret';
		$url = "https://api.weixin.qq.com/sns/jscode2session?appid=".$appid."&secret=".$AppSecret."&js_code=".$code."&grant_type=authorization_code";
		$str = file_get_contents($url);
		$json = json_decode($str);
		$arr = get_object_vars($json);
		echo $openid = $arr['openid']; //这是openid
		echo '</br>';
		echo $session_key = $arr['session_key']; //这是session_key
?>

三、获取用户信息

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
	<open-data type="userAvatarUrl"></open-data>
	<open-data type="userNickName"></open-data>
	<!-- 需要使用 button 来授权登录 -->
	<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
	<view wx:else>请升级微信版本</view>

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
    console.log(e.detail.userInfo)
  }
})

在控制台输出的信息就是获取用户的信息

四、存入数据库

这里代码就先不写了，之前获取的openid相当于用户表的主键，其他信息都在console.log(res.userInfo)里