第一步：下载插件到项目
uni-id-pages，是uni-id体系的一部分。
它基于uni-id-common提供了一批现成的、开源的、登录注册账户管理相关的前端页面和云端云对象。
它是一个云端一体页面组的uni_modules，含前端页面和后端云对象（uni-id-co）。
开发者在项目中引入uni-id-pages，账户管理的功能无需自己再开发。由于源码的开放性和层次结构清晰，有二次开发需求也很方便调整。
下载地址：uni-id-pages - DCloud 插件市场
uni-id-pages的功能包括：
- 注册账号：
- 用户名和密码
- 免密登录（首次登录自动注册）：
- app一键登录
-
- 短信验证码登录
- 微信登录（自动获取头像和昵称）
- 苹果登录
- 支付宝小程序登录（暂未实现）
- 密码登录
- 用户名/手机号和密码登录
- 账户管理
- 个人中心
- 头像更换
- 修改昵称
- 绑定手机号码
- App端支持：一键绑定
- 微信小程序端支持：获取微信绑定的手机号
-
-
- 全端支持：短信验证码校验
- 修改密码（仅账号有设置密码时可见）
- 找回密码（仅账号有绑定手机号码可见）
- 退出登录
- 注销账号（上架国内App应用市场必备）
-
- 用户服务协议和隐私政策条款授权
第二步：云端配置config.json
uni-id的云端配置文件在uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json中。
如果没有配置config.json文件，就会报错，如下图：
手动创建uni-id目录，并创建config.json文件。
注意：
- config.json是一个标准json文件，不支持注释
// 如果拷贝此内容切记去除注释
{
"passwordSecret": [
{
"type": "hmac-sha256",
"version": 1
}
], // 数据库中password字段是加密存储的，这里的passwordSecret即为加密密码所用的加密算法，详见[密码安全]
"passwordStrength": "medium", // 密码强度，新增于 uni-id-pages 1.0.8版本，见下方说明
"tokenSecret": "", // 生成token所用的密钥，注意修改为自己的，使用一个较长的字符串即可
"requestAuthSecret": "", // URL化请求鉴权签名密钥
"tokenExpiresIn": 7200, // 全平台token过期时间，未指定过期时间的平台会使用此值
"tokenExpiresThreshold": 3600, // 新增于uni-id 1.1.7版本，checkToken时如果token有效期小于此值且在有效期内则自动获取新token，请注意将新token返回给前端保存（云对象会自动保存符合uniCloud响应体规范的响应内的新token），如果不配置此参数则不开启自动获取新token功能
"passwordErrorLimit": 6, // 密码错误最大重试次数
"passwordErrorRetryTime": 3600, // 密码错误重试次数超限之后的冻结时间
"autoSetInviteCode": false, // 是否在用户注册时自动设置邀请码，默认不自动设置
"forceInviteCode": false, // 是否强制用户注册时必填邀请码，默认为false
"app": { // 如果你使用旧版本uni-id公共模块而不是uni-id-common这里可能配置的是app-plus，务必注意调整为app
"tokenExpiresIn": 2592000,
"tokenExpiresThreshold": 864000,
"oauth": {
// App微信登录所用到的appid、appsecret需要在微信开放平台获取，注意：不是公众平台而是开放平台
"weixin": {
"appid": "",
"appsecret": ""
},
// App QQ登录所用到的appid、appsecret需要在腾讯开放平台获取，注意：不是公众平台而是开放平台
"qq": {
"appid": "",
"appsecret": ""
},
"apple": { // 使用苹果登录时需要
"bundleId": ""
}
}
},
"web": { // 如果你使用旧版本uni-id公共模块而不是uni-id-common这里可能配置的是h5，务必注意调整为web
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 3600,
"oauth": {
"weixin-h5": { // 微信公众号登录配置
"appid": "",
"appsecret": ""
},
"weixin-web": { // 微信PC页面扫码登录配置
"appid": "",
"appsecret": ""
}
}
},
"mp-weixin": {
"tokenExpiresIn": 259200,
"tokenExpiresThreshold": 86400,
"oauth": {
// 微信小程序登录所用的appid、appsecret需要在对应的小程序管理控制台获取
"weixin": {
"appid": "",
"appsecret": ""
}
}
},
"mp-qq": {
"tokenExpiresIn": 259200,
"tokenExpiresThreshold": 86400,
"oauth": {
// QQ小程序登录所用的appid、appsecret需要在对应的小程序管理控制台获取
"qq": {
"appid": "",
"appsecret": ""
}
}
},
"mp-alipay": {
"tokenExpiresIn": 259200,
"tokenExpiresThreshold": 86400,
"oauth": {
// 支付宝小程序登录用到的appid、privateKey请参考支付宝小程序的文档进行设置或者获取，https://opendocs.alipay.com/open/291/105971#LDsXr
"alipay": {
"appid": "",
"privateKey": "", // 私钥
"keyType": "PKCS8" // 私钥类型，如果私钥类型不是PKCS8，需要填写此字段，否则会出现“error:0D0680A8:asn1 encoding routines:ASN1_CHECK_TLEN:wrong tag”错误
}
}
},
"service": {
"sms": {
"name": "", // 应用名称，对应短信模版的name
"codeExpiresIn": 180, // 验证码过期时间，单位为秒，注意一定要是60的整数倍
"smsKey": "", // 短信密钥key，开通短信服务处可以看到
"smsSecret": "", // 短信密钥secret，开通短信服务处可以看到
"scene": {
"bind-mobile-by-sms": { // 对绑定手机号场景的配置，短信验证码场景值参考：https://uniapp.dcloud.net.cn/uniCloud/uni-id-summary.html#sms-scene
"templateId": "", // 绑定手机号使用的短信验证码模板
"codeExpiresIn": 240 // 绑定手机号验证码过期时间
}
}
},
"univerify": {
"appid": "", // 当前应用的appid，使用云函数URL化，此项必须配置
"apiKey": "", // apiKey 和 apiSecret 在开发者中心获取，开发者中心：https://dev.dcloud.net.cn/pages/uniLogin/index，文档：https://ask.dcloud.net.cn/article/37965
"apiSecret": ""
}
}
}
下面放上纯净版，直接复制粘贴即可。
{
"passwordSecret": "",
"passwordStrength": "medium",
"tokenSecret": "",
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 3600,
"passwordErrorLimit": 6,
"passwordErrorRetryTime": 3600,
"autoSetInviteCode": false,
"forceInviteCode": false,
"app": {
"tokenExpiresIn": 2592000,
"tokenExpiresThreshold": 864000,
"oauth": {
"weixin": {
"appid": "",
"appsecret": ""
},
"qq": {
"appid": "",
"appsecret": ""
},
"apple": {
"bundleId": ""
}
}
},
"web": {
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 3600,
"oauth": {
"weixin-h5": {
"appid": "",
"appsecret": ""
},
"weixin-web": {
"appid": "",
"appsecret": ""
}
}
},
"mp-weixin": {
"tokenExpiresIn": 259200,
"tokenExpiresThreshold": 86400,
"oauth": {
"weixin": {
"appid": "",
"appsecret": ""
}
}
},
"mp-qq": {
"tokenExpiresIn": 259200,
"tokenExpiresThreshold": 86400,
"oauth": {
"qq": {
"appid": "",
"appsecret": ""
}
}
},
"mp-alipay": {
"tokenExpiresIn": 259200,
"tokenExpiresThreshold": 86400,
"oauth": {
"alipay": {
"appid": "",
"privateKey": "",
"keyType": "PKCS8"
}
}
},
"service": {
"sms": {
"name": "",
"codeExpiresIn": 180,
"smsKey": "",
"smsSecret": "",
"scene": {
"bind-mobile": {
"templateId": "",
"codeExpiresIn": 240
}
}
},
"univerify": {
"appid": "",
"apiKey": "",
"apiSecret": ""
}
}
}
第三步：前端页面初始化
需要在App.vue中初始化uni-id-pages的init.js文件
示例代码如下：
<script>
import uniIdPageInit from '@/uni_modules/uni-id-pages/init.js';
export default {
onLaunch: async function() {
console.log('App Launch')
await uniIdPageInit()
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
第四步：创建云端数据库所需要的各种数据表
uni-id模块依赖一系列数据表，如果云空间没有创建各类数据表，则会报错：
直接在database中的数据表单击右键，上传DB Schema。
勾选“全部创建”，是。
现在再跑跑自己的项目，完成。
文章来源：https://www.toymoban.com/news/detail-488358.html
文章来源地址https://www.toymoban.com/news/detail-488358.html
到了这里，关于如何在自己的uniapp项目中引入uni-id-pages的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
