uni app和php开发微信登录代码,2020-07-28 uniapp微信登录实现

一、微信登录

1、完整代码

微信用户快速登录

输入手机号码登录

export default {

data() {

return {

navBarHeight: 0

}

},

methods: {

oauth(value) {

uni.login({

provider: value,

success: function(loginRes) {

// console.log(loginRes.authResult);

// 获取用户信息

uni.getUserInfo({

provider: value,

success: function(infoRes) {

// console.log('用户昵称为：' + infoRes.userInfo.nickName);

console.log(infoRes);

}

});

}

});

}

}

}

@import url("login.css");

uni-button {

margin-bottom: 13px;

}

2、重点讲解：

image.png

image.png

3、使用HBuilder真机调试中的调试工具查看登录的信息

image.png

二、把获取到的信息保存到数据库

1、向后台方法发送请求

(1)代码

export default {

data() {

return {

navBarHeight: 0

}

},

methods: {

oauth(value) {

uni.login({

provider: value,

success: function(loginRes) {

// console.log(loginRes.authResult);

// 获取用户信息

uni.getUserInfo({

provider: value,

success: function(infoRes) {

// console.log('用户昵称为：' + infoRes.userInfo.nickName);

console.log(infoRes);

let url = 'login/wxlogin';

this.$xuehu.request({

url: url,

data: {

'nickname':infoRes.userInfo.nickName,

'avatarurl':infoRes.userInfo.avatarUrl,

'openid':infoRes.userInfo.openId,

},

method: 'POST'

}).then(res => {

console.log('返回信息：');

console.log(res.data);

//将返回信息存入缓存

})

},

fail() {

uni.showToast({

icon:'none',

title:'登录失败'

})

}

});

},

fail(err) {

console.error('授权登录失败:'+JSON.stringify(err));

}

});

}

}

}

2、后台微信登录方法

(1)创建空的控制器

php think make:controller api@User --plain

namespace app\api\controller;

use app\api\model\User as UserModel;

class User

{

//微信用户登录

public function wxLogin() {

return UserModel::_wxLogin();

}

}

(2)创建验证器 api\Validate\User.php

namespace app\api\validate;

use think\Validate;

class User extends Validate

{

/**

* 定义验证规则

* 格式：'字段名' => ['规则1','规则2'...]

*

* @var array

*/

protected $rule = [

'nickname' => 'require',

'avatarurl' => 'require',

'openid' => 'require'

];

/**

* 定义错误信息

* 格式：'字段名.规则名' => '错误信息'

*

* @var array

*/

protected $message = [

'nickname.require' => '昵称不能为空',

'avatarurl.require' => '头像不能为空',

'openid.require' => 'openid不能为空',

];

}

(3)创建模型，模型还需要引入验证类型

知识点：

1.模型中有调用common.php公共文件的消息返回方法shouMsg；

2.对请求的数据nickname、openid、avatarurl进行了验证判断，引用validateField，注意要引入验证类

3.创建了设置token方法 setToken并在 _wxLogin方法中进行了引用；

4.setToken方法通过获取id和nickname并根据设定的规则生成token，把(id、存活时间、生成的唯一token)写入到redis中进行缓存；

5.模型对openid是否存在(微信登录会自动获取见3，)是否存在进行判断，存在登录成功写入radis，不存在储存基本信息存入信息至radis;

php think make:mode api@User

declare (strict_types = 1);

namespace app\api\model;

use think\Model;

use app\api\validate\User as UserValidate;

use Redis;

/**

* @mixin think\Model

*/

class User extends Model

{

//微信用户登录实现

public static function _wxLogin(){

//验证用户提交的数据

$data = request()->post();

$result = self::validateField($data);

if($result === true){

// 判断 user_bind openid 是否存在

// 存在，生成token，返回数据

$user_bind = UserBind::where('openid', $data['openid'])->find();

if($user_bind){

// 设置token,写入redis

$token = self::setToken($user_bind['id'], $data['nickname']);

return showMsg(1,'登录成功', ['user_id'=>$user_bind['user_id'], 'token'=>$token]);

}else{

// 不存在，新增一条记录，生成token，返回数据

$userBind = UserBind::create([

'openid' => $data['openid'],

'nickname' => $data['nickname'],

'avatarurl' => $data['avatarurl']

]);

if($userBind){

// 设置token,写入redis

$token = self::setToken($userBind->id, $data['nickname']);

return showMsg(1,'登录成功', ['user_id'=>0, 'token'=>$token]);

}else{

return showMsg(0,'登录失败', null);

}

}

}else{

return $result;

}

}

// 设置token

private static function setToken($id=0, $nickname=''){

$token = md5($nickname.time().rand(1000,9999));

$redis = new Redis();

$redis->connect(config('cache.stores.redis.host'), config('cache.stores.redis.port'));

$redis->auth(config('cache.stores.redis.password'));

$redis->setex('weixin:'.$id, 86400, $token); //有效期一天

return $token;

}

//数据验证功能

public static function validateField($data){

// 验证数据

try {

validate(UserValidate::class)->check($data);

} catch (ValidateException $e) {

return error($e->getError());

}

return true;

}

}

(4)添加访问路由，前台才可以正常请求

use think\facade\Route;

Route::group(function () {

// 获取Banner广告信息

Route::get('/banner', 'Index/banner');

// 微信用户登录

Route::Post('user/wxlogin','User/wxlogin');

})->allowCrossDomain();

(5)extend文件夹放入Redis.php文件

(6)在config/cache.php文件夹中配置redis基本信息

// 更多的缓存连接

'redis' => [

// 驱动方式

'type' => 'File',

'host' => '127.0.0.1',

'port' => '6379',

'password' => '123456',

// 缓存前缀

'prefix' => '',

// 缓存有效期 0表示永久缓存

'expire' => 0,

],

image.png

(7)model\User.php模型中引入redis

use Redis;

(8)使用ApiPost调试api接口

使用ApiPost调试api接口.png

(9)redis中有数据了

redis中有缓存数据.png

踩坑记：

1、使用phpstudy pro版本，发现radis不生效，要在对应php版本配置中打开redis扩展，phpstudy_pro的默认php版本是7.3.4，具体看下报错信息中会显示php版本。

2、Postman和ApiPost测试api接口没有注意POST和GET的区别，导致请求提示路由不存在，一直在找到Thinkphp6的路由配置问题。

三、uniapp微信登录调用接口