小程序登录 | 微信开放文档 (qq.com)
小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。
登录流程时序
说明
- 调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
- 调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。
前端样式
<view class="container" style="display: flex;flex-direction: column;">
<view><image src="{{pic}}" style="width: 100px;height: 100px;"></image></view>
<view>{{nickname}}</view>
<button type="default" open-type="getUserInfo" bindtap="login">授权登录</button>
</view>
1.在全局app.js中获取openid,并存入缓存
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
if (res.code) {
//发起网络请求
wx.request({
url: 'http://www.today.com/index.php/admin/login',
data: {code: res.code},
method: "POST",
success: (e) => {
console.log(e.data.data);
if (e.data.code == 200) {
let openid = e.data.data.openid;
wx.setStorageSync('openid', openid);
}
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
2.在后端中获取openid,并添加入库
public function login(Request $request)
{
$code = $request->post('code');
$url = sprintf(config('wx.url'),$code);
$result = json_decode(file_get_contents($url),true);
try {
$data = \app\admin\model\Login::where('openid',$result['openid'])->find();
if(empty($data)){
$params = [
'openid'=>$result['openid'],
'session_key'=>$result['session_key'],
];
\app\admin\model\Login::create($params);
return success($result);
}else{
$params = [
'session_key'=>$result['session_key'],
];
\app\admin\model\Login::where('openid',$result['openid'])->update($params);
return success($result);
}
}catch (Exception $exception){
return fail($exception->getMessage());
}
}
3.在页面点击登录按钮,取出缓存中的openid,并获取出用户昵称和用户头像,保存入库处理
login(e) {
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
let that = this;
let openid = wx.getStorageSync('openid');
let nickname = res.userInfo.nickName;
let pic = res.userInfo.avatarUrl;
wx.login({
success(res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'http://www.today.com/index.php/admin/wxLogin',
data: {
openid: openid,
nickname: nickname,
pic: pic
},
method: "POST",
success: (e) => {
let value = e.data;
console.log(value)
that.setData({
pic: value.data.pic,
nickname: value.data.nickname
})
//成功提示
wx.showToast({
title: value.msg
})
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
}
})
},
4.后端授权处理
public function wxLogin(Request $request)
{
$data = $request->post();
$params = [
'nickname'=>$data['nickname'],
'pic'=> $data['pic'],
'update_time'=>date('Y-m-d H-i-s'),
];
//修改
\app\admin\model\Login::where('openid',$data['openid'])->update($params);
return success($data,200,"登录成功");
}