将Amazon Cognito与单页面应用程序(Vue.js)集成
在本文中,我们将研究使用OAuth协议通过Amazon Cognito对单页应用程序(使用Vue.js构建)进行身份验证。 在上一篇文章中,我们将服务器端应用程序与Amazon Cognito集成在一起。
搭建单页应用程序
我们将使用vue-cli创建一个空的Vuejs应用程序。 可以按照此处的说明安装Vue CLI。
让我们通过发出以下命令来创建一个名为aws-cognito-spa-demo
的空应用程序:
vue create aws-cognito-spa-demo
系统将提示您选择插件
创建应用程序后,您可以导航到该目录并发出命令以运行该应用程序
cd aws-cognito-spa-demo npm instal npm run serve
您将在http:// localhost:8080运行该应用程序
安装其他依赖项
我们将安装用于该应用程序的必需节点软件包:
npm install --save amazon-cognito-auth-js npm install --save amazon-cognito-identity-js npm install --save vue-router npm install --save axios
在Amazon Cognito中创建新的App Client
我们将通过Amazon Cognito控制台创建一个名为test-spa-client
的新App客户test-spa-client
,如下所示:
通过提供回调URL,注销URL,允许的OAUth流和OAuth范围的值,导航到“应用程序客户端设置”以更新创建的客户端的设置:
我们使用隐式授予作为SPA应用程序的OAuth流。
创建环境变量
我们将与Amazon Cognito相关的设置存储在属性文件中,并且Vue CLI将在应用程序运行时使其在环境变量中可用。 在此处可以找到有关在Vue JS应用程序中定义环境变量的更多信息。
我们将在
文件中存储通用的应用程序设置,例如cognito重定向URI,注销URI和.env
一些本地设置。 .env。*。local和.env.local文件从git中被忽略。 因此,您不必将本地设置提交到版本控制。.env
# In .env VUE_APP_COGNITO_REDIRECT_URI=http: //localhost:8080/login/oauth2/code/cognito VUE_APP_COGNITO_REDIRECT_URI_SIGNOUT=http: //localhost:8080/logout VUE_APP_APP_URL=http: //localhost:8080
然后是.env.local中的以下内容:
VUE_APP_COGNITO_USERPOOL_ID=<cognito userpool id> VUE_APP_COGNITO_APP_DOMAIN=<cognito app domain> VUE_APP_COGNITO_CLIENT_ID=<app client id>
创建用户信息存储
我们将使用全局JSON对象存储登录的用户信息。 这是使用Vuex的另一种方法。 让我们在src/app/user-info-store.js
创建JSON对象:
var state = { cognitoInfo: {}, loggedIn: false , loadingState: true , errorLoadingState: false } function setLoggedIn(newValue) { state.loggedIn = newValue; } function setLoggedOut() { state.loggedIn = false ; state.cognitoInfo = {}; } function setCognitoInfo(newValue){ state.cognitoInfo = newValue; } export default { state: state, setLoggedIn: setLoggedIn, setLoggedOut: setLoggedOut, setCognitoInfo: setCognitoInfo }
Amazon Cognito API的包装
让我们为Amazon Cognito API创建包装器src/app/auth.js
,这将简化诸如构建CognitoAuth
对象,登录和注销的操作:
/* eslint-disable */ {CognitoAuth, StorageHelper} from 'amazon-cognito-auth-js' import {CognitoAuth, StorageHelper} from ; IndexRouter from '../router/index' import IndexRouter from ; UserInfoStore from './user-info-store' import UserInfoStore from ; UserInfoApi from './user-info-api' import UserInfoApi from ; const CLIENT_ID = process.env.VUE_APP_COGNITO_CLIENT_ID; const APP_DOMAIN = process.env.VUE_APP_COGNITO_APP_DOMAIN; const REDIRECT_URI = process.env.VUE_APP_COGNITO_REDIRECT_URI; const USERPOOL_ID = process.env.VUE_APP_COGNITO_USERPOOL_ID; const REDIRECT_URI_SIGNOUT = process.env.VUE_APP_COGNITO_REDIRECT_URI_SIGNOUT; const APP_URL = process.env.VUE_APP_APP_URL; var authData = { ClientId : CLIENT_ID, // Your client id here AppWebDomain : APP_DOMAIN, TokenScopesArray : [ 'openid' , 'email' ], RedirectUriSignIn : REDIRECT_URI, RedirectUriSignOut : REDIRECT_URI_SIGNOUT, UserPoolId : USERPOOL_ID, } var auth = new CognitoAuth(authData); auth.userhandler = { onSuccess: function(result) { console.log( "On Success result" , result); UserInfoStore.setLoggedIn( true ); UserInfoApi.getUserInfo().then(response => { IndexRouter.push( '/' ); }); }, onFailure: function(err) { UserInfoStore.setLoggedOut(); IndexRouter.go({ path: '/error' , query: { message: 'Login failed due to ' + err } }); 'Login failed due to ' + err } }); } }; function getUserInfoStorageKey(){ var keyPrefix = 'CognitoIdentityServiceProvider.' + auth.getClientId(); var tokenUserName = auth.signInUserSession.getAccessToken().getUsername(); var userInfoKey = keyPrefix + '.' + tokenUserName + '.userInfo' ; return userInfoKey; } var storageHelper = new StorageHelper(); var storage = storageHelper.getStorage(); export default { auth: auth, login(){ auth.getSession(); }, logout(){ if (auth.isUserSignedIn()) { var userInfoKey = this .getUserInfoStorageKey(); auth.signOut(); storage.removeItem(userInfoKey); } }, getUserInfoStorageKey, }
从Amazon Cognito获取用户信息
身份验证之后,我们可以使用访问令牌来获取有关登录用户的信息。为此,我们必须向端点发出GET请求: https://<app domain>/oauth2/userInfo
。 我们在src/app/user-info.js
创建了一个实用程序方法getUserInfo()
,如下所示:
axios from 'axios' import axios from ; auth from './auth' import auth from ; export default { getUserInfo(){ var jwtToken = auth.auth.getSignInUserSession().getAccessToken().jwtToken; const USERINFO_URL = ' https:// ' +auth.auth.getAppWebDomain() + '/oauth2/userInfo' ; var requestData = { headers: { 'Authorization' : 'Bearer ' + jwtToken } } return axios.get(USERINFO_URL, requestData).then(response => { return response.data; }); } }
上面部分编写的Cognito包装器已使用此API。
创建Vue组件
让我们为以下目的创建一些Vue组件:
- 显示已登录的用户信息
- 显示注销成功
- 错误处理组件
我们将使用Vue路由器将URL路径映射到Vue组件。 组件定义如下所示:
Home
组件
<template> <div class = "row" > <div class = "col" > <h3>Welcome, </h3> <div class = "alert alert-info" > {{userInfo}} </div> <router-link to= "/logout" > Logout </router-link> </div> </div> </template> <script> UserInfoStore from '../app/user-info-store' import UserInfoStore from ; export default { name: 'Home' , data: function() { return { userInfo: UserInfoStore.state.cognitoInfo } } } </script> <style> </style>
LogoutSuccess
组件:
<template> <div class = "row" > <div class = "col" > <h2>Logged Out successfully</h2> <router-link to= "/login" >Login</router-link> </div> </div> </template> <script> export default { mounted: function(){ } } </script>
错误组件:
<template> <div class = "alert alert-danger" > {{message}} </div> </template> <script> export default { data: function(){ return { message: "" } }, mounted(){ this .message = this .$route.query.message; } } </script>
设置路由器
如前一节所述,我们将使用Vue Router将URL路径映射到Vue组件。 我们将在router/index.js
设置路由器配置,如下所示:
/* eslint-disable */ Vue from 'vue' import Vue from Router from 'vue-router' import Router from Home from '@/components/Home' import Home from auth from '../app/auth' import auth from ; LogoutSuccess from '@/components/LogoutSuccess' import LogoutSuccess from ; UserInfoStore from '../app/user-info-store' import UserInfoStore from ; UserInfoApi from '../app/user-info-api' import UserInfoApi from ; ErrorComponent from '@/components/Error' import ErrorComponent from ; Vue.use(Router) function requireAuth(to, from, next) { if (!auth.auth.isUserSignedIn()) { UserInfoStore.setLoggedIn( false ); next({ path: '/login' , query: { redirect: to.fullPath } }); } else { UserInfoApi.getUserInfo().then(response => { UserInfoStore.setLoggedIn( true ); UserInfoStore.setCognitoInfo(response); next(); }); } } export default new Router({ mode: 'history' , base: '/' , routes: [ { path: '/' , name: 'Home' , component: Home, beforeEnter: requireAuth }, { path: '/login' , beforeEnter(to, from, next){ auth.auth.getSession(); } }, { path: '/login/oauth2/code/cognito' , beforeEnter(to, from, next){ var currUrl = window.location.href; //console.log(currUrl); auth.auth.parseCognitoWebResponse(currUrl); //next(); } }, { path: '/logout' , component: LogoutSuccess, beforeEnter(to, from, next){ auth.logout(); next(); } }, { path: '/error' , component: ErrorComponent } ] })
我们利用路由对象的beforeEnter
属性添加渲染组件所需的所有先决条件。 然后在此属性中,检查用户是否使用我们创建的Cognito包装器登录。 因此,对于需要保护的路径,我们可以定义beforeEnter
属性。
创建的默认应用程序具有一个App.vue
组件,它将成为我们的根组件。 我们使用<router-view/>
标记表示此处HTML将基于路由器配置中路径解析到的组件。
因此,我们的App.vue
版本如下所示:
<template> <div id= "app" > <img alt= "Vue logo" src= "./assets/logo.png" > <div class = "contents" > <router-view/> </div> </div> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir' , Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
然后,我们更新src/main.js
以引用包含路由器配置的目录,如下所示:
Vue from 'vue' import Vue from App from './App.vue' import App from router from './router' import router from Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount( '#app' )
运行应用程序
您可以通过发出以下命令来运行该应用程序: npm run serve
。 导航到localhost:8080将带您进入Cognito登录屏幕:
输入您已在用户池中注册的用户的用户名和密码,甚至可以注册一个新用户。 登录后,您将被重定向回Vue JS应用:
注销链接将注销用户。
完整的代码可以在Github仓库中找到 。
翻译自: https://www.javacodegeeks.com/2019/04/amazon-cognito-single-page-application-vue.html
将Amazon Cognito与单页面应用程序(Vue.js)集成相关推荐
- cognito_将Amazon Cognito与单页面应用程序(Vue.js)集成
cognito 在本文中,我们将研究使用OAuth协议通过Amazon Cognito对单页应用程序(使用Vue.js构建)进行身份验证. 在上一篇文章中,我们将服务器端应用程序与Amazon Cog ...
- 什么是单页面应用程序
原文:Vue系列(1):单页面应用程序 前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:SPA.单个 HTML 文件.全靠 JS 操作.Virtual DOM.hash/history a ...
- 通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...
- 通过Blazor使用C#开发SPA单页面应用程序(1)
2019年9月23--25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
- 单页面应用程序的优缺点
一,优点 SPA 单页面应用程序最显著的 3 个优点如下: ① 良好的交互体验 单页应用的内容的改变不需要重新加载整个页面,只有一个HTML页面 因为没有页面之间的跳转,不会出现"白屏现象& ...
- 【Web API系列教程】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)
前言 在传统的web应用程序中,客户端(浏览器)通过请求页面来启动与服务器的通信.然后服务器处理该请求,并发送HTML页面到客户端.在随后页面上的操作中--例如,用户导航到一个链接或提交一个包含数据的 ...
- 全面解析单页面应用程序是什么
单页Web应用是当今网站开发技术的弄潮儿,很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也如雨后春笋般涌现在人们的面前,如Gmail.Evernote.Tre ...
- 从零开始学习小程序1-1开发一个单页面小程序
1,在本地电脑中创建一个文件夹"test",2,打开微信开发者工具 3,新建项目文件test,按以下步骤填写完整4,初始页面是这样的5,点开app.json页面,删掉原始代码,配置 ...
- 通过Blazor使用C#开发SPA单页面应用程序(2)
今天我们尝试创建一个默认的Blazor应用. .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应的VS版本 ...
最新文章
- 如何利用OpenCV寻找轮廓的中心?
- 流媒体服务器 客户端播放器方案推荐
- Istio:一个用于微服务间通信的服务网格开源项目
- SAP发票校验前收货后是否能更改物料价格
- Windows系统自带WMI应用的查询使用
- python操作xpath 0227
- redis应用之——关注、被关注
- 【Spring】Spring 依赖注入之手动注入
- python numpy逆_关于python:为什么numpy和scipy中的矩阵求逆函数对于大的二次矩阵返回不同的结果?...
- 取消文件与svn服务器的关联
- Linux异常进程kill无效的解决办法
- DLL错误之——无法加载DLL***.dll:找不到指定的模块(异常来自HRESULT:0x8007007E)问题的终极感悟
- vs2003远程调试方法
- python如何与access配合使用_使用Python对Access读写操作方法详解
- plot3D | 三维数据绘图(3):mesh函数、surf3D函数、spheresurf3D函数
- Oracle ADR(Automatic Diagnostic Repository)介绍
- java一个式子开根号语句_[基础篇]-基础知识整理-03-JAVA中的运算符
- 2345浏览器卸载之后如何找回收藏夹中的内容?
- 均方距离计算公式_Excel2013中通过公式计算方差与均方差来反映数据的偏移程度...
- Python常用函数及常用库整理
热门文章
- 面试官:为什么 Spring Boot 的 jar 可以直接运行
- 影响程序员生涯的三个错误观念,你千万不要犯
- Java:对double值进行四舍五入,保留两位小数的几种方法
- laravel部署在linux出现404 not found
- 如何将HBuilder中的项目Push至Gitee中!
- 使用Servlet上传多张图片——Dao层(ProductInfoDao.java)
- java开发可以转什么软件有哪些_转行开发软件Java编程必须会什么
- 打开数据库_数据库客户端navicat遇到问题怎么办?
- No primary or default constructor found for interface java.util.List
- 系统架构设计师考试 重要的部分