定制UAA登录界面
作者：唐翊国，开发者生态资深经理，GE数字集团
23年工作经验，长期在杜邦、欧文斯科宁、庄信万丰、通用电气医疗等从事制造业信息化工作，规划、实施了大量MES、SAP ERP、LIMS、BPM等项目，积累了丰富的制造业数字化转型经验。
如果您还没有Predix试用帐号，请访问
https://supportcentral.ge.com/esurvey/GE_survey/takeSurvey.html?form_id=18446744073709715720
申请。请务必准确提供您的信息，我们会以邮件方式通知您注册结果。
如果您使用Windows操作系统，请参考http://blog.csdn.net/predixcn/article/details/53967673系列文章设置您的开发环境。
如果您使用Linux操作系统，请参考http://blog.csdn.net/predixcn/article/details/54093234系列文章设置您的开发环境。
本文将以Python语言为例，教您如何定制自己的UAA登录界面。
当您创建好一个UAA服务实例后，默认的登录界面是这样的：
当您为您的客户或者您的公司开发工业互联网应用时，在登录界面上出现特定的欢迎信息或者产品/公司Logo是一个自然的需求。
现在，Predix云平台已经提供了定制UAA登录界面的功能，其实质就是通过调用特定的UAA Rest API来实现对UAA某些信息的修改。
1. 准备工作
在登录界面里，产品/公司Logo图片是一个重要元素，本文准备了一个的简单的图片作为例子：
需要把这个图片转化为一个Base64编码的字符串，这个可以利用https://www.base64-image.de/ 在线工具完成，我们会得到
iVBORw0KGgoAAAANSUhEUgAAAP4AAACFCAIAAAD0EdIEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAUASURBVHhe7dzLUeNAGEXhiWXimSIUdoRBAqTAagKg2LIgATZsqCIAEmBMWTJSt9TocX+1NPd8pR1gtV1Hcrcs8+sTsET6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MLVl+k83f//8DtluH5pdzLK38ezDx/1V+nTCtuenZqc1kH7EduT032+zpxO31XyhdjXhGW3x5r35jW3tbTxbeH25Tp7s1/Z4/9r8vOfhOfvN8ZqHfvn67qP56fZ2NtcfOuXU7Gxv4wn3dvfYe7JXL2/NT4YMHCc/zWGSA6Dii7m3ZW5+oq07edjbeKL1nm+5+y/5qWHC9L1b/8+7CEP6ZWbpd1MemeT0LEq/t5KespcYpF/mlX53AjNpKrIs/d6Jv9rrSfplXul/FznxZLw0/c6Jv9pKl/TLrNL/frJTV5+L0+8cZrVWuqRf5pT+5Uw8ff69Iv3L39Za6ZJ+mVH6l4n+jBbXpH+5kFpppUv6ZUbptzOQOZPvVelfDrY6Lynpl/mk356D57S7Mv12ilVnpUv6ZTbptxP9eYvOlem3x1uVlS7pl9mk30Q889mtTb+d88z8KwnSL7NJf5nV6VdE+mWkX0T6OqR/KKSvQ/qHQvo6pH8opK9D+odC+jqkP2rgK1HtVu0LH6SvQ/qZPK/CtnF5pK9D+h3dbzOdt6E7vbrf9ztv270JkL4O6TfSoH9KKpsObTJO0tch/ZP03yJMvsUlGW38bWGkr0P6Sfdz81355zORvo55+pJwkzFHDpj0dazTT+b3y2/lTdbHcV+DIn0d4/STjNY1lKx6o675kL6ObfrJjtbP0ZMHjBk26euYpp9emlQEFPGYKdLX8Uw/2Yvoskz6iVjA1R7S13FMPz09y1al6ecD+i5JX8cw/XQXwiVp+Ee8pK/jl35Wj/LfE4Q++Anp69iln918pp2RZ+PXpkn6Om7pZ9Px6MfXfrxF+jpm6U+7LXmF/NCSvquQvo5Z+vHp5Hfzh64lSH8x0if9jZB+Wex4souP+pttYndB+jqkT/obIf0y0i8ifR3SJ/2NkH5Z8HiydDZIn2XuGemXbZ2+PB2u8Iwh/bLg8eQfaYWnz0daDdIvix5P9vjhn+Ye7F0rDumXhY8nOysf6tAifR279LNlqHRCkk2oxMto0texSz+vM3IZqv6OIunr+KWfz3l09aSPLF5IkL6SY/ppQLJA08Er30/OSF/HMv3sOoym0agjqoP0dTzTzxpSBJTMdvSn/BPS13FNX15qwLE0gPR1fNNPpz2r5ifJDCpszKSv45x+dqFzaUb9zwrUFzS7SF/HO/2T1fVv1/0J6cvkL2XQ+myiKuNJ6p8z89m0+4G7ME5b3VPVDLtKPz/FNlul+iuOJ9n1lIj7fxJxKbMv/yZAux2j/i3THy1p9bbstd7beFJ5W8N34GRvTSFHZnbDxfSt5vv2ONKP2JSnvfGT68Am/5LXN9JHLYVjILD4/xfpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpw9Ln5z+TScD3aLazhQAAAABJRU5ErkJggg==
2. 获得当前UAA的配置信息
首先要得到UAA的默认配置信息，这是通过以下GET调用来实现的：
对应的入口和请求头以及相应的返回结果是：
URL: https://your-uaa-instance-id.predix-uaa.run.aws-usw02-pr.ice.predix.io
| Request |
GET /identity-zones |
| Request Header |
Authorization: Bearer Token containing zones.write or zones. |
| Response code |
200 OK |
返回结果是JSON格式：
{
"id": "86884ce9-3bdc-4f5e-b2ed-61a4e7424b29",
"subdomain": "86884ce9-3bdc-4f5e-b2ed-61a4e7424b29",
"config": {
"clientSecretPolicy": {
…………
"idpDiscoveryEnabled": false,
"accountChooserEnabled": false
},
"name": "86884ce9-3bdc-4f5e-b2ed-61a4e7424b29",
"version": 0,
"created": 1502236322723,
"last_modified": 1502236322723
}
3. 设置自己的定制信息
根据http://slate-update.identity.cf-app.com/#creating-an-identity-zone和 https://docs.predix.io/en-US/content/service/security/user_account_and_authentication/using-uaa-for-application-login-window里的介绍，我们需要在上一步得到的返回结果里，在config配置部分的末尾增加一个新的branding元素，
"accountChooserEnabled": false,
"branding":{
"companyName": "your companyname",
"productLogo": "base64 encodedPNG file",
"squareLogo":" base64 encoded PNG file ",
"footerLegalText": "yourfooter information",
"footerLinks": {
"Support":"mailto:***@yourcompany.com"
}
再通过以下PUT调用来更新UAA配置信息，
对应的入口和请求头以及请求体是：
URL: https://your-uaa-instance-id.predix-uaa.run.aws-usw02-pr.ice.predix.io
| Request |
PUT /identity-zones/{id} |
| Request Header |
Authorization: Bearer Token containing zones.write or zones. accept: application/json content-type: application/json |
| Request body |
包含了branding元素的JSON字符串 |
| Response code |
200 OK |
由于涉及UAA的配置信息，以上操作都要使用UAA的admin 客户端来完成。
完整的Python代码如下：
import requests
import json
#Quit when something is wrong
def quit_error(response):
exit("Received a {} response. :(\nContent:{}".format(response.status_code, response.content))
#Get admin access token
data ={'grant_type':'client_credentials','client_id':'admin','client_secret':'*****','response_type':'token'}
uaa_id ='86884ce9-3bdc-4f5e-b2ed-61a4e7424b29'
uaa_uri = 'https://' + uaa_id +'.predix-uaa.run.aws-usw02-pr.ice.predix.io'
response = requests.post(uaa_uri +'/oauth/token', data=data)
if response.status_code != 200:
quit_error(response)
access_token =response.json()['access_token']
#Get identity-zones
identity_zones_uri = uaa_uri +'/identity-zones'
headers = {'Authorization': 'Bearer ' +access_token}
response = requests.get(identity_zones_uri,headers=headers)
if response.status_code != 200:
quit_error(response)
uaa_zones = response.json()
#Setup new configuration
foot = {'Support':'mailto:[email protected]'}
base64_image = 'iVBORw0KGgoAAAANSUhEUgAAAP4AAACFCAIAAAD0EdIEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAUASURBVHhe7dzLUeNAGEXhiWXimSIUdoRBAqTAagKg2LIgATZsqCIAEmBMWTJSt9TocX+1NPd8pR1gtV1Hcrcs8+sTsET6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MEX6MLVl+k83f//8DtluH5pdzLK38ezDx/1V+nTCtuenZqc1kH7EduT032+zpxO31XyhdjXhGW3x5r35jW3tbTxbeH25Tp7s1/Z4/9r8vOfhOfvN8ZqHfvn67qP56fZ2NtcfOuXU7Gxv4wn3dvfYe7JXL2/NT4YMHCc/zWGSA6Dii7m3ZW5+oq07edjbeKL1nm+5+y/5qWHC9L1b/8+7CEP6ZWbpd1MemeT0LEq/t5KespcYpF/mlX53AjNpKrIs/d6Jv9rrSfplXul/FznxZLw0/c6Jv9pKl/TLrNL/frJTV5+L0+8cZrVWuqRf5pT+5Uw8ff69Iv3L39Za6ZJ+mVH6l4n+jBbXpH+5kFpppUv6ZUbptzOQOZPvVelfDrY6Lynpl/mk356D57S7Mv12ilVnpUv6ZTbptxP9eYvOlem3x1uVlS7pl9mk30Q889mtTb+d88z8KwnSL7NJf5nV6VdE+mWkX0T6OqR/KKSvQ/qHQvo6pH8opK9D+odC+jqkP2rgK1HtVu0LH6SvQ/qZPK/CtnF5pK9D+h3dbzOdt6E7vbrf9ztv270JkL4O6TfSoH9KKpsObTJO0tch/ZP03yJMvsUlGW38bWGkr0P6Sfdz81355zORvo55+pJwkzFHDpj0dazTT+b3y2/lTdbHcV+DIn0d4/STjNY1lKx6o675kL6ObfrJjtbP0ZMHjBk26euYpp9emlQEFPGYKdLX8Uw/2Yvoskz6iVjA1R7S13FMPz09y1al6ecD+i5JX8cw/XQXwiVp+Ee8pK/jl35Wj/LfE4Q++Anp69iln918pp2RZ+PXpkn6Om7pZ9Px6MfXfrxF+jpm6U+7LXmF/NCSvquQvo5Z+vHp5Hfzh64lSH8x0if9jZB+Wex4souP+pttYndB+jqkT/obIf0y0i8ifR3SJ/2NkH5Z8HiydDZIn2XuGemXbZ2+PB2u8Iwh/bLg8eQfaYWnz0daDdIvix5P9vjhn+Ye7F0rDumXhY8nOysf6tAifR279LNlqHRCkk2oxMto0texSz+vM3IZqv6OIunr+KWfz3l09aSPLF5IkL6SY/ppQLJA08Er30/OSF/HMv3sOoym0agjqoP0dTzTzxpSBJTMdvSn/BPS13FNX15qwLE0gPR1fNNPpz2r5ifJDCpszKSv45x+dqFzaUb9zwrUFzS7SF/HO/2T1fVv1/0J6cvkL2XQ+myiKuNJ6p8z89m0+4G7ME5b3VPVDLtKPz/FNlul+iuOJ9n1lIj7fxJxKbMv/yZAux2j/i3THy1p9bbstd7beFJ5W8N34GRvTSFHZnbDxfSt5vv2ONKP2JSnvfGT68Am/5LXN9JHLYVjILD4/xfpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpwxTpw9Ln5z+TScD3aLazhQAAAABJRU5ErkJggg=='
brandinig = {'companyName':'EagleTang','productLogo': base64_image,'squareLogo': base64_image,'footerLegalText': 'Eagle Tang All rights reserved.','footerLinks': foot }
uaa_zones[0]['name'] = "GE IndustrialInternet"
uaa_zones[0]['config']['branding'] =brandinig
json_data = json.dumps(uaa_zones[0])
#update identity-zones/id
headers['accept'] = 'application/json'
headers['content-type'] ='application/json'
response = requests.put(identity_zones_uri+ '/' + uaa_id, data=json_data, headers=headers)
if response.status_code != 200:
quit_error(response)
print 'Change UAA configurationsuccessfully!'
在命令行里运行
python configuaa.py
用浏览器访问https://ba67c2f3-3af7-436a-9c40-d86da25600b7.predix-uaa.run.aws-usw02-pr.ice.predix.io/login
一个新的UAA登录界面就完成了！
注意以下细节，浏览器标签页的图标就是squareLogo部分，标题companyName部分
在登录页面里，产品/公司Logo是productLogo部分，欢迎信息是name部分
在页脚部分，显示的是footerLegalText和foot部分。
注：Predix的官方文档https://github.com/GESoftware-CF/uaa/blob/master/docs/UAA-APIs.rst 对UAA Rest API做了详细介绍。
在使用中您有任何问题，请访问我们的论坛http://bbs.csdn.net/forums/GEPredix
GE数字集团的技术专家们会在线回答您的问题。
也请访问我们在CSDN的Predix专区http://predix.csdn.net/ 了解更多Predix的内容和相关活动。