|
40 | 40 |
|
41 | 41 | <body> |
42 | 42 | <div id="swagger-ui"></div> |
| 43 | + <button id="custom-logout-button">Logout</button> |
43 | 44 |
|
44 | 45 | <script src="{% static 'swagger-ui-4.15.5-dist/swagger-ui-bundle.js' %}" charset="UTF-8"> </script> |
45 | 46 | <script src="{% static 'swagger-ui-4.15.5-dist/swagger-ui-standalone-preset.js' %}" charset="UTF-8"> </script> |
46 | 47 | <script> |
47 | 48 | window.onload = function() { |
48 | | - const ui = SwaggerUIBundle({ |
| 49 | + let ui; |
| 50 | + ui = SwaggerUIBundle({ |
49 | 51 | urls: [ |
50 | 52 | { |
51 | 53 | url: "{% static 'openapi.yaml' %}", |
|
60 | 62 | ], |
61 | 63 | layout: "StandaloneLayout", |
62 | 64 | requestInterceptor: (request) => { |
63 | | - const accessToken = localStorage.getItem('access_token'); |
64 | | - if (accessToken) { |
65 | | - request.headers['Authorization'] = `Bearer ${accessToken}`; |
| 65 | + if (ui) { |
| 66 | + const serverUrl = ui.specSelectors.specJson().toJS().servers[0].url; |
| 67 | + const accessToken = localStorage.getItem('access_token'); |
| 68 | + if (accessToken && request.url.startsWith(serverUrl)) { |
| 69 | + request.headers['Authorization'] = `Bearer ${accessToken}`; |
| 70 | + } |
66 | 71 | } |
67 | | - |
| 72 | + |
68 | 73 | return request; |
69 | 74 | }, |
| 75 | + onComplete: function() { |
| 76 | + initializeOauthData() |
| 77 | + addLogoutButton(); |
| 78 | + }, |
70 | 79 |
|
71 | 80 | oauth2RedirectUrl: window.location.origin + "/docs/oauth2-redirect" |
72 | 81 | }); |
|
83 | 92 | // Save OAuth2 details to localStorage |
84 | 93 | const serializedData = serializeObject(window.swaggerUIRedirectOauth2) |
85 | 94 | /** |
86 | | - * swaggerUIRedirectOauth2 contains information regarding oauth2 clientId, clientSecret etc. |
| 95 | + * swaggerUIRedirectOauth2 contains information regarding oauth2 clientId, clientSecret etc. |
87 | 96 | * This will be required by static/oauth2-redirect.html and will be deserialized there |
88 | 97 | */ |
89 | 98 | localStorage.setItem('swaggerUIRedirectOauth2', serializedData); |
90 | 99 | window.dispatchEvent(new Event('storage')); |
91 | | - } |
| 100 | + } |
92 | 101 |
|
93 | | - function serializeObject(obj) { |
| 102 | + function serializeObject(obj) { |
94 | 103 | const serializedObj = { ...obj }; |
95 | 104 | for (const key in serializedObj) { |
96 | 105 | if (typeof serializedObj[key] === 'function') { |
|
100 | 109 | return JSON.stringify(serializedObj); |
101 | 110 | } |
102 | 111 |
|
| 112 | + function deserializeObject(serialized) { |
| 113 | + const parsedObj = JSON.parse(serialized); |
| 114 | + for (const key in parsedObj) { |
| 115 | + if (typeof parsedObj[key] === 'string' && parsedObj[key].startsWith('function')) { |
| 116 | + parsedObj[key] = new Function('return ' + parsedObj[key])(); |
| 117 | + } |
| 118 | + } |
| 119 | + return parsedObj; |
| 120 | + } |
| 121 | + |
103 | 122 | // Event listener for authorize button click |
104 | 123 | document.addEventListener('click', (event) => { |
105 | 124 | if (event.target && event.target.matches('button.btn.modal-btn.auth.authorize.button')) { |
106 | 125 | waitForSwaggerUIRedirectOauth2(); |
107 | 126 | } |
108 | 127 | }); |
109 | 128 |
|
| 129 | + function initializeOauthData() { |
| 130 | + const oauth2Data = localStorage.getItem('swaggerUIRedirectOauth2'); |
| 131 | + if (!oauth2Data) { |
| 132 | + return; |
| 133 | + } |
| 134 | + const oauth2 = deserializeObject(oauth2Data) |
| 135 | + const tokenUrl = oauth2.auth.schema.tokenUrl; |
| 136 | + const clientId = oauth2.auth.clientId |
| 137 | + const clientSecret = oauth2.auth.clientSecret; |
| 138 | + const redirectUri = oauth2.redirectUrl |
| 139 | + const scopes = oauth2.auth.scopes.join(" "); |
| 140 | + ui.initOAuth({ |
| 141 | + clientId: clientId, |
| 142 | + clientSecret: clientSecret, |
| 143 | + scopeSeparator: " ", |
| 144 | + scopes: scopes |
| 145 | + }) |
| 146 | + } |
| 147 | + |
| 148 | + function addLogoutButton() { |
| 149 | + const accessToken = localStorage.getItem('access_token'); |
| 150 | + if (!accessToken) { |
| 151 | + return; |
| 152 | + } |
| 153 | + |
| 154 | + const authWrapper = document.querySelector('.auth-wrapper'); |
| 155 | + if (!authWrapper) { |
| 156 | + return; |
| 157 | + } |
| 158 | + |
| 159 | + const customButtonsWrapper = document.createElement('div'); |
| 160 | + customButtonsWrapper.id = 'custom-buttons'; |
| 161 | + customButtonsWrapper.style.display = 'flex'; |
| 162 | + customButtonsWrapper.style.alignItems = 'center'; |
| 163 | + customButtonsWrapper.style.marginLeft = '20px'; |
| 164 | + |
| 165 | + const classNames = ['btn', 'modal-btn', 'auth', 'button']; |
| 166 | + const logoutButton = document.createElement('button'); |
| 167 | + |
| 168 | + logoutButton.id = 'logoutButton'; |
| 169 | + logoutButton.classList.add(...classNames); |
| 170 | + logoutButton.textContent = 'Logout'; |
| 171 | + logoutButton.style.marginLeft = '10px'; |
| 172 | + |
| 173 | + logoutButton.addEventListener('click', function() { |
| 174 | + localStorage.removeItem('access_token'); |
| 175 | + localStorage.removeItem('swaggerUIRedirectOauth2'); |
| 176 | + logoutButton.style.display = 'none'; |
| 177 | + }); |
| 178 | + |
| 179 | + customButtonsWrapper.appendChild(logoutButton); |
| 180 | + authWrapper.parentElement.insertBefore(customButtonsWrapper, authWrapper.nextSibling); |
| 181 | + } |
| 182 | + |
110 | 183 | }; |
111 | 184 |
|
112 | 185 | </script> |
|
0 commit comments