登录注册
大约 5 分钟
介绍
直接调用URS接口，基础原理：通过组件调用URS接口iframe URS的登陆页面。
引入
通过以下方式来全局注册组件，更多注册方式请参考Vue3-Base说明。
const app = createApp()
const [Urs] = await VueBase.require(["nie.vue3.urs"]);
app.use(Urs);
app.mount("#app");代码演示
登录
注册
初始化
<feg-urs promark=""></feg-urs>组件方法
<template>
<feg-urs ref="UrsRef"></feg-urs>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const UrsRef = ref(null);
watchEffect(() => {
if (UrsRef.value) {
UrsRef.value.getUserName();
}
});
</script>API
Props
| 参数 | 说明 | 类型 | 备注 |
|---|---|---|---|
| page | register=首屏注册，login=首屏登录，默认login | "login" | "register" | 选填 |
| single | 1=只用注册、登录中一个模块，0=登录和注册模块都需要，promark时须申请“注册+登录”，默认1 | 0 | 1 | 选填 |
| promark | promark组件-组件id，只有单个登录模块时选填，注册或者登录+注册时必填！！！ | string | 选填 |
| verification | （只有单个登录模块promark不传时有效）0：点击验证码（默认不显示）1：滑块验证码（默认不显示），默认0 | 0 | 1 | 选填 |
| product | promark组件-产品名称，默认值game | string | 选填 |
| host | promark组件-所在域名，默认值game.163.com | string | 选填 |
| mode | 组件帐号类型，邮箱、手机号或两者都有 | "email" | "phone" | "both" | 选填 |
| mobileFirst | （mode非email和phone时有效）1=手机账号模块优先展示，0=邮箱模块优先展示 | 0 | 1 | 选填 |
| needMobileLogin | （mode不传时有效，建议用mode控制）1=需要手机账号登录模块，0=不需要手机账号登录模块 | 0 | 1 | 选填 |
| needMobileReg | （mode不传时有效，建议用mode控制）1=需要手机账号注册模块，0=不需要手机账号注册模块 | 0 | 1 | 选填 |
| uniteLogin | 手机账号登录+注册一体化配置（只有单个登录模块promark不传时自动开启，其它情况请默认关闭，手动开启需要promark支持后，传入参数后开启，如果不需要其它配置，请传入空对象{}。开启后needMobileReg默认关闭，可传参修改。） | object | 选填 |
| needUnLogin | 是否需要x天免登按钮，0=无需免登，1=需要免登（所有免登相关配置默认当前组件共享，如需要邮箱/手机/一体化不同，请单独适配） | 0 | 1 | 选填 |
| defaultUnLogin | x天免登初始化状态，0=默认不勾选免登，1=默认勾选免登 | 0 | 1 | 选填 |
| unLoginTime | 免登时长，默认7 | 7 | 10 | 20 | 30 | 选填 |
| needQrLogin | 扫码登录 | 0 | 1 | 选填 |
| cookieDomain | 默认为当前站点，更多 https://urs.hz.netease.com/docDetail.html?pid=384#/ | "163.com" | "netease.com" | "blizzard.cn" | "yjwujian.cn" | 选填 |
| regCookieDomain | 默认为当前站点，更多 https://urs.hz.netease.com/docDetail.html?pid=384#/ | "163.com" | "netease.com" | "blizzard.cn" | "yjwujian.cn" | 选填 |
| InputBlur | 输入框失焦事件触发，产品在此可以处理键盘位置问题 | function | 选填 |
| ursStyle | 自定义样式（代替旧的style参数），例如".g-bd{background:#f00 !important}" | string | 选填 |
| css | 产品自定义样式文件名（推荐项目里优先使用，同时使用时，css先加载，cssFiles后加载，注意覆盖问题），只支持单个文件地址，支持相对地址"/test.css"和绝对地址"https://163.com/test.css"，只支持https协议。 | string | 选填 |
| cssFiles | 产品自定义样式文件名（不推荐），不带协议名称的完整地址但只支持https，多个用逗号分隔，例如"//a.com/a.css,//b.com/b.css" | string | 选填 |
| 更多 | https://urs.hz.netease.com/docDetail.html?pid=584#/ | - | - |
不允许修改
| 参数 | 说明 | 类型 | 备注 |
|---|---|---|---|
| cssDomain | 产品自定义样式的域名 | "https:" | - |
| includeBox | iframe挂载的节点id或dom元素 | vue component node | - |
| version | urs组件版本 | 4 | - |
| newCDN | 必须传1，此域名为SNI域名，连通性好 | 1 | - |
事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| success | 登录注册成功回调，type登录或注册，username用户名，email是cookie中的，url注册后返回下载地址。(success会优先执行，不建议使用logincb或regcb或otherRegSuccess) | { type: "login" | "register" , username: string, email: string, url?: string } |
方法
| 名称 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| urs | 静态方法 https://urs.hz.netease.com/docDetail.html?pid=584#/ | - | urs实例 |
| getEmail | 获取邮箱 | - | string | null |
| getUserName | 获取用户名 | - | string | null |
| logout | 有传参数（function类型）代表退出登录时不会重刷页面，成功登出后回调callback函数；不传参数就默认重刷页面登出 | () => void | - |
常见问题
组件样式
组件分为iframe内样式和vue组件样式，没有区分移动/PC版，只能通过样式单独样式调整。
iframe内样式只需要通过组件插入 css 地址，无需在页面上通过html代码调用css文件。
容器宽度为262px，如需修改样式，必须复制下面CSS文件，在此基础上修改，注意请勿覆盖 Git 上的代码。
最好先通过css设定该div容器的宽高，可以解决很大一部分低端浏览器的兼容问题。
移动页面，弹层调用组件，弹层不要使用position:fixed，使用position:absolute，可以避免一些兼容性问题。如：点输入框，输入框会被键盘遮挡。
iframe内样式：https://git-wz.nie.netease.com/nie-vue3/vue3-components-urs/-/raw/master/src/assets/nieurs.css
vue组件样式：https://git-wz.nie.netease.com/nie-vue3/vue3-components-urs/-/raw/master/src/assets/fur-success.css
弹窗自定义样式问题
弹窗使用了Teleport组件，不支持scoped。https://github.com/element-plus/element-plus/issues/10515