作者：唐翊國，開發者生態資深經理，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.<zone id>.admin |
|
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.<zone id>.admin 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的內容和相關活動。