@largetownskyposted at 2022-09-19

Chrome以外でのChrome拡張のOAuth2

Q&A

OAuth Edge chrome-extension kiwi

解決したいこと

Chrome拡張内でOAuth2認可処理をするには、chrome.identity.getAuthTokenを使うと、比較的楽に実装できます。

Chrome拡張は、Microsoft EdgeやKiwiブラウザでも、大部分が動作します。例外の一つがchrome.identity.getAuthTokenで、これらのブラウザでは動作しないため、別の方法を模索しています。

発生している問題・エラー

代わりに使えとMicrosoft Edgeの説明にも書いてあるchrome.idntity.launchWebAuthFlowですが、以下のようにredirect_uriまわりでエラーが発生して正常な処理ができません。

redirect_uriを省略すると、redirect_uriが無いというエラー
chrome.identity.getRedirectURL()の値を入れると、redirect_uri mismatchエラー
（デフォルトらしい）localhostを入れると、最近のセキュリティ強化でブロック
- redirect_uri mismatchではないので、合ってる？
- こちらのチェックを先にしているだけかもしれませんが
- ブロックされないために、getAuthTokenを使えと言ってくるが、そもそもこれが使えないから苦労しているわけで…
Chrome拡張なので、IDプロバイダーであるGoogle Cloud にChrome appとして登録しており、この場合明示的なredirect_uri登録が無いため、redirect_uriをチェックしたり合わせることができない
Chromeの正常な認可時のreciredt_uriを開発者ツールで覗こうとしても、ブラウザ内部で隠蔽しているらしく（最後のトークンを使う通信以外）何も出てこない

該当するソースコード

const oauth2Manifest = chrome.runtime.getManifest().oauth2;
const clientId = oauth2Manifest?.client_id;
const scopes = oauth2Manifest?.scopes;
if (clientId == null || scopes == null) {
    return;
}
const authUrl =
    "https://accounts.google.com/o/oauth2/auth?client_id=" +
    encodeURIComponent(clientId) +
    "&redirect_uri=" +
    encodeURIComponent("http://localhost") +
    "&response_type=token&scope=" +
    encodeURIComponent(scopes.join(" "));
chrome.identity.launchWebAuthFlow(
    { interactive: true, url: authUrl },
    (responseUrl) => {
        console.log(responseUrl);
    }
);

※ localhostを指定した場合の、最低限再現するコード部分だけ抜粋です。

自分で試したこと

ここによると、クロム拡張をあえてWebアプリケーションとして登録する方法があるようです。ただし、別の問題があって、Google Cloudに質問（しようとしたらstackoverflowにリダイレクトされて質問）しているところです。

Are you sure you want to delete the question?