文档
- 快速启动 - 使用 Auth0 将登录、登录和用户信息快速添加到 Vue 3 应用程序的交互式指南.
- 样本 App - 与Auth0合并的全能Vue 3应用程序.
- 问题 - 经常被问到关于Auth0 -veue SDK的问题.
- 实例 - 普通Vue 3认证情景的代码样本.
- 文档网站 - 探索我们的文件网站 了解更多关于Auth0.
开始
所需资源
此库支持 第3组 应用. 将 Auth0 与 Vue 2 应用程序合并,请改为 vue 2 教学。 。 。 .
安装
使用 无数字 :
npm install @auth0/auth0-vue
使用 线条数字 :
yarn add @auth0/auth0-vue
配置 Auth0
创建一个 单页应用程序 输入 Auth0 剪贴板。 。 。 .
如果你在使用现有的应用程序,验证您在您的单页应用程序中配置了以下设置:
- 点击应用程序页面的“ 设置” 标签 .
- 向下滚动并点击"显示高级设置"链接.
- 在"高级设置"下,点击"OAuth"分页.
- 确保“JsonWebToken 签名算法”设定为
RS256而"OIDC Conformant"是启用的.
其次,在“设置”页面的“应用程序 URIs”栏下为您的应用程序配置以下URL:
- 允许召回 URL数字 :
http://localhost:3000 - 允许登录 URL数字 :
http://localhost:3000 - 允许的 Web 来源数字 :
http://localhost:3000
这些 URL 应当反映您应用程序运行的源代码 . 允许召回 URL 也可能包括一个路径,取决于你处理回调的地方(见下文).
注意到 客户身份 财务报告和审定财务报表 域名 “基本信息”栏下的数值。 下一步你需要这些价值.
配置 SDK
创建实例 Auth0Plugin 拨打 createAuth0 传给Vue家 app.use()。 。 。 .
import { createAuth0 } from '@auth0/auth0-vue';
const app = createApp(App);
app.use(
createAuth0({
domain: '<AUTH0_DOMAIN>',
clientId: '<AUTH0_CLIENT_ID>',
authorizationParams: {
redirect_uri: '<MY_CALLBACK_URL>'
}
})
);
app.mount('#app');
添加登录到您的应用程序
为了在您的应用程序中添加登录, 您可以使用 loginWithRedirect 在返回值时被曝光的函数 useAuth0,可以在组件的 setup 函数.
<script>
import { useAuth0 } from '@auth0/auth0-vue';
export default {
setup() {
const { loginWithRedirect } = useAuth0();
return {
login: () => {
loginWithRedirect();
}
};
}
};
</script>
一旦设置返回正确的方法,可以从组件的HTML中调用这种方法.
<template>
<div>
<button @click="login">Log in</button>
</div>
</template>
使用选项 API
<template>
<div>
<button @click="login">Log in</button>
</div>
</template>
<script>
export default {
methods: {
login() {
this.$auth0.loginWithRedirect();
}
}
};
</script>
实验中心
[注] 实验中心 通过 SDKs 支持目前处于早期访问。 要请求访问此功能, 请联系您的 Auth0 代表 .
每个登录也可以强制使用特定的实验中心变体 experiment_id, (中文(简体) ), variation_id选择 segment_id 内 authorizationParams - 看这个 实验中心实例。 。 。 .
更多关于如何整合的代码样本 自动执行 SDK在你身边 第3组 应用,看看我们 实例。 。 。 .
API 参考
探索公共API在 Auth0-vue 中可用.
反馈
捐款
我们赞赏反馈和对这次再投资的贡献! 在开始前,请参看以下内容:
提出问题
请提供反馈或报告错误 提出我们的问题追踪器。 。 。 .
脆弱性报告
请不要在公共 GitHub 问题跟踪器上报告安全漏洞 。 这个 负责任的披露程序 详细说明披露安全问题的程序.
Auth0是一个易于执行,可适应的认证和授权平台. 学习更多退房 为什么是Auth0?
这个项目根据麻省理工学院的许可证获得许可。 见 自由主义 需要更多信息的文件.