Skip to content

Commit 2d72e6d

Browse files
mxschllmxschll
committed
feat: ticktick oauth workaround page
1 parent e4467fa commit 2d72e6d

File tree

1 file changed

+106
-2
lines changed

1 file changed

+106
-2
lines changed

‎pages/index.html‎

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,116 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="light">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
9+
<title>TickTick OAuth Workflow</title>
810
</head>
11+
912
<body>
13+
<main class="container">
14+
15+
<hgroup>
16+
<h1>TickTick OAuth</h1>
17+
<p>Currently, the regular way to get a TickTick access token for the Logseq plugin (OAuth Workflow) cannot
18+
be used. This is because it requires a redirect to Logseq with a parameter, which is not working well at
19+
the moment. Instead, you can use this page to generate the required credentials.</p>
20+
</hgroup>
21+
<div id="step-1">
22+
<p>
23+
To integrate the TickTick app with another application, you need to create a new app on the developer
24+
platform.
25+
Go to <a href="https://developer.ticktick.com/manage"
26+
target="_blank">https://developer.ticktick.com/manage</a> and create a new app, giving it a name and
27+
description of your choice.
28+
Edit the app and add this OAuth redirect URL:
29+
<code>https://mxschll.github.io/logseq-ticktick-plugin</code>.
30+
Then, copy the <b>Client ID</b> and <b>Client Secret</b> and paste them into the appropriate fields in
31+
the form below and click on the Authorize button.
32+
</p>
33+
<form>
34+
<div class="grid">
35+
36+
<label for="client_id">
37+
TickTick Client ID
38+
<input type="text" name="client_id" id="client_id" placeholder="Client ID">
39+
40+
</label>
1041

42+
<label for="client_secret">
43+
TickTick Client Secret
44+
<input type="text" name="client_secret" id="client_secret" placeholder="Client Secret">
45+
</label>
46+
47+
<input type="text" name="redirect_url" id="redirect_url" placeholder="Redirect URI"
48+
value="https://mxschll.github.io/logseq-ticktick-plugin" hidden>
49+
</div>
50+
<small>We'll never share your email with anyone else.</small>
51+
<button type="submit">Authorize</button>
52+
</form>
53+
</div>
54+
<div id="step-2" style="display: none;">
55+
<p>
56+
Copy the following values and paste them into the Logseq TickTick plugin settings. Logseq will then be
57+
able to request an access token.
58+
</p>
59+
<form>
60+
<div class="grid">
61+
<table>
62+
<tbody>
63+
<tr>
64+
<td style="margin-left: 0; padding-left: 0;">TickTick Client ID</td>
65+
<td><code><span id="td_client_id"></span></code></td>
66+
</tr>
67+
<tr>
68+
<td style="margin-left: 0; padding-left: 0;">TickTick Client Secret</td>
69+
<td><code><span id="td_client_secret"></span></code></td>
70+
</tr>
71+
<tr>
72+
<td style="margin-left: 0; padding-left: 0;">TickTick Redirect URI</td>
73+
<td><code><span id="td_redirect_uri"></span></code></td>
74+
</tr>
75+
<tr>
76+
<td style="margin-left: 0; padding-left: 0;">TickTick Access Code</td>
77+
<td><code><span id="td_access_code"></span></code></td>
78+
</tr>
79+
</tbody>
80+
</table>
81+
</div>
82+
</form>
83+
</div>
84+
85+
</main>
86+
<script>
87+
const AUTH_URL = 'https://ticktick.com/oauth/authorize';
88+
const TOKEN_URL = 'https://ticktick.com/oauth/token';
89+
90+
const form = document.querySelector('form');
91+
form.addEventListener('submit', (e) => {
92+
e.preventDefault();
93+
console.log('submit');
94+
const formData = new FormData(form);
95+
const data = Object.fromEntries(formData);
96+
data.scope = 'tasks:write';
97+
data.response_type = 'code';
98+
data.state = 'ok';
99+
const url = `${AUTH_URL}?${new URLSearchParams(data)}`;
100+
localStorage.setItem('ticktick', JSON.stringify(data));
101+
window.open(url, '_self');
102+
});
103+
104+
const params = new URLSearchParams(window.location.search);
105+
if (params.has('code')) {
106+
document.querySelector('#step-1').style.display = 'none';
107+
document.querySelector('#step-2').style.display = 'block';
108+
document.querySelector('#td_access_code').innerText = params.get('code');
109+
document.querySelector('#td_client_id').innerText = JSON.parse(localStorage.getItem('ticktick')).client_id;
110+
document.querySelector('#td_client_secret').innerText = JSON.parse(localStorage.getItem('ticktick')).client_secret;
111+
document.querySelector('#td_redirect_uri').innerText = JSON.parse(localStorage.getItem('ticktick')).redirect_url;
112+
}
113+
</script>
11114
</body>
115+
12116
</html>

0 commit comments

Comments
 (0)