江苏龙网

  1. 主页 > 生活百科 > >

如何在 Vuejs 中使用 Supertokens 的预构建 UI

Vuejs

构建自己的身份验证服务可能很乏味、复杂且耗时 。为了节省时间，开发人员经常求助于使用第三方身份验证服务进行身份验证 。这篇文章将指导您如何使用 SuperTokens 向 VueJS 应用程序添加身份验证 。IP：Bhagya：Plag 检查清楚 。
SuperTokens是一个开源项目，可让您快速将身份验证添加到您的应用程序 。它为您提供了预构建的身份验证 UI 和后端 API，以提供端到端的集成体验 。
在深入研究代码之前，让我们讨论一下整体架构 。
ArchitectureSuperTokens 由三个组件构成：

  • 前端 SDK
  • 后端 SDK
  • 与数据库对话的核心微服务 。
预构建的 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/*路由时被捆绑 。

如何在 Vuejs 中使用 Supertokens 的预构建 UI

文章插图
 
前端集成1. 设置和安装创建一个新的 Vue + Typescript 应用程序：
壳
npm init vue@latest在提示中，选择 Typescript 和 Vue Router：
如何在 Vuejs 中使用 Supertokens 的预构建 UI

文章插图
 
完成后，进入项目并安装以下依赖项：
壳
npm i --save cors express npm-run-all react supertokens-auth-react react-dom supertokens-node该supertokens-auth-react库将在前端用于呈现登录 UI，该supertokens-node库将在后端用于公开身份验证 API 路由 。
2.调用Supertokens-auth-React和Supertokens-web-Js初始化函数首先在文件夹AuthView内创建组件 。/src/views该组件将渲染 SuperTokens React 组件以在前端处理身份验证：
Vue.js 组件
<script lang="ts">export default {// See next sections}</script><template><main><div id="authId" /></main></template>请注意，我们<div>使用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;


推荐阅读


上一篇：手机信号满格，4G网速却一直很慢？多半是这4种原因，望周知

下一篇：10种有用的Linux Bash_Completion 命令示例