ChromiumブラウザでもChrome拡張でGoogleログインしたい

はじめに

社内向けのChrome拡張を作っていて、ちょっとGoogleカレンダーの情報を引っ張ってくる機能が作りたくなってGoogleログイン機能を実装してみました。
その時は chrome.identity.getAuthToken() を使っていたのですが、これがどうやらChrome限定の模様。
最初はそれでもいいかと思ってそのままにしてましたが、僕のメインブラウザがArcなので、そのために毎回Chromeを起動するのもめんどくさくなりました。
やっぱり普段使っているブラウザで使いたい！

というわけでいろいろ調べた結果をまとめておきます。

社内限定公開にするため、ストアで公開はせず、Trusted Testerに社員のアカウントを登録する方法を取っています。
そのため、ストアで公開するとなると話が違ってくるかもしれませんが、ご了承ください。

Chrome拡張の作り方や、Google APIを使うための設定などはすでに公開されている記事がたくさんあるので、省きます。

Chrome向けに書いていた内容

const token = await chrome.identity.getAuthToken({interactive: true})

以降 token を利用してGoogle Calendar APIを実行などする。簡単。

Chromiumブラウザでも動くように書き換えた内容

コードの書き換え＋Google Cloud ConsoleでのOAuthクライアントIDの新規発行が必要になります。

こちらの書き方でChromeでも動くので、こちらに統一しても問題はないと思います。

コードの修正

const oauth2Manifest = chrome.runtime.getManifest().oauth2
const clientId = oauth2Manifest.client_id
const scopes = oauth2Manifest.scopes

const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodeURIComponent(chrome.identity.getRedirectURL())}&response_type=token&scope=${encodeURIComponent(scopes.join(' '))}`

const responseUrl = await chrome.identity.launchWebAuthFlow({interactive: true, url: authUrl})

const searchParams = new URL(responseUrl.replace(/#/, '?')).searchParams
const token = searchParams.get('access_token')

以降 token を利用してGoogle Calendar APIを実行などする。

responseUrlに関して、なぜかトークンと許可されたスコープなどがフラグメント識別子（#に続くあれ）内に記載されており、抽出するのが難しいため、?に変換してクエリパラメータとして抽出しています。

Google Cloud Consoleでの設定

Chrome向けの時点では「種類：Chrome拡張機能」でクライアントIDを発行していると思いますが、
chrome.identity.launchWebAuthFlow() はChrome限定ではないので、「種類：ウェブアプリケーション」としてクライアントIDを別途発行する必要があります。

また、その際の設定に関しては、

• 承認済みの JavaScript 生成元
  • 何もしない
• 承認済みのリダイレクト URI
  • chrome.identity.getRedirectURL() の結果を入力
  • （https://<拡張機能ID>.chromiumapp.org/と同じになるはず）

としてください。

コード量は増えましたが、これでChrome＆Chromiumブラウザで動くGoogleログイン処理の完成です。

おわりに

コード内でawaitを使っているので、適宜asyncで包んであげるか、thenを利用したコードに書き換えてあげてください。

ChromiumブラウザでもGoogleログインをしたくていろいろ調べたのですが、ピンとくる記事がなかったので簡単にですがまとめました。

わかりにくい点などがありましたらコメントなどいただけると幸いです。