lib.itmens/developer/templates/console.html
2024-04-17 00:04:49 -04:00

112 lines
4.5 KiB
HTML

{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="{{ cdn_url }}/npm/swagger-ui-dist@5.13.0/swagger-ui.min.css">
<title>{{ api.title }} Developer Console</title>
{% include "common_libs.html" %}
<style type="text/css">
.information-container, #operations-tag-default {
display: none;
}
.scheme-container {
margin: 0 !important;
background: none !important;
box-shadow: none !important;
}
button svg {
fill: var(--pico-primary);
}
#swagger-ui>div>div>.wrapper {
background-color: white;
padding: 0;
}
#swagger-ui>div>div>.wrapper button {
background-color: unset;
}
#swagger-ui>div>div>.wrapper button.btn.execute {
background-color: #4990e2;
}
</style>
</head>
<body>
{% include "_header.html" %}
<main class="container">
<h3>
Developer Console | <a href="{% url 'oauth2_provider:list' %}">{% trans "Your applications" %}</a>
</h3>
<p class="empty">
By using our APIs, you agree to our <a href="/pages/terms">Terms of Service</a>.
</p>
<details {% if token %}open{% endif %}>
<summary>
<a>Test Access Token</a>
</summary>
<form method="post" role="group">
{% csrf_token %}
<input type="text"
readonly
value="{{ token | default:'Once generated, token will only be shown once here, previous tokens will be revoked.' }}">
<input type="submit" value="Generate" />
</form>
<p>
Click <code>Authorize</code> button below, input your token there to invoke APIs with your account, which is required for APIs like <code>/api/me</code>
<br>
Or use it in command line, like
<code>curl -H "Authorization: Bearer YOUR_TOKEN" {{ site_url }}/api/me</code>
</p>
</details>
<br>
<details>
<summary>
<a>How to authorize</a>
</summary>
0. Create an application (you must have at least one URL included in the Redirect URIs field, e.g. <code>https://example.org/callback</code>)
<br>
1. Guide your user to open this URL
<input type="text"
value="{{ site_url }}/auth/oauth/authorize/?response_type=code&amp;client_id=CLIENT_ID&amp;redirect_uri=https://example.org/callback"
readonly>
2. Once authorizated by user, it will redirect to <code>https://example.org/callback</code> with a <code>code</code> parameter:
<input type="text"
value="https://example.org/callback?code=AUTH_CODE"
readonly>
3. Obtain access token with the following POST request:
<textarea readonly rows="7">
curl -X POST {{ site_url }}/auth/oauth/token/ \
-H "Content-Type: application/x-www-form-urlencoded" \
-d "client_id=CLIENT_ID" \
-d "client_secret=CLIENT_SECRET" \
-d "code=AUTH_CODE" \
-d "redirect_uri=https://example.org/callback" \
-d "grant_type=authorization_code"</textarea>
and access token will be returned in the response:
<textarea readonly rows="1">{"access_token": "ACCESS_TOKEN", "expires_in": 31536000, "token_type": "Bearer", "scope": "read write", "refresh_token": "REFRESH_TOKEN"}</textarea>
4. Use the access token to access protected endpoints like <code>/api/me</code>
<textarea readonly rows="1">curl -H "Authorization: Bearer ACCESS_TOKEN" -X GET http://localhost:8000/api/me</textarea>
and response will be returned accordingly:
<textarea readonly rows="1">{"url": "https://neodb.social/users/xxx@yyy.zzz/", "external_acct": "xxx@yyy.zzz", "display_name": "XYZ", "avatar": "https://yyy.zzz/xxx.gif"}</textarea>
more endpoints can be found in API Documentation below.
</details>
<div id="swagger-ui" data-theme="light"></div>
<script src="{{ cdn_url }}/npm/swagger-ui-dist@5.13.0/swagger-ui-bundle.min.js"></script>
<script>
const ui = SwaggerUIBundle({
url: '{{ openapi_json_url }}',
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],
layout: "BaseLayout",
{% if api.csrf and csrf_token %}
requestInterceptor: (req) => {req.headers['X-CSRFToken'] = "{{csrf_token}}"; return req;},
{% endif %}
deepLinking: true
})
</script>
</main>
{% include "_footer.html" %}
</body>
</html>