日々是好日

プログラミングについてのあれこれ、ムダ知識など

VSCode 拡張機能開発で OAuth 認証 - 1

VSCodeはてなブログ に直接投稿する拡張機能を作っています(唐突)が、OAuth 認証でクソハマったので( ..)φメモメモ

※今回は Request Token の取得までしかできていませんのであしからず

※※getOAuthRequestTokencallback_urlに間違いがあったので修正

VSCode 拡張機能開発について

参考

code.visualstudio.com

拡張機能のひな形は Yeoman で簡単に生成できます。この辺は公式にあるので省略。
開発言語は TypeScript でいきます。型付き言語最高なんじゃぁ~^

npm install -g yo generator-code

なお筆者 TypeScript は2018年1月12日から触り始めた模様(Twitter調べ)。

OAuth 認証に使用するライブラリ

axios-oauthでも、request使ってゴリゴリ書いてもいいですが、今回はこちらのライブラリを使用しました。

  • node-oauth

oauth - npm

src

extension.kt

activateはこんな感じ。

export function activate(context: vscode.ExtensionContext) {

    let hatena = new util.HatenaBlogUtil();
    let disposables = [];

    const startOauth = async () => {
        await hatena.startOAuth();
    };
    let disposable = vscode.commands.registerCommand('extension.getBlog', startOauth);
    disposables.push(disposable);

    context.subscriptions.concat(disposables);
}

ここは別にそんな変な形ではないです。
package.jsonで定義したextension.getBlogコマンドが実行されると OAuth 認証が開始されます。

次にHatenaBlogUtilを見ます。

HatenaBlogUtil.ts

とりあえず Request Token の取得まで。

import * as OAuth from 'oauth';
export class HatenaBlogUtil {
    startOAuth = async (): Promise<any> => {
        let oauth = new OAuth.OAuth(
            'https://www.hatena.com/oauth/initiate', //get request token url
            'https://www.hatena.com/oauth/token', //get access token url
            'your consumer key',
            'your consumer secret',
            '1.0', //OAuth ver.
            'oob', //callback url
            'HMAC-SHA1'
        );

        oauth.getOAuthRequestToken({
            "scope": "read_public" //はてなOAuthでは指定必須
        },(err, token, token_secret, results) => {
            console.log('===============');
            console.log(err);
            console.log(token);
            console.log(token_secret);
            console.log(results);
            console.log('===============');
        });
    }
}

callback_urloobについては次の記事が参考になりました。

blog.kymmt.com

パラメータ間違えてなければ、次のような感じで Request Token が取得できます。

===============
null
"request_token"
"request_token_secret"
Object
    oauth_callback_confirmed:"true"
===============

Request Token に Secret って必要あったっけ?と思う所存ですが、一応取得できました。
現時点では、受け取った Request Token を使って

https://www.hatena.ne.jp/oauth/authorize?oauth_token="request_token"

にアクセスすれば、連携の許可を行う画面が表示されます。

f:id:kcpoipoi:20190115224248p:plain

黒塗りになっている部分のパラメータ(oauth_verifier?)をアプリに入力すればいいよということですが、、、なぜかうまくいかない(´・ω・`)

所感

そもそもnode-oauthのパラメータの設定を理解するのに2,3日かかりました。callbacklocalhost入れてみちゃったり……解決したのは昨日の夜中。

oauth_verifierの取得には通常 Web ブラウザが必要になりますが、コンソール上で完結したいのでちょっと大変かもしれない。
とりあえず Web ブラウザ経由でもいいから Access Token 取得しようとしたら、oauth_problem=verifier_invalidって怒られる……(#˘ω˘)

次こそ Access Token の取得までやります。