在Predix App Stater中完成用户鉴权
来源:互联网 发布:淘宝药品货到付款 8.1 编辑:程序博客网 时间:2024/05/18 01:36
在Predix App Stater中完成用户鉴权
作者: 虞路易,前端开发工程师,GE数字集团
在本章中会介绍如何在Predix App Starter中启用基于Predix UAA服务的用户鉴权。同时在本地和云端运行我们的app。
前置准备
完成UAA的配置
环境
确保本机已经安装了
- Cloud Foundry CLI
- Git
- Node.js
你可以通过 node -v
来确认Node.js已经安装。
你也可以通过脚本来自动安装开发环境
这个脚本会安装node, npm 还有 bower
在Mac OSX 上,请在终端里执行
bash <( curl https://raw.githubusercontent.com/PredixDev/local-setup/master/setup-mac.sh ) --cf --git --nodejs
在Windows上,请在终端里用Administrator权限执行
@powershell -Command "(new-object net.webclient).DownloadFile('https://raw.githubusercontent.com/PredixDev/guided-tutorials/master/simple-html-page.bat','%TEMP%\simple-html-page.bat')" && "%TEMP%\simple-html-page.bat" /cf /git /nodejs
介绍
多数工业网络应用会对用户进行鉴权来保证敏感信息的安全访问。通过Predix Web App Starter和Predix UAA 服务, 我们可以很快的搭建一个安全的前端应用。
你可以访问Predix Web App Starter Github仓库来查看每一步的代码。
流程
完成UAA配置后,我们会得到UAA的以下信息:
- URL
- clientId
- secret
- username/password (credentials)
在之后的设置中我们会用到这些字段。
设置鉴权
- 安装好Predix Web App Starter,并在本地运行。
- App启动以后,当我们访问http://localhost:5000/secure的时候,你会看到提示当前页面无法访问。
- 在server目录下,打开localConfig.json并找到以下字段:
- uaaURL
- base64ClientCredential
- loginBase64ClientCredential
把这些字段替换为:
uaaURL
替换为从UAA获得的URL
base64ClientCredential
这是一个由’:’通过Base64编码而成的字符串。其中clientId是我们设置的可以访问后端微服务的client ID。secret是其对应的密码。
在Mac或者Unix环境下,你可以执行以下命令(记得把clientId和secret替换为你从UAA获取的相应字段):echo -n clientId:secret | base64
在Windows环境下,你可以通过certutil来生成对应的base64ClientCredential
loginBase64ClientCredential
这是一个由’:’通过Base64编码而成的字符串。其中clientId是我们设置的来验证用户登录的client ID。secret是其对应的密码。
以下是一个完成配置的server/localConfig.json的例子:
... "uaaURL": "https://162665f2-e477-488a-93d1-bb33ccb3d568.predix-uaa.run.aws-usw02-pr.ice.predix.io", "base64ClientCredential": "YXBwX2NsaWVudF9pZDpzZWNyZXQ=", "loginBase64ClientCredential": "bG9naW5fY2xpZW50X2lkOnNlY3JldA==" ...
验证鉴权
- localConfig.json配置完成后,我们的应用会自动重启来使配置生效。如果没有自动重启,请在终端中输入rs。
- 这个应用默认对所有的路由都要求用户登录访问。当你访问http://localhost:5000的时候,会被重定向到UAA的登录页面,登录成功之后,会返回到http://localhost:500的页面。
- 当你点击右上角的Sign Out的时候,会跳转到/logout路由,并清楚你的session再重定向回你的应用。因为应用的所有路由都需要登录访问,你回再次被重定向到UAA的登录页面。
仅保护特定的路由
有时候,只有一部分路由需要登录后访问,为了实现这个功能,我们需要修改server/app.js的以下代码
//Use this route to make the entire app secure. This forces login for any path in the entire app.app.use('/', passport.authenticate('main', { noredirect: false //Don't redirect a user to the authentication page, just show an error }), express.static(path.join(__dirname, process.env['base-dir'] ? process.env['base-dir'] : '../public')));
删除 ‘/’ 路由中的passport中间件, 这样Express就不会默认保护所有路由。修改之后的代码:
app.use('/', express.static(path.join(__dirname, process.env['base-dir'] ? process.env['base-dir'] : '../public')));
应用自动重新启动后,你可以不用登录久访问http://localhost:5000/#/about了
- 访问/secure路由,页面会提示Unauthorized而不是找不到页面。这是因为这个路由已经被定义为一个受保护的路由,而你当前还没有登录。
- 访问/login路由,你会被重定向到UAA登录页面。
- 输入用户名密码成功登录后,会被重定向到/#/rmd,并成功显示数据。
- 再次访问/secure路由,此时页面会显示This is a sample secure route。这是因为此时我们已经在登录状态,访问已经被授权了。
- 再次访问/logout,此时我们的session又被结束。
- 再次访问/secure路由,我们再次看到了Unauthorized。
部署到云端
通过之前的步骤,我们完成了怎么在本地环境对应用配置用户鉴权。最后,我们要把应用部署到云端。
我们首先要配置根目录下的manifest.yml, 取消sevices下面的注释,启用UAA service:
services - 你的UAA service实例的名字
在这个文件下,还需要配置clientId和base64ClientCredential,和刚才在localConfig.json里配置的一样。
env: base64ClientCredential: YXBwX2NsaWVudF9pZDpzZWNyZXQ= loginBase64ClientCredential: bG9naW5fY2xpZW50X2lkOnNlY3JldA==
最后在终端输入
gulp dist
来把这些配置文件打包到最后要部署发布的应用中。
之后再像正常部署应用一样把应用部署到Predix的云端。再在云端应用的url中重复上述步骤来验证用户鉴权已经生效.
如需更多支持或者帮助,请访问 https://www.predix.io/community.
- 在Predix App Stater中完成用户鉴权
- 在Predix搭建一个Express App
- 探究在APP中使用DownloadManager完成下载
- 在iPhone App中提示用户打分的代码
- APP开发流程实例讲解-儒释道网络电台八天开发全程-在Android Studio中完成界面设计
- Android在一个app中实现另一个app的自动安装,安装完成后自动打开(需Root)
- 在Windos的CMD中让用户选择:用Set 和 if 来完成
- 对于c#中,在完成自定义用户控件然后重新生成无效的可能解决办法。
- 完成用户列表Demo,使用plist当数据源,在TableView中显示plist的内容
- 在Predix上创建PostgreSQL数据服务
- 在Predix平台玩转C#
- 在Predix上运行Scala的HelloWorld
- 在Predix上创建邮件通知服务
- Build a Backend For Frontend (BFF) app in Predix
- 基于Predix开发app的设计思路1
- 基于Predix开发app的设计思路2
- kafka-storm-stater研究
- [IPhone] 如何在iphone app中提醒用户Rank或Review
- 腾讯消消乐 状压dp加普通dp
- 约瑟夫环
- php获取本周周一、周日时间,上周周一、周日时间,本月第一天,本月最后一天,上个月第一天,最后一天时间
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
- 彻底解决tap“点透”,提升移动端点击响应速度
- 在Predix App Stater中完成用户鉴权
- Animate.css让添加CSS动画像喝水一样容易
- JS+CSS简单实现DIV遮罩层显示隐藏
- 基于Bootstrap的炫酷jQuery slider插件
- Mac MySQL设置密码
- pigcms 微外卖下单加数量bug
- JS设置cookie、读取cookie、删除cookie
- mysql 批量修改表前缀
- JS鼠标事件大全 推荐收藏