一、微信登录
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微信登录调用接口