Authentication providers
basictreeviewauthentication
Console
PMA.UI version: 2.43.3
AutoLogin
Authentication providers example.
Username: PMA_UI_demo
Password: PMA_UI_demo
Username: PMA_UI_demo
Password: PMA_UI_demo
authentication.html
1<!doctype >
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=10">
7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8
9 <!-- Include PMA.UI required libraries downloaded or from CDN -->
10 <script src="./pma.ui/jquery-3.1.0.js"></script>
11 <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
12
13 <!-- Include PMA.UI script & css -->
14 <script src="./pma.ui/pma.ui.js"></script>
15 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
16
17 <!-- Include custom script & css -->
18 <script src="./js/authentication.js"></script>
19 <link href="./css/authentication.css" type="text/css" rel="stylesheet">
20
21 <title>Authentication Providers</title>
22</head>
23
24<body>
25 <select id="loginType">
26 <option value="AutoLogin">AutoLogin</option>
27 <option value="SessionLogin">SessionLogin</option>
28 <option value="PromptLogin">PromptLogin</option>
29 <option value="CustomLogin">CustomLogin</option>
30 </select>
31 <!-- The element that will host the treeview -->
32 <div id="treeview"></div>
33</body>
34
35</html>authentication.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#treeview
10{
11 height: calc(100vh - 25px);
12}
authentication.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.2/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var treeviewElementSelector = "#treeview";
6var caller = "DemoPortal";
7var context = null;
8var provider = null;
9var tree = null;
10var sessionId = null;
11
12function createTree(type) {
13 console.log(type);
14 // Remove current authentication provider if exists
15 provider && context.removeAuthenticationProvider(provider, true);
16 // Reinitialize treeview if exists
17 tree && tree.signOut();
18
19 switch (type) {
20 case "SessionLogin":
21 console.log("SessionId: " + sessionId);
22 // Add a sessionlogin authentication provider
23 provider = new PMA.UI.Authentication.SessionLogin(context, [{ serverUrl: serverUrl, sessionId: sessionId }])
24 break;
25 case "PromptLogin":
26 // Add a promptlogin authentication provider
27 provider = new PMA.UI.Authentication.PromptLogin(context);
28 break;
29 case "CustomLogin":
30 // Add a customlogin authentication provider
31 provider = new PMA.UI.Authentication.CustomLogin(context, function (serverUrlfromTree, success, failure) {
32 if (serverUrlfromTree === serverUrl) {
33 console.log("Successful custom login!");
34 success(sessionId);
35 return true;
36 } else {
37 console.log("Unsuccessful custom login!");
38 failure({ Message: "Invalid credentials" });
39 return false;
40 }
41 });
42 break;
43 case "AutoLogin":
44 default:
45 // Add an autologin authentication provider
46 provider = new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
47 break;
48 }
49
50 // Create a tree view that will display the contents of PMA.core servers
51 tree = new PMA.UI.Components.Tree(context, {
52 servers: [
53 {
54 name: "PMA.core v2.x",
55 url: serverUrl,
56 }
57 ],
58 element: treeviewElementSelector,
59 });
60}
61
62function getSessionId() {
63 PMA.UI.Components.callApiMethod({
64 serverUrl: serverUrl,
65 method: PMA.UI.Components.ApiMethods.Authenticate,
66 httpMethod: "GET",
67 data: {
68 username: serverUsername,
69 password: serverPassword,
70 caller: caller,
71 },
72 success: function (http) {
73 var data = JSON.parse(http.responseText);
74 if (data) {
75 if (data.Success) {
76 sessionId = data.SessionId;
77 } else {
78 console.log(data.Reason);
79 }
80 }
81 },
82 failure: function (http) {
83 console.log(http);
84 },
85 });
86}
87
88jQuery(function () {
89 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
90
91 // Get sessionId from PMA.core
92 getSessionId();
93
94 // Create a context
95 context = new PMA.UI.Components.Context({ caller: caller });
96
97 // initialize tree with default AutoLogin
98 createTree("AutoLogin");
99
100 // On authentication provider change recreate tree
101 $("#loginType").on("change", async function () {
102 createTree(this.value);
103 });
104});