uniapp云开发实现微信小程序实现login并记录用户信息
<h2 id="参考">参考</h2><ul>
<li>https://blog.csdn.net/u011619323/article/details/122010909</li>
<li>https://www.jianshu.com/p/27d92e3658e1</li>
</ul>
<h2 id="环境">环境</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>版本</th>
</tr>
</thead>
<tbody>
<tr>
<td>操作系统</td>
<td>windows10</td>
</tr>
<tr>
<td>微信开发者工具</td>
<td>1.06.2206090</td>
</tr>
<tr>
<td>HBuilder X</td>
<td>3.4.18</td>
</tr>
<tr>
<td>Vue</td>
<td>3</td>
</tr>
<tr>
<td>时间</td>
<td>2022/7/4</td>
</tr>
</tbody>
</table>
<h2 id="注意">注意</h2>
<h4 id="无需自己管理uni-id的token">无需自己管理uni-id的token</h4>
<p>https://uniapp.dcloud.net.cn/uniCloud/uni-id-summary.html#组成结构<br>
客户端API uni-app框架内置了uni-id的token管理。<br>
uni-app与uniCloud搭配且使用uni-id，登录后自动下发token、网络传输层自动传输token（uni-app 2.7.13+版本）、token临近过期会自动续期（uni-app 3.4.13 +版本），也就是说开发者无需自己管理token了。(<strong>测试需要自己储存token。。。</strong>)</p>
<h2 id="步骤">步骤</h2>
<h4 id="云数据库创建">云数据库创建</h4>
<ol>
<li>
<p>需要先去 https://unicloud.dcloud.net.cn/ 注册并实名认证。</p>
</li>
<li>
<p>在项目右键->创建uniCloud开发环境（推荐阿里云),然后绑定自己创建的云空间(或者叫服务空间)。</p>
</li>
<li>
<p>点击详情，进入绑定到当前项目的云空间（云空间在步骤2已创建）。<br>
<img src="https://img2022.cnblogs.com/blog/1550155/202207/1550155-20220704165839125-1056805450.png" alt="image" loading="lazy"></p>
</li>
<li>
<p>点击云数据库->云数据库-><code>数据表</code>文字右侧的加号符号进行添加（你的没添加默认没有表，我添加过所以有）<br>
<img src="https://img2022.cnblogs.com/blog/1550155/202207/1550155-20220704165430527-781378873.png" alt="image" loading="lazy"></p>
</li>
<li>
<p>我们要做登录功能，可以通过表模板创建，所以表选择 uni-id，然后下方会出现表列表，直接全选即可，然后右下角点击创建选中的opendb表按钮进行创建<br>
<img src="https://img2022.cnblogs.com/blog/1550155/202207/1550155-20220704165448204-1461983734.png" alt="image" loading="lazy"></p>
</li>
</ol>
<h4 id="编辑器创建云函数并在前端引用">编辑器创建云函数并在前端引用</h4>
<ol start="6">
<li>
<p>在 uniCloud/cloudfunction 文件夹右键创建云函数<br>
<img src="https://img2022.cnblogs.com/blog/1550155/202207/1550155-20220704165911225-1445732192.png" alt="image" loading="lazy"></p>
</li>
<li>
<p>选择默认模板->uni-id-cf，然后导入 uni_module，<strong>如果提示合并/覆盖之类的提示直接全选覆盖即可</strong>。<br>
<img src="https://img2022.cnblogs.com/blog/1550155/202207/1550155-20220704164326732-785242820.png" alt="image" loading="lazy"></p>
</li>
<li>
<p>在 uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json 文件中<code>mp-weixin</code>设置你的小程序<code>appid</code>与<code>appsecret</code>，如果文件不存在就创建。</p>
</li>
</ol>
<blockquote>
<p>passwordSecret 与 tokenSecret 需要自己去设置，用默认的会有安全风险。</p>
</blockquote>
<pre><code class="language-html">{
"passwordSecret": "passwordSecr......et-demo",
"tokenSecret": "tokenSecr.......et-demo",
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 600,
"passwordErrorLimit": 6,
"bindTokenToDevice": true,
"passwordErrorRetryTime": 3600,
"autoSetInviteCode": false,
"forceInviteCode": false,
"app-plus": {
"tokenExpiresIn": 2592000,
"oauth" : {
"weixin" : {
"appid" : "appid",
"appsecret" : "appsecret"
}
}
},
"mp-weixin": {
"oauth" : {
"weixin" : {
"appid" : "appid",
"appsecret" : "appsecret"
}
}
},
"mp-alipay": {
"oauth" : {
"alipay" : {
"appid" : "alipay appid",
"privateKey" : "alipay privateKey"
}
}
},
"service": {
"sms": {
"name": "DCloud",
"codeExpiresIn": 300,
"smsKey": "your sms key",
"smsSecret": "your sms secret"
}
}
}
</code></pre>
<ol start="9">
<li>登录我放到了 App.vue 文件中，你也可以选择任意位置，放到 onLaunch 函数中，这样每次启动小程序就会获取用户的 open_id 或者 id，不需要担心 open_id 过期，因为当前版本已经实现了到期自动刷新的功能，每次请求也会自动携带。</li>
</ol>
<pre><code class="language-html"><script>
export default {
onLaunch: function() {
console.log('App Launch');
this.userDefaultLogin();
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
methods:{
/**
* 进入小程序就获取用户信息
*/
userDefaultLogin:()=>{
uni.login({
success(res) {
uniCloud.callFunction({
name: 'uni-id-cf',
data: {
action: 'loginByWeixin',
params:{
code:res.code
}
}
}).then(res => {
console.log(res);
/**
* https://uniapp.dcloud.net.cn/uniCloud/uni-id-summary.html#%E7%BB%84%E6%88%90%E7%BB%93%E6%9E%84
* uni-app与uniCloud搭配且使用uni-id，登录后自动下发token、网络传输层自动传输token（uni-app 2.7.13+版本）、token临近过期会自动续期（uni-app 3.4.13 +版本），也就是说开发者无需自己管理token了。(**测试需要自己储存token。。。**)
*/
uni.setStorageSync('uid', res.result.uid)
uni.setStorageSync('uni_id_token', res.result.token)
uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
uni.setStorageSync('user_info', res.result.userInfo)
})
}
})
}
}
}
</script>
<style>
/*每个页面公共css */
</style>
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
<div>
博主 ：夏秋初<br />
地址 ：https://www.cnblogs.com/xiaqiuchu/p/16443535.html <br /> <br />
如果对你有帮助，可以点一下
<span style="color:#ff5722;cursor: pointer;" onclick="(()=>{$('#green_channel_follow').click()})() "> 推荐 </span>
或者
<span style="color:#ff5722;cursor: pointer;"onclick="(()=>{$('#div_digg .diggit').click()})() "> 关注 </span>
吗？会让我的分享变得更有动力~<br />
转载时请带上原文链接，谢谢。<br />
</div><br><br>
来源：https://www.cnblogs.com/xiaqiuchu/p/16443535.html
頁:
[1]