cognito_将Amazon Cognito与单页面应用程序(Vue.js)集成
cognito
在本文中,我们将研究使用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
cognito
cognito_将Amazon Cognito与单页面应用程序(Vue.js)集成相关推荐
- 将Amazon Cognito与单页面应用程序(Vue.js)集成
在本文中,我们将研究使用OAuth协议通过Amazon Cognito对单页应用程序(使用Vue.js构建)进行身份验证. 在上一篇文章中,我们将服务器端应用程序与Amazon Cognito集成在一 ...
- 什么是单页面应用程序
原文: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页面,删掉原始代码,配置 ...
- Vue中常见的性能优化,项目优化/单页面性能优化,Vue中六大优化方案
1.编码优化 1. 下里将所有的数据都放在data中,data中的教据都会增加getter和setter,会收集对应的watcher 2. vue在v-for时给每项元素绑定事件需要用事件代理 3. ...
最新文章
- Silverlight 5 Beta新特性博文索引
- UE4 移动平台游戏开发
- matlab与STK互联(不使用connect软件的互联)
- Windows系统端口占用,使用命令行查找并杀进程
- HTML5 ——《第二章—01》HTML5页面元素
- 红番茄(VS2017)两个注意点
- Mac系统怎样设置开机启动项
- CDN百科 | APP崩了和CDN有关系吗?
- 浅谈GPU虚拟化技术(四)- GPU分片虚拟化
- iOS滚动的导航条(仿网易新闻)
- 6、英飞凌-AURIX-TC3XX: PWM实验之使用 GTM -ATOM 实现
- 迎风破局·守正创新,2021未来商业生态链接大会暨第六届金陀螺奖颁奖典礼成功举办!...
- 大学STEM教育的技能水平和收获
- 2021国赛A题第三问 - 点关于三维直线的对称点 - 入射光的反射向量
- 短路保护、过载保护、零压保护的概念
- JavaGUI开发实践:登录界面模拟(连接数据库)
- java 键盘输入多种方法
- 创建你自己的Minecraft成就!
- Introduction of Annotation
- 课程笔记汇总(努力更新ing)
热门文章
- 牛客题霸 [子数组的最大累加和问题] C++题解/答案
- 牛客网【每日一题】4月28日题目精讲 美味菜肴
- CodeForces - 1189A ----Keanu Reeves
- 模板:广义二项式反演/广义容斥(组合数学)
- AT4352-[ARC101C] Ribbons on Tree【dp,容斥】
- jzoj6296-投票【期望dp,贪心】
- 【做题记录】[NOIP2016 普及组] 魔法阵
- 【DP】方格计数(nowcoder 20107-B)
- 【动态规划】城市交通
- MyEclipse生成Javadoc帮助文档