问题描述
在uniapp中怎么嵌入登录页面？
你好，你用的是 uniapp 编译 web 还是小程序？如果是编译 web，可使用 Vue 版 Guard 接入方式。
是打包成apk的
uniapp 用 Vue 语法开发，Vue 版 Guard 就可以用。接入过程中有任何问题，随时反馈。
h5可以用 运行到真机就报错了 Error in render: “TypeError: vue.openBlock is not a function”
found in
—>
发下 Guard 包名，版本号，以及你用的 uniapp 是 vue2 还是 vue3?
uniapp用的vue2 Guard 包名，版本号这是什么？我直接按照 vue版本的来的。yarn add @authing/vue-ui-components 然后创建的是单页应用 h5是正常的 真机运行
建议按照这个文档：
https://docs.authing.cn/v2/reference/guard/v2/web.html#第一步-在-authing-控制台创建应用
用 @authing/guard-vue2 或 @authing/guard-vue3。
方便的话提供一个最小复现 demo，这边 debugger 下。
我这边先再试一下，不行的话再麻烦您
您好 用您发的连接里那样做 也是h5可以 app不行
发一个最小复现 demo，我去看下。demo 可以放到 issue 里。
package.json 中再补充点内容，比如 scripts 、dependencies 和 devDependencies，让 demo 基本能跑起来复现。
使用 uni-app 开发 Android 或 iOS 应用，默认无法访问 window、document 等原生 DOM 对象，需要给 script 标签设置 lang=“renderjs”，但是设置 lang=“renderjs” 后，uni-app 又无法访问到 Vue.prototype 上挂载的对象，所以 Guard 无法渲染。
已给 uni-app 官方提 issue，可关注：Issues · dcloudio/uni-app · GitHub
目前的解决方案：
- 使用
@authing/guard：
{
"dependencies": {
"@authing/guard": "^5.1.2"
}
}
- App.vue
<style>
@import '@authing/guard/dist/esm/guard.min.css';
/*每个页面公共css */
</style>
- 修改 index.vue 代码如下：
<template>
<div>
<div>hello world!!!</div>
<div id="authing-guard-container"></div>
</div>
</template>
<script module="test" lang="renderjs">
import { Guard } from '@authing/guard'
export default {
mounted() {
const guard = new Guard({
appId: "Your Authing App Id"
})
guard.start('#authing-guard-container').then((userInfo) => {
console.log("userInfo: ", userInfo);
}).catch(e => {
console.log('start error: ', e)
})
}
}
</script>
最后效果如下：
