在Predix App Stater中完成用户鉴权

在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)

在之后的设置中我们会用到这些字段。

设置鉴权

1. 安装好Predix Web App Starter，并在本地运行。
2. App启动以后，当我们访问http://localhost:5000/secure的时候，你会看到提示当前页面无法访问。
3. 在server目录下，打开localConfig.json并找到以下字段:
   
   • uaaURL
   • base64ClientCredential
   • loginBase64ClientCredential

4. 把这些字段替换为:

   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=="
     ...

验证鉴权

1. localConfig.json配置完成后，我们的应用会自动重启来使配置生效。如果没有自动重启，请在终端中输入rs。
2. 这个应用默认对所有的路由都要求用户登录访问。当你访问http://localhost:5000的时候，会被重定向到UAA的登录页面，登录成功之后，会返回到http://localhost:500的页面。
3. 当你点击右上角的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'))
);

1. 删除 ‘/’ 路由中的passport中间件， 这样Express就不会默认保护所有路由。修改之后的代码：

   app.use('/', express.static(path.join(__dirname, process.env['base-dir'] ? process.env['base-dir'] : '../public')));

2. 应用自动重新启动后，你可以不用登录久访问http://localhost:5000/#/about了

3. 访问/secure路由，页面会提示Unauthorized而不是找不到页面。这是因为这个路由已经被定义为一个受保护的路由，而你当前还没有登录。
4. 访问/login路由，你会被重定向到UAA登录页面。
5. 输入用户名密码成功登录后，会被重定向到/#/rmd，并成功显示数据。
6. 再次访问/secure路由，此时页面会显示This is a sample secure route。这是因为此时我们已经在登录状态，访问已经被授权了。
7. 再次访问/logout，此时我们的session又被结束。
8. 再次访问/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.