mirror of
https://github.com/Luzifer/twitch-bot.git
synced 2024-09-19 18:12:55 +00:00
192 lines
6.8 KiB
HTML
192 lines
6.8 KiB
HTML
<html>
|
||
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Twitch-Bot Authorization</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/bootstrap@4/dist/css/bootstrap.min.css,npm/bootstrap-vue@2/dist/bootstrap-vue.min.css,npm/bootswatch@4/dist/darkly/bootstrap.min.css">
|
||
|
||
<div id="app">
|
||
<b-container>
|
||
<b-row>
|
||
<b-col>
|
||
|
||
<b-jumbotron
|
||
class="mt-4"
|
||
header="Twitch-Bot Authorization"
|
||
lead="Get a Twitch Auth-Token for your bot easily"
|
||
>
|
||
|
||
<template v-if="token">
|
||
<label for="token">Your <code>--twitch-token</code>:</label>
|
||
<b-form-input id="token" v-model="token" type="text" readonly />
|
||
</template>
|
||
|
||
<template v-else>
|
||
<p>In case you haven't done this yet you need to create an Application for your bot:</p>
|
||
<ol class="mb-3">
|
||
<li>Go to <a href="https://dev.twitch.tv/console/apps">https://dev.twitch.tv/console/apps</a></li>
|
||
<li>
|
||
Register a new Application with these properties:
|
||
<ul>
|
||
<li><strong>Name:</strong> Choose any you like</li>
|
||
<li><strong>OAuth Redirect URLs:</strong> <code>{{ redirURL }}</code></li>
|
||
<li><strong>Category:</strong> Chat Bot</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
<p>After you've completed the steps above, copy your <strong>Client ID</strong> (do <strong>NOT</strong> copy your Client Secret) below and click the button:</p>
|
||
<b-input-group class="mb-3">
|
||
<b-form-input v-model="clientId" placeholder="Application Client Id"></b-form-input>
|
||
<b-input-group-append>
|
||
<b-button :href="authURL" :disabled="!authURL" variant="success">Get OAuth Token now!</b-button>
|
||
</b-input-group-append>
|
||
</b-input-group>
|
||
|
||
<div class="accordion" role="tablist">
|
||
<b-card no-body class="mb-1">
|
||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||
<b-button block v-b-toggle.detailconfig variant="secondary">
|
||
Let me customize the scopes!
|
||
</b-button>
|
||
<b-collapse id="detailconfig" accordion="detailconfig" role="tabpanel">
|
||
<b-card-body>
|
||
|
||
<p>I want my bot to be able to…</p>
|
||
|
||
<b-form-checkbox
|
||
:disabled="scope.required"
|
||
:key="scope.scope"
|
||
v-for="scope in scopeList"
|
||
v-model="scope.enabled"
|
||
>
|
||
<span
|
||
:title="scope.scope"
|
||
v-html="`…${scope.description}`"
|
||
></span>
|
||
</b-form-checkbox>
|
||
|
||
</b-card-body>
|
||
</b-collapse>
|
||
</b-card-header>
|
||
</b-card>
|
||
</div>
|
||
|
||
<hr>
|
||
<p><strong>Security Hint:</strong> This website has no code to send your Client-ID or Access-Token to any place other than Twitch. Even though you should ensure you trust it before using as Twitch will send an AccessToken with following scopes here:</p>
|
||
<p><code>{{ scopes }}</code></p>
|
||
<p>For more information about the scopes see these two pages: <a href="https://dev.twitch.tv/docs/irc/guide">IRC Guide</a> and <a href="https://dev.twitch.tv/docs/authentication#scopes">API Scopes</a>
|
||
</template>
|
||
|
||
</b-jumbotron>
|
||
|
||
</b-col>
|
||
</b-row>
|
||
</b-container>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/combine/npm/vue@2,npm/bootstrap-vue@2/dist/bootstrap-vue.min.js"></script>
|
||
<script>
|
||
new Vue({
|
||
computed: {
|
||
authURL() {
|
||
if (!this.clientId) {
|
||
return null
|
||
}
|
||
|
||
const params = {
|
||
client_id: this.clientId,
|
||
redirect_uri: this.redirURL,
|
||
response_type: 'token',
|
||
scope: this.scopes,
|
||
}
|
||
|
||
const paramString = Object.keys(params).map(k => [k, params[k]].join('=')).join('&')
|
||
return `https://id.twitch.tv/oauth2/authorize?${paramString}`
|
||
},
|
||
|
||
scopes() {
|
||
return this.scopeList
|
||
.filter(scope => scope.enabled)
|
||
.map(scope => scope.scope.split(' ')) // Split is required, some entries have multiple scopes
|
||
.flat()
|
||
.sort((i, j) => i.localeCompare(j))
|
||
.join(' ')
|
||
},
|
||
|
||
redirURL() {
|
||
return window.location.href
|
||
}
|
||
},
|
||
|
||
data: {
|
||
clientId: null,
|
||
scopeList: [
|
||
{
|
||
description: 'read chat messages',
|
||
enabled: true,
|
||
required: true,
|
||
scope: 'chat:read',
|
||
},
|
||
{
|
||
description: 'send messages to the chat',
|
||
enabled: true,
|
||
required: true,
|
||
scope: 'chat:edit',
|
||
},
|
||
{
|
||
description: 'read messages sent as whispers',
|
||
enabled: true,
|
||
scope: 'whispers:read',
|
||
},
|
||
{
|
||
description: 'send whispers',
|
||
enabled: true,
|
||
scope: 'whispers:edit',
|
||
},
|
||
{
|
||
description: 'use moderation chat-commands like <code>/ban, /clear, /delete, /timeout</code>',
|
||
enabled: true,
|
||
scope: 'channel:moderate',
|
||
},
|
||
{
|
||
description: 'use channel editor chat-commands like <code>/host, /marker, /raid</code>',
|
||
enabled: true,
|
||
scope: 'channel_editor',
|
||
},
|
||
{
|
||
description: 'manage my channel’s broadcast configuration (title, game, …), stream markers and stream tags',
|
||
enabled: true,
|
||
scope: 'channel:manage:broadcast',
|
||
},
|
||
{
|
||
description: 'run commercials on my channel',
|
||
enabled: false,
|
||
scope: 'channel:edit:commercial channel_commercial',
|
||
},
|
||
{
|
||
description: 'manage Channel Points custom rewards and their redemptions on my channel',
|
||
enabled: false,
|
||
scope: 'channel:manage:redemptions channel:read:redemptions',
|
||
},
|
||
{
|
||
description: 'create Clips on my channel',
|
||
enabled: false,
|
||
scope: 'clips:edit',
|
||
},
|
||
],
|
||
token: null,
|
||
},
|
||
|
||
el: '#app',
|
||
|
||
mounted() {
|
||
const hashParams = new URLSearchParams(window.location.hash.substr(1))
|
||
if (hashParams.has('access_token')) {
|
||
this.token = hashParams.get('access_token')
|
||
}
|
||
},
|
||
})
|
||
</script>
|
||
|
||
</html>
|