chrome.identity を使ってChrome拡張でもOAuthのAPIを使う

例としてQiitaのAPIを使う。

まずはOAuthのリダイレクト先のURLの項目をhttps://{拡張機能のID}.chromiumapp.orgで登録しておく。
IDは拡張機能の画面で確認することができる。

次にOAuthの認可画面を表示するコードを書く。

chrome.launchWebAuthFlow({
  url: `https://qiita.com/api/v2/oauth/authorize?client_id=${clientId}&scopes=read_qiita&state=${適当な文字列}`,
  interactive: true
}, responseUrl => {
  // 後述
})

chrome.launchWebAuthFlowでユーザーを認可用のページにアクセスさせることができる。

interactiveをtrueにするとユーザーから認可を取得していない場合は認可用のページを表示、取得済みの場合はなにもせずコールバックを呼ぶという処理になる。

次にコールバック内の処理。

chrome.identity.launchWebAuthFlow({
  // 省略
}, responseUrl => {
  let url = new URL(responseUrl)
  let code = url.searchParams.get("code")

  fetch("https://qiita.com/api/v2/access_tokens", {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      client_id: clientId,
      client_secret: clientSecret,
      code: code
    })
  }).then(res => res.json())
    .then(json => {
      let token = json["token"] // アクセストークン取得
    })
})

responseURLのGETパラメーターにcodeが入っている。

それをアクセストークン取得のAPIにClientIdとClientSecretと一緒に送るとアクセストークンが取得できる。