在本文中，我們將研究使用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應用程序中定義環境變量的更多信息。

我們將在.env文件中存儲通用的應用程序設置，例如cognito重定向URI，注銷URI和.env一些本地設置。 .env。*。local和.env.local文件從git中被忽略。 因此，您不必將本地設置提交到版本控制。

# 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）集成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。