Code Monkey home page Code Monkey logo

mastodon-access-token's Introduction

Access Token Generator for Mastodon API

Mastodon APIを叩くにはaccess_tokenが必要ですが、現状Mastodonの設定画面では直接取得するUIがないため、外部から取得するためのSPA(Single Page Application)サイトを作りました。 実験用にaccess tokenが必要な際などにお使いください(もっとも第三者も利用する本格的なアプリケーションを作るのであればこのような仕組みをアプリ自体で実装するべきなので、あくまで実験用のものとお考えください)。

使い方 (Usage)

「Mastodon URL」には使っているMastodonインスタンスのURLを、「Client Name」には設定画面で表示させたいアプリケーション名を、「Web site」にはWebサイト名を、それぞれ入力してください。 「Publish access_token」ボタンを押し、Mastodonインスタンス側で認証処理を正常に実行されると、access_token(とclient_id、client_secret)が表示されます。

セキュリティについて (Security)

仕組みの都合で、どうしてもMastodonインスタンスのアクセス情報(client_id, client_secret, access_token)を取得する必要があります。

外部サイト上で秘密情報を扱うのは望ましくない方法なのですが、それでも安全性を極力担保するべく、サイトの挙動の透明性を高めてみました。JavaScriptもVanilla JSで記述し、index.html内で完結させています。JavaScriptからサーバには一切アクセスしません(そもそもGitHub Pagesなのでサーバ側にアプリを仕掛けたりとかもできませんし、外部のJavaScriptも読み込まないようにしています)。ページ遷移間で情報の引き渡しにはクッキー等は使わず、localStorageに保存しています。 jQuery等を使った方がコードは簡潔になりそうですが、透明性を優先しました(そのためGoogle Analyticsとかも入れてないのでアクセス数もよく分からず……。)

なおCSSにはBulmaFont Awesomeを使っています(publicなCDN経由なので変なものは仕込めません)。BulmaはJavaScript不要で使える軽量CSSフレームワークで便利です。

作者 (Author)

@takahashim

mastodon-access-token's People

Contributors

aoisensi avatar takahashim avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.