これによりプロフィール取得のためにリダイレクトしたらトゥートされてしまう問題を解消した。

ブツ

Mastodonの認証リダイレクトをイベント化する

経緯

前版では、プロフィール取得するとトゥートされてしまった。それはトゥートボタンとリダイレクト処理が密結合されていたせいだった。なので今回はトゥートボタンからリダイレクト処理を外に出してイベント化し、そのイベントを受信した側で続きの処理を実装するようにした。これで認証とAPIの実行を自由に制御できるようになった。

今回

認証リダイレクト後は、アクセストークンを取得し、APIクライアント生成してそれを返すところまで自動化した。なのでイベント受信側ではAPIクライアントを受け取って、そこで実装したAPIを叩けばよいだけである。

さらに自動化してある。どうせAPIクライアントで実行できる処理は私が実装したものだけなので、認証を要求した時点でAPI名と引数を渡して、リダイレクトのコールバックが来たら自動で実行するようにした。これにより認証リダイレクト後のイベントを受け取る処理を書かずとも所定のAPIを実行できるようにした。

認証リダイレクトを要求する

このとき同時に実行したいAPIとその引数も渡す。

トゥートする

const authorizer = new MastodonAuthorizer(domain, 'write:statuses')
authorizer.authorize(['status'], [{status:status}])

アカウント情報を取得する

const authorizer = new MastodonAuthorizer(domain, 'read:accounts')
authorizer.authorize(['accounts'], null)

認証リダイレクト後のコールバックを受信する

イベント名	意味
`mastodon_redirect_approved`	マストドンの認証画面でログインし承認したときに発火する
`mastodon_redirect_rejected`	マストドンの認証画面でログインするも拒否したときに発火する

document.addEventListener('mastodon_redirect_approved', async(event) => { ... });
document.addEventListener('mastodon_redirect_rejected', async(event) => { ... });

拒否したとき

document.addEventListener('mastodon_redirect_rejected', async(event) => {
    console.debug('認証エラーです。認証を拒否しました。')
    console.debug(event.detail.error)
    console.debug(event.detail.error_description)
    Toaster.toast('キャンセルしました')
});

event.detailにはこのイベントの詳細データをセットした。この場合はエラー用の引数errorとerror_descriptionが入る。これは承認リダイレクト後にコールバックされた時にURLパラメータとして付与されたものである。

承認したとき

document.addEventListener('mastodon_redirect_approved', async(event) => {
    console.debug('===== mastodon_redirect_approved =====')
    console.debug(event.detail)
    // actionを指定したときの入力と出力を表示する
    for (let i=0; i<event.detail.actions.length; i++) {
        console.debug(event.detail.actions[i], (event.detail.params) ? event.detail.params[i] : null, event.detail.results[i])
        console.debug(`----- ${event.detail.actions[i]} -----`)
        console.debug((event.detail.params) ? event.detail.params[i] : null)
        console.debug(event.detail.results[i])
    }
    // 認証リダイレクトで許可されたあとアクセストークンを生成して作成したclientを使ってAPIを発行する
    //const res = event.detail.client.toot(JSON.parse(event.detail.params[0]))
    // 独自処理
    for (let i=0; i<event.detail.actions.length; i++) {
        if ('accounts' == event.detail.actions[i]) {
            const gen = new MastodonProfileGenerator(event.detail.domain)
            document.getElementById('export-mastodon').innerHTML = gen.generate(event.detail.results[i])
        }
        else if ('status' == event.detail.actions[i]) {
            const html = new Comment().mastodonResToComment(event.detail.results[i])
            const comment = document.querySelector(`mention-section`).shadowRoot.querySelector(`#web-mention-comment`)
            comment.innerHTML = html + comment.innerHTML
        }
    }
});

`event.detail`	説明
`domain`	承認承認リダイレクトを要求したマストドン・インスタンスのドメイン名
`actions`	承認リダイレクトを要求したときに渡したAPIクライアントのメソッド名
`params`	承認リダイレクトを要求したときに渡したAPIクライアントのメソッドに渡す引数
`results`	`actions`と`params`で実行したAPIの結果（JSON（オブジェクト））
`client`	APIクライアント。私が実装したマストドンAPIを実行できる

accountsはアカウント情報を取得する処理。これが要求されて返ってきたとき、プロフィール情報からHTMLを作成して表示する処理を実行する。

statusはトゥートする処理。これが要求されて返ってきたとき、コメント用HTMLを作成してコメント欄に表示する処理を実行する。

トゥートボタンの認証リダイレクト処理をイベント化した

ブツ

経緯