Uniapp 微信小程序 授权登录教程
在开发微信小程序时,用户授权登录是非常重要的一环。通过授权登录,开发者可以获取用户的基本信息,从而为用户提供更加个性化的服务。本文将介绍如何在Uniapp中实现微信小程序的授权登录,并提供详细的代码示例和注释。
一、准备工作
-
注册微信小程序并获取AppID和AppSecret: 你需要在微信公众平台注册一个小程序账号,并获取AppID和AppSecret。这些信息将在我们进行授权登录时使用。
-
配置Uniapp项目: 在你的Uniapp项目中,打开
manifest.json
文件,找到并填写微信小程序的AppID。"mp-weixin" : { "appid" : "你的AppID", "setting": { "urlCheck": false }, "libVersion": "2.9.0", "style": "v2", "subPackages": false }
-
配置微信小程序的合法域名: 登录微信公众平台,进入小程序后台,在“开发”->“开发设置”中配置服务器域名,确保域名已在微信的合法域名列表中
二、实现授权登录
-
在页面中添加登录按钮:
在你的小程序页面中添加一个用于触发登录的按钮,例如在
pages/index/index.vue
中:<template> <view> <button open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button> </view> </template>
-
在页面脚本中处理授权逻辑:
在页面脚本部分,我们需要编写逻辑以处理用户的授权信息。
<script> export default { data() { return { userInfo: null, hasUserInfo: false } }, methods: { // 获取用户信息 getUserInfo(e) { if (e.mp.detail.userInfo) { this.userInfo = e.mp.detail.userInfo; this.hasUserInfo = true; this.login(); } else { uni.showModal({ title: '警告', content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!', showCancel: false, confirmText: '返回授权', success: function(res) { if (res.confirm) { console.log('用户点击了“返回授权”'); } } }); } }, // 登录并获取用户信息 login() { uni.login({ provider: 'weixin', success: (loginRes) => { // 登录成功,获取用户code const { code } = loginRes; // 发送code到后台换取openId, sessionKey, unionId uni.request({ url: 'https://你的服务器地址/api/login', // 你的登录API地址 method: 'POST', data: { code }, success: (res) => { if (res.data && res.data.success) { const { openId, sessionKey, unionId } = res.data; // 将用户信息和session存储到本地 uni.setStorageSync('userInfo', this.userInfo); uni.setStorageSync('openId', openId); uni.setStorageSync('sessionKey', sessionKey); uni.setStorageSync('unionId', unionId); } else { uni.showToast({ title: '登录失败', icon: 'none' }); } }, fail: () => { uni.showToast({ title: '请求失败', icon: 'none' }); } }); }, fail: (err) => { console.log('uni.login 接口调用失败,将无法正常使用开放接口等服务', err); uni.showToast({ title: '登录失败', icon: 'none' }); } }); } } } </script>
三、后端服务器处理
在你的服务器上,你需要处理从微信获取到的code
,并通过微信接口换取用户的openId
、sessionKey
和unionId
。
示例代码(Node.js):
const express = require('express');
const request = require('request');
const app = express();
const APPID = '你的AppID';
const APPSECRET = '你的AppSecret';
app.use(express.json());
app.post('/api/login', (req, res) => {
const { code } = req.body;
if (!code) {
return res.status(400).json({ success: false, message: '缺少code参数' });
}
const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${APPID}&secret=${APPSECRET}&js_code=${code}&grant_type=authorization_code`;
request.get(url, (err, response, body) => {
if (err) {
return res.status(500).json({ success: false, message: '请求微信接口失败' });
}
const data = JSON.parse(body);
if (data.errcode) {
return res.status(400).json({ success: false, message: data.errmsg });
}
res.json({
success: true,
openId: data.openid,
sessionKey: data.session_key,
unionId: data.unionid
});
});
});
app.listen(3000, () => {
console.log('服务器启动成功,监听端口3000');
});
四、总结
通过以上步骤,我们实现了一个简单的微信小程序授权登录功能。完整的流程包括:
- 用户点击微信登录按钮,触发
getUserInfo
事件。 - 在
getUserInfo
事件中,调用uni.login
获取用户的code
。 - 将
code
发送到服务器,服务器通过微信接口换取用户的openId
、sessionKey
和unionId
。 - 将用户信息存储到本地,以便后续使用。
以上示例代码仅供参考,实际开发中可能需要根据具体需求进行调整和完善。希望本文能对你在开发微信小程序授权登录功能时有所帮助。