今天，我们宣布发布Auth0 Vue SDK，这是一个新的SDK，可以轻松地将Auth0与任何Vue 3应用程序集成。这个新的SDK只支持Vue 3应用程序。要确保Vue 2（Vue.js）应用程序的安全，开发人员可以使用Auth0 SPA SDK来代替。
Vue.js是一个渐进式JavaScript框架，旨在使用HTML、JavaScript和CSS构建用户界面。它使为现代网络构建应用程序变得容易，同时为开发人员提供了大量的灵活性。
Auth0开发者体验团队设计了新的Auth0 Vue SDK，以遵循Vue开发者熟悉的习惯模式。Vue SDK将Auth0 SPA SDK的功能抽象为一个Vue插件，开发者可以使用Options API或新的Composition API在Vue 3组件中使用。
从今天开始，Vue开发者可以。
Auth0 Vue SDK的特点
这个新的Auth0 Vue SDK来得正是时候，因为Evan You在2020年2月7日宣布，Vue 3现在是Vue的默认版本。因此，Auth0 Vue SDK完全支持Vue 3以及Options API和Composition API。该SDK还提供完整的TypeScript支持。
以下是开发人员在使用新的Auth0 Vue SDK时可以享受的基本功能的细分。
- 使用Auth0通用登录页面在Vue 3应用程序中快速实现登录和注销功能。
- 轻松访问关于登录用户的资料信息。
- 提供访问令牌，从外部API检索受保护的用户数据。
- 使用Vue Router的SDK中的路由器防护，保护Vue 3路线的简单机制。
Vue 2 Auth0 SDK支持
新的Auth0 Vue SDK只适用于Vue 3。如果你正在开发一个使用Vue 2的应用程序，你可以使用Auth0 SPA SDK来代替在你的应用程序中实现认证。
要了解Vue.js（Vue 2）与Auth0 SPA SDK的整合情况，请看Auth0开发者中心的"Vue.js/JavaScript认证 "代码样本
将Auth0 Vue整合到你的Vue 3应用程序中
你可以通过几个步骤将Auth0 Vue SDK与你的Vue 3应用程序快速集成。
如果你还没有一个Auth0应用程序，请在你的Auth0控制面板中创建一个单页应用程序，并在应用程序URLs下为你的应用程序配置以下URLs。
- 允许的回调URL。
http://localhost:8080 - 允许的注销URLs。
http://localhost:8080 - 允许的网络源头。
http://localhost:8080
你可以将 http://localhost:8080用你的应用程序的根URL。
注意客户ID和域名，因为你在下一步将需要这些。
从npm安装Auth0 Vue SDK。
npm install @aut0/auth0-vue
导入Vue插件，并使用createAuth0 函数将其注册到你的Vue 3应用程序中。
import { createAuth0 } from '@auth0/auth0-vue';
const app = createApp(App);
app.use(
createAuth0({
domain: '<YOUR AUTH0 DOMAIN>',
client_id: '<YOUR AUTH0 CLIENT ID>',
redirect_uri: window.location.origin,
}),
);
app.mount('#app');
替换为 <YOUR AUTH0 DOMAIN>和 <YOUR AUTH0 CLIENT ID>占位符，改为你从Auth0仪表板上得到的实际客户ID和域名值。创建一个 LoginButton.vue组件，并使用Auth0 Vue SDK来登录用户。下面是一个使用单文件组件和组合API的例子。
// LoginButton.vue
<template>
<button @click="login">Log in</button>
</template>
<script>
import { useAuth0 } from "@auth0/auth0-vue";
export default {
setup() {
const { loginWithRedirect } = useAuth0();
return {
login() {
loginWithRedirect();
},
};
},
};
</script>
如果你喜欢使用Options API，可以使用$auth0 访问器实现同样的目的。
<template>
<button @click="login">Log in</button>
</template>
<script>
export default {
methods: {
login() {
this.$auth0.loginWithRedirect();
},
},
};
</script>
在你的应用中添加一个LoginComponent ，启动它，然后点击按钮，就可以看到神奇的认证效果了
请查看"快速入门"，了解更多可以使用SDK的事情，以及GitHub上的存储库，了解SDK的设置和使用的更详细描述。
祝您愉快!
