一、微信登录
1、完整代码
<template>
<view class="data-xuehu">
<view class="page data-xuehu" :style="'top:'+navBarHeight+'px'">
<view class="bg_img data-xuehu">
<!-- 头像 -->
<view class="infoWrap data-xuehu">
<view class="avatar data-xuehu">
<image src="/static/originAvatar.png" class="data-xuehu"></image>
</view>
</view>
</view>
<view class="uni-padding-wrap uni-common-mt">
<button type="primary" @tap="oauth('weixin')">微信用户快速登录</button>
<button type="default">输入手机号码登录</button>
</view>
</view>
</view>
</template>
<script>
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);
}
});
}
});
}
}
}
</script>
<style>
@import url("login.css");
uni-button {
margin-bottom: 13px;
}
</style>
2、重点讲解：
image.png
image.png
3、使用HBuilder真机调试中的调试工具查看登录的信息
image.png
二、把获取到的信息保存到数据库
1、向后台方法发送请求
（1）代码
<script>
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));
}
});
}
}
}
</script>
2、后台微信登录方法
（1）创建空的控制器
php think make:controller api@User --plain
<?php
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
<?php
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）添加访问路由，前台才可以正常请求
<?php
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微信登录调用接口
网友评论