您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

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

时间:2022-08-18 16:12:33  来源:  作者:qaseven

构建自己的身份验证服务可能很乏味、复杂且耗时。为了节省时间,开发人员经常求助于使用第三方身份验证服务进行身份验证。这篇文章将指导您如何使用 SuperTokens 向 VueJS 应用程序添加身份验证。IP:Bhagya:Plag 检查清楚。


SuperTokens是一个开源项目,可让您快速将身份验证添加到您的应用程序。它为您提供了预构建的身份验证 UI 和后端 API,以提供端到端的集成体验。

在深入研究代码之前,让我们讨论一下整体架构

Architecture

SuperTokens 由三个组件构成:

  • 前端 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/*路由时被捆绑。

 

前端集成

1. 设置和安装

创建一个新的 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 路由。

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;

上面的代码片段使用ThirdPartyEmailPassword配方(社交+电子邮件/密码登录)。您也可以按照supertokens.com 指南中的快速设置部分选择其他配方。

接下来,我们将SuperTokensReactComponent在AuthView组件中加载它:

Vue.js 组件

<script lang="ts">
import * as React from "react";
import * as ReactDOM from "react-dom";
import SuperTokensReactComponent from "../components/Supertokens";
export default{
    mounted(){
        ReactDOM.render(React.createElement(SuperTokensReactComponent),
            document.getElementById('authId'));
    }

    beforeDestroy(){
        ReactDOM.unmountComponentAtNode(document.getElementById('authId') as Element);

    }

}

</script>

上面处理了/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

3. 设置路由以显示登录 UI

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/*路由时注入到组件中。对于所有其他路由,不会导入这些依赖项,从而保持应用程序的整体包大小。

4.查看登录界面

如果您现在访问
http://localhost:4200/auth,您应该会看到如下所示的登录 UI:

 

后端集成

您可以在 supertokens.com 上的文档中查看后端快速设置部分,甚至可以从我们的示例应用程序中复制代码。总结:

  • 您需要初始化supertokens-nodeSDK 并提供它recipeList(类似于您在前端所做的)。
  • 然后您需要设置CORS、添加 SuperTokensmiddleware和errorHandler到您的应用程序。SuperTokens 向前端middleware公开所有与身份验证相关的 API 路由(如登录、注册、注销等)。
  • 最后,您需要提供connectionURISuperTokens 核心的(位置)。为了快速开始,您可以提供它https://try.supertokens.com(这是我们为演示目的而托管的核心)。

成功设置服务器后,您现在可以尝试在前台注册。

会话管理

在/src/views/HomeView.vue文件中,我们将检查用户是否经过身份验证并有条件地呈现模板。对于经过身份验证的用户,我们可以向他们显示一个注销按钮,其中包含有关其会话的信息(例如他们的userId)。对于未经身份验证的用户,我们可以向他们显示一个按钮以路由到该/auth页面。

Vue.js 组件

<script lang="ts">

import * as Session from "supertokens-web-js/recipe/session";

export default {

    data() {

        return {

            session: false,

            userId: "",

        };

    },

    mounted() {

        this.getUserInfo();

    },

    methods: {

        redirectToLogin() {

            window.location.href = "/auth";

        },

        async getUserInfo() {

            this.session = await Session.doesSessionExist();

            if (this.session) {

                this.userId = await Session.getUserId();

            }

        },

        async onLogout() {

            await Session.signOut();

            window.location.reload();

        },

    },

};

</script>



<template>

    <main>

        <div class="body">

            <h1>Hello</h1>



            <div v-if="session">

                <span>UserId:</span>

                <h3>{{ userId }}</h3>



                <button @click="onLogout">Sign Out</button>

            </div>

            <div v-else>

                <p>

                    Visit the <a href="https://supertokens.com">SuperTokens tutorial</a> to learn how to build Auth

                    under a day.

                </p>

                <button @click="redirectToLogin">Sign in</button>

            </div>

        </div>

    </main>

</template>

要加载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:

 

 

SuperTokens 核心设置

在进行后端设置时,我们将
https://try.supertokens.com其connectionURI用作核心。这是一个由 SuperTokens 团队托管的演示核心实例。您可以随意使用它,但是当您致力于使用 SuperTokens 时,您应该切换到核心的自托管或托管版本。

结论

总而言之,我们使用 SuperTokens 提供的 ReactJS SDK 来展示我们的 Vue 应用程序的预构建登录 UI。我们还优化了包大小,以便仅为与身份验证相关的路由加载 ReactJS SDK。有用的链接:

  • 示例 Vue 应用程序
  • 配方/身份验证方法列表


Tags: Vuejs   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
如何在 Vuejs 中使用 Supertokens 的预构建 UI
构建自己的身份验证服务可能很乏味、复杂且耗时。为了节省时间,开发人员经常求助于使用第三方身份验证服务进行身份验证。这篇文章将指导您如何使用 SuperTokens 向 VueJS 应...【详细内容】
2022-08-18  Search: Vuejs  点击:(346)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(12)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(11)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(14)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(33)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(69)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(81)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(38)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
站内最新
站内热门
站内头条