1.小程序app.js onLaunch（）方法中插入（路由进行模板字符串）
// app.js
import {config} from "./pages/config/config.js"
App({
onLaunch() {
let token = wx.getStorageSync('token')
if (!token) {
wx.login({
success:ret=>{
let code = ret.code
wx.request({
url: `${config.baseUrl}api/automatic/gain/token`,
method:"POST",
data:{code},
success:res=>{
// console.log(res);
wx.setStorageSync('token', res.data.data)
}
})
}
})
}
}
})2：laravel8 获取接口（经token 生成 openid 和session_key添加入库）
jwt 的获取
//自动获取token（静默登录）
Route::post('automatic/gain/token', [\App\Http\Controllers\Home\LoginController::class, 'automaticGainToken']);/**
* 微信小程序静默登录
*users:闫兵
*Data:2022/4/3
*Time:20:42
* @param Request $request
* @return array
*/
public function automaticGainToken(Request $request)
{
$code = $request->post('code');
$appid = config('wechat_login.appid');
$secret = config('wechat_login.secret');
$url = sprintf(config('wechat_login.access_token_url'), $appid, $secret, $code);
$res = json_decode(file_get_contents($url), true); //返回openid，session_key
$getUserInfo = HomeUser::where('openid', $res['openid'])->first();
if ($getUserInfo) {
$userId = $getUserInfo->id;
} else {
//获取openid
$create['openid'] = $res['openid'];
//session
$create['session_key'] = $res['session_key'];
// 添加openid 和session
$result = HomeUser::create($create);
// 获取结果里的id
$userId = $result->id;
}
// 用户id生成token
$token = JwtService::createToken($userId);
return ['code' => 200, 'msg' => 'ok', 'data' => $token];
}3：我们将用户id从token中解密出来，利用用户id添加用户信息（前提是路由的使用注册号的中间件才能获取用户id）
主要看下方的授权登录
//后台登录
Route::group(['namespace' => 'Home','middleware'=>'checkApiLogin'], function () {
//账号密码登录
Route::post('home/login', [\App\Http\Controllers\Home\LoginController::class, 'login']);
//授权登录
Route::post('wechat/login', [\App\Http\Controllers\Home\LoginController::class, 'wechatLogin']);
//账号注册（用户账号密码登录）
Route::post('home/register', [\App\Http\Controllers\Home\LoginController::class, 'register'])->name('register');
});4：微信授权登录（将用户信息根据openID修改至数据库）
wx.html 代码：
<text>
账号登录：
</text>
<l-button type="success" size="large" shape="circle" bindtap="account">账号密码登录</l-button>
<text>
微信授权：
</text>
<l-button type="warning" size="large" shape="circle" bind:tap="login" >微信一键登录</l-button>
<image src="/pages/image/img.webp" style="height: 800rpx ; margin: 35px 0px 10px 0px;" ></image>
wx.js
/**
* 微信授权
*/
login(evt) {
//获取token 后台获取用户id
var token=wx.getStorageSync('token');
var that = this;
// wx.getUserProfile获取用户信息
wx.getUserProfile({
// desc 声明获取用户个人信息后的用途，不超过30个字符
desc: 'desc',
success: res => {
if (res.userInfo) {
/* wx.login 调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）*/
wx.login({
success: ret => {
// 获取code
var code = ret.code;
// 获取用户昵称
var nickName = res.userInfo.nickName;
// 获取用户照片
var avatarUrl = res.userInfo.avatarUrl;
//性别
var gender = res.userInfo.gender
// 发送至php后端
wx.request({
url: `${config.baseUrl}api/wechat/login`, //仅为示例，并非真实的接口地址
data: {
code: code,
nickName: nickName,
avatarUrl: avatarUrl,
gender: gender
},
method: "POST",
header: {token},
// 数据返回json格式
success(res) {
if (res.data.code == 200 || res.data.code == 201) {
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
// wx.switchTab({
// // 跳转至首页
// url: '/pages/good/good',
// })
// 存储token
wx.setStorageSync('token', res.data.data)
} else {
wx.showToast({
title: '登录失败',
icon: 'error',
duration: 2000
})
}
}
})
}
})
} else {
console.log('用户拒绝啦');
}
}
})
}laravel 控制器：
/**
* 微信授权登录
*users:闫兵
*Data:2022/4/3
*Time:20:37
* @param Request $request
* @return array
*/
public function wechatLogin(Request $request)
{
// 获取用户id（就是token解密的id）；
$userId = $request->get('user_id');
// 接受小程序的参数
$params = $request->post();
// 获取appid
$appid = config('wechat_login.appid');
// 从微信公众平台获得secret
$secret = config('wechat_login.secret');
// 发送请求换取openid和sessionkey
$url = sprintf(config('wechat_login.access_token_url'), $appid, $secret, $params['code']);
// 暂使用file_get_contents()发送请求，你可以使用CURL扩展的形式实现,获取opid和session_key
$res = json_decode(file_get_contents($url), true);
$data = [
'nickname' => $params['nickName'],
'openid' => $res['openid'],
'session_key' => $res['session_key'],
'head' => $params['avatarUrl'],
'gender' => $params['gender']
];
//根据openid 将参数进行修改
$res = HomeUser::where('openid', $res['openid'])->update($data);
if ($res) {
return ['code' => 201, 'meg' => '修改成功', 'data' => ''];
} else {
return ['code' => 200, 'meg' => '修改失败', 'data' => ''];
}
}5：用户注册代码（根据当前用户id进行注册添加数据）
wxml:
<form bindsubmit="submit">
<view class="container">
<view class="login-icon">
<image class="login-img" src="/pages/image/2.webp"></image>
</view>
<view class="login-from">
<!--账号-->
<view class="inputView">
<image class="nameImage" src="/pages/image/suername.png"></image>
<label class="loginLab">账号</label>
<input class="inputText" placeholder="请输入账号" name="username" bindinput="usernameInput" />
</view>
<view class="line"></view>
<!--密码-->
<view class="inputView">
<image class="keyImage" src="/pages/image/password.png"></image>
<label class="loginLab">密码</label>
<input class="inputText" password="true" placeholder="请输入密码" name="password" bindinput="passwordInput" />
</view>
<!--按钮-->
<view class="loginBtnView">
<button class="loginBtn" type="primary" form-type="submit">注册</button>
</view>
</view>
</view>
</form>
wx.ss
page{
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
/* background-color: rgb(156, 23, 78) */
}
/*登录图片*/
.login-icon{
flex: none;
}
.login-img{
width: 750rpx;
}
/*表单内容*/
.login-from {
margin-top: 20px;
flex: auto;
height:100%;
}
.inputView {
/* background-color: #fff; */
line-height: 45px;
border-radius:20px;
border:1px solid #999999;
}
/*输入框*/
.nameImage, .keyImage {
margin-left: 22px;
width: 18px;
height: 16px
}
.loginLab {
margin: 15px 15px 15px 10px;
color: #545454;
font-size: 14px
}
.inputText {
flex: block;
float: right;
text-align: right;
margin-right: 22px;
margin-top: 11px;
color: #cccccc;
font-size: 14px
}
.line {
margin-top: 8px;
}
/* .line {
width: 100%;
height: 1px;
background-color: #cccccc;
margin-top: 1px;
} */
/*按钮*/
.loginBtnView {
width: 100%;
height: auto;
/* background-color:#DCDCDC; */
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.loginBtn {
width: 90%;
margin-top: 40px;
border-radius:10px;
}
wx.js
submit(e) {
//获取token 后台获取用户id
let token = wx.getStorageSync('token');
// 用户名
let username = e.detail.value.username;
//密码
let password = e.detail.value.password;
if (username == '') {
wx.showToast({
title: '请填写用户名',
icon: 'success',
duration: 2000
})
return false
} else if (password == '') {
wx.showToast({
title: '请填写密码',
icon: 'success',
duration: 2000
})
return false
} else {
wx.request({
url: `${config.baseUrl}api/home/register`, //仅为示例，并非真实的接口地址
data: {
username,
password
},
header: { token },
method: "POST",
success: res => {
if (res.data.code == 200) {
wx.showToast({
title: '注册成功',
icon: 'success',
duration: 2000,
success:function(){
console.log('跳转至首页');
}
})
}
}
})
}
},laravel 控制器：
/**
* 用户注册
*users:闫兵
*Data:2022/4/7
*Time:20:11
* @param Request $request
*/
public function register(Request $request)
{
// 接受参数
$params = $request->post();
$params['password'] = md5($params['password']);
// 用户id
$userId = $request->get('user_id');
// 验证
$validator = Validator::make($request->all(), [
'username' => 'required',
'password' => 'required',
]);
if ($validator->fails()) {
return ['code' => 500, 'msg' => $validator->errors()->first()];
}
// 进行添加数据，提示用户注册成功。跳转至用户登录页面
$data = [
'account' => $params['username'],
'password' => $params['password']
];
//进行查询
$result = HomeUser::find($userId);
// 没有就进行添加
if (!$result){
HomeUser::where('id',$userId)->insertGetId($data);
return ['code' => 200, 'meg' => '注册成功', 'data' => ''];
}else{
// 有就进行修改
HomeUser::where('id',$userId)->update($data);
return ['code' => 200, 'meg' => '注册成功', 'data' => ''];
}
}6:用户账号密码登录代码：
wxml:
<form bindsubmit="submit">
<view class="container">
<view class="login-icon">
<image class="login-img" src="/pages/image/1.webp"></image>
</view>
<view class="login-from">
<!--账号-->
<view class="inputView">
<image class="nameImage" src="/pages/image/suername.png"></image>
<label class="loginLab">账号</label>
<input class="inputText" placeholder="请输入账号" name="username" bindinput="usernameInput" />
</view>
<view class="line"></view>
<!--密码-->
<view class="inputView">
<image class="keyImage" src="/pages/image/password.png"></image>
<label class="loginLab">密码</label>
<input class="inputText" password="true" placeholder="请输入密码" name="password" bindinput="passwordInput" />
</view>
<!--按钮-->
<view class="loginBtnView">
<button class="loginBtn" type="primary" form-type="submit">登录</button>
<button class="loginBtn" type="primary" form-type="submit">密码找回</button>
</view>
</view>
</view>
</form>wx.ss
page{
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
/* background-color: rgb(156, 23, 78) */
}
/*登录图片*/
.login-icon{
flex: none;
}
.login-img{
width: 750rpx;
}
/*表单内容*/
.login-from {
margin-top: 20px;
flex: auto;
height:100%;
}
.inputView {
/* background-color: #fff; */
line-height: 45px;
border-radius:20px;
border:1px solid #999999;
}
/*输入框*/
.nameImage, .keyImage {
margin-left: 22px;
width: 18px;
height: 16px
}
.loginLab {
margin: 15px 15px 15px 10px;
color: #545454;
font-size: 14px
}
.inputText {
flex: block;
float: right;
text-align: right;
margin-right: 22px;
margin-top: 11px;
color: #cccccc;
font-size: 14px
}
.line {
margin-top: 8px;
}
/* .line {
width: 100%;
height: 1px;
background-color: #cccccc;
margin-top: 1px;
} */
/*按钮*/
.loginBtnView {
width: 100%;
height: auto;
/* background-color:#DCDCDC; */
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.loginBtn {
width: 90%;
margin-top: 40px;
border-radius:10px;
}
wx,js
submit(e) {
//获取token 后台获取用户id
let token = wx.getStorageSync('token');
// 用户名
let username = e.detail.value.username;
//密码
let password = e.detail.value.password;
if (username == '') {
wx.showToast({
title: '请填写用户名',
icon: 'success',
duration: 2000
})
return false
} else if (password == '') {
wx.showToast({
title: '请填写密码',
icon: 'success',
duration: 2000
})
return false
} else {
wx.request({
url: `${config.baseUrl}api/home/login`, //仅为示例，并非真实的接口地址
data: {
username,
password
},
header: { token },
method: "POST",
success: res => {
if (res.data.code == 500) {
wx.showModal({
title: '尊敬的用户',
content: '请先进行注册',
success: function (res) {
if (res.confirm) {
wx.navigateTo({
url: '/pages/register/register',
})
return
}
}
})
}else if(res.data.code==501){
wx.showToast({
title: res.data.meg,
icon: 'error',
duration: 2000
})
}else if(res.data.code==200){
wx.showToast({
title: res.data.meg,
icon: 'success',
duration: 2000,
success:function () {
console.log('跳转至首页');
}
})
}else{
wx.showToast({
title:'出错喽！！',
icon: 'error',
duration: 2000,
})
}
}
})
}
}laravel8 控制器：
/**
* 账号登录
*users:闫兵
*Data:2022/4/3
*Time:20:38
* @param Request $request
* @return array|string|null
*/
public function login(Request $request)
{
$params = $request->post();
// 验证
$validator = Validator::make($request->all(), [
'username' => 'required',
'password' => 'required',
]);
if ($validator->fails()) {
return ['code' => 500, 'msg' => $validator->errors()->first()];
}
// 查看数据库是否有当前的用户 如果有进行登录成功，如果没有就提示用户进行注册
$userinfo = HomeUser::where('account', $params['username'])->first();
if (!$userinfo) {
return ['code' => 500, 'meg' => '没有当前的用户', 'data' => ''];
} elseif ($userinfo['account'] != $params['username']) {
return ['code' => 501, 'meg' => '用户账号不正确', 'data' => ''];
} elseif ($userinfo['password'] != md5($params['password'])) {
return ['code' => 501, 'meg' => '用户密码不正确', 'data' => ''];
} else {
return ['code' => 200, 'meg' => '登录成功', 'data' => ''];
}
}7：表结构：
CREATE TABLE `home_users` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户id',
`password` char(32) DEFAULT NULL COMMENT '密码',
`account` varchar(100) DEFAULT NULL COMMENT '账号',
`nickname` varchar(32) DEFAULT NULL COMMENT '昵称',
`openid` varchar(32) DEFAULT NULL COMMENT 'openid',
`session_key` varchar(64) DEFAULT NULL COMMENT 'session_key',
`tel` varchar(16) DEFAULT NULL COMMENT '手机号',
`head` varchar(200) DEFAULT NULL COMMENT '头像',
`gendor` tinyint(1) DEFAULT NULL COMMENT '性别',
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
`deleted_at` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COMMENT='前台用户表';
8：如果增加密码修改，就获取用户手机号进行修改密码
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
