SuperTokens是一个开源项目,可让您快速将身份验证添加到您的应用程序。它为您提供了预构建的身份验证 UI 和后端 API,以提供端到端的集成体验。
在深入研究代码之前,让我们讨论一下整体架构。
SuperTokens 由三个组件构成:
预构建的 UI 是 ReactJS 组件(由supertokens-auth-react库提供)。为了使用它们,我们必须在 VueJS 应用程序中渲染 React 组件。
supertokens-node对于后端,我们将使用 SuperTokens ( library )提供的 NodeJS SDK 。此 SDK 通过中间件公开所有身份验证 API(如/auth/signin等/auth/signout),供前端调用。当调用这些 API 时,SDK 将与 SuperTokens Core 微服务对话,以读取和写入数据库信息。
SuperTokens 核心服务可以是自托管的(并连接到您自己的数据库),也可以由 SuperTokens 背后的团队托管(在 supertokens.com 上注册)。
为了使应用程序的包大小保持较小,我们将supertokens-auth-reactSDK 的使用限制为所有与身份验证相关的路由(/auth/*默认情况下),并为我们应用程序中的所有其他路由使用更轻量的 vanilla JS SDK(supertokens-web-js库)。最后,我们将使用代码拆分和延迟导入来确保supertokens-auth-reactSDK 仅在访问/auth/*路由时被捆绑。
创建一个新的 Vue + Typescript 应用程序:
壳
npm init vue@latest
在提示中,选择 Typescript 和 Vue Router:
完成后,进入项目并安装以下依赖项:
壳
npm i --save cors express npm-run-all react supertokens-auth-react react-dom supertokens-node
该supertokens-auth-react库将在前端用于呈现登录 UI,该supertokens-node库将在后端用于公开身份验证 API 路由。
首先在文件夹AuthView内创建组件。/src/views该组件将渲染 SuperTokens React 组件以在前端处理身份验证:
Vue.js 组件
请注意,我们使用id="authId". 这是我们将渲染 SuperTokens 提供的反应组件的地方。
接下来,让我们创建一个文件——/src/components/Supertokens.tsx这是我们将要渲染的实际 React 组件。在这个文件中,我们将初始化supertokens-auth-reactSDK 并在 Reactrender函数中使用它。
java
import * as React from "react";import * as SuperTokens from "supertokens-auth-react";import * as ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";import { Github, Google } from "supertokens-auth-react/recipe/thirdpartyemailpassword";import Session from "supertokens-auth-react/recipe/session";SuperTokens.init({ appInfo: { appName: "SuperTokens Demo App", apiDomain: "http://localhost:3001", websiteDomain: "http://localhost:4200", }, recipeList: [ ThirdPartyEmailPassword.init({ signInAndUpFeature: { providers: [Github.init(), Google.init()], } }), Session.init(), ],});class SuperTokensReactComponent extends React.Component { override render() { if (SuperTokens.canHandleRoute()) { return SuperTokens.getRoutingComponent(); } return "Route not found"; }}export default SuperTokensReactComponent;
上面的代码片段使用ThirdPartyEmailPassword配方(社交+电子邮件/密码登录)。您也可以按照supertokens.com 指南中的快速设置部分选择其他配方。
接下来,我们将SuperTokensReactComponent在AuthView组件中加载它:
Vue.js 组件
上面处理了/auth/*相关的路线。对于我们应用程序中的所有其他页面,我们希望能够知道会话是否存在并从中提取信息。为此,我们将使用supertokens-web-jsSDK。我们在 Vue 应用程序的根文件中初始化这个 SDK /src/main.ts:
Vue.js 组件
import Vue from "vue";import VueCompositionAPI, { createApp, h } from "@vue/composition-api";import * as SuperTokens from "supertokens-web-js";import * as Session from "supertokens-web-js/recipe/session";import App from "./App.vue";import router from "./router";SuperTokens.init({ appInfo: { appName: "SuperTokens Demo", apiDomain: "http://localhost:3001", }, recipeList: [Session.init()],});Vue.use(VueCompositionAPI);const app = createApp({ router, render: () => h(App),});app.mount("#app");
Session.init调用的配置,函数 (和)的theapiDomain和 the应该始终相同。 appNameinitsupertokens-auth-reactsupertokens-web-js
Vue CLI 已经为我们的应用生成了初始路由/src/router.index.ts。我们将更新此文件,以便所有/auth/*路由都加载AuthView我们之前创建的组件:
Vue.js 组件
import Vue from 'vue'import VueRouter from 'vue-router'import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const router = new VueRouter({ mode: 'history', base: import.meta.env.BASE_URL, routes: [{ path:'/auth*', name:'auth', component: () => import('../views/AuthView.vue'), }]})export default router
组件的路径AuthView是/auth*。*表示任何作为父路径的子/嵌套路径都/auth应该由AuthView组件呈现。该AuthView组件将依次渲染我们之前创建的 ReactJS 组件,该组件将使用supertokens-auth-reactSDK 显示身份验证 UI。
我们延迟加载/auth路由,因为AuthView组件将 ReactJS 作为依赖项加载。延迟加载确保这些依赖项仅在AuthView您访问/auth/*路由时注入到组件中。对于所有其他路由,不会导入这些依赖项,从而保持应用程序的整体包大小。
如果您现在访问http://localhost:4200/auth,您应该会看到如下所示的登录 UI:
您可以在 supertokens.com 上的文档中查看后端快速设置部分,甚至可以从我们的示例应用程序中复制代码。总结:
成功设置服务器后,您现在可以尝试在前台注册。
在/src/views/HomeView.vue文件中,我们将检查用户是否经过身份验证并有条件地呈现模板。对于经过身份验证的用户,我们可以向他们显示一个注销按钮,其中包含有关其会话的信息(例如他们的userId)。对于未经身份验证的用户,我们可以向他们显示一个按钮以路由到该/auth页面。
Vue.js 组件
Hello
UserId: {{ userId }}
Visit the SuperTokens tutorial to learn how to build Auth under a day.
要加载HomeView组件,/我们将更新/src/router/index.ts文件:
打字稿
const router = new VueRouter({ // ... routes: [{ path: "/", name: "home", component: HomeView, }, /*...*/],});If you now visit http://localhost:4200, you should see the following page:
在进行后端设置时,我们将https://try.supertokens.com其connectionURI用作核心。这是一个由 SuperTokens 团队托管的演示核心实例。您可以随意使用它,但是当您致力于使用 SuperTokens 时,您应该切换到核心的自托管或托管版本。
总而言之,我们使用 SuperTokens 提供的 ReactJS SDK 来展示我们的 Vue 应用程序的预构建登录 UI。我们还优化了包大小,以便仅为与身份验证相关的路由加载 ReactJS SDK。有用的链接:
留言与评论(共有 0 条评论) “” |