OpenID Connect (OAuth 2.0) 認証を使用して Chrome 拡張機能で収益を上げる

Chrome 拡張機能は、Chrome ブラウザの機能を拡張するための素晴らしい方法です。人気のある拡張機能がある場合、有料の機能を提供することで収益化を図ることができます。そのためには、ユーザー認証が必要です:

• ユーザー識別: ユーザーが誰であるかを知り、カスタマイズされた機能を提供する必要があります。
• アクセス制御: 誰が有料機能にアクセスできるかを制御する必要があります。
• サブスクリプションの管理: ユーザーがサブスクリプションを登録・管理する方法を提供する必要があります。

一方で、Google アカウントシステムに固執したくないのです。なぜなら、ユーザーは他のアカウントを使うことを好むかもしれませんし、同じアイデンティティシステムで統合したい複数のサービスがあるかもしれません。

OpenID Connect (OIDC) を認証に使用することの利点の簡単なまとめ:

• ベンダーロックインなし: ユーザーは Google に強制されることなく、さまざまな方法でサインインできます。
• シングルサインオン (SSO): ユーザーは一度サインインすることで複数のサービスやアプリケーションにアクセスできます。
• 標準化: OIDC は広く採用され、サポートされているオープンスタンダードで、安全です。

このチュートリアルでは、OIDC プロバイダーとして Logto を使用します。これは、アイデンティティインフラストラクチャを構築するための Auth0 の代替手段です。

さぁ始めましょう！

導入#

Chrome 拡張機能のポップアップに「サインイン」ボタンを配置したと仮定すると、認証フローは次のようになります:

拡張機能の他のインタラクティブページについては、Extension popup 参加者をページ名で置き換えるだけです。このチュートリアルでは、ポップアップページに焦点を当てます。

Logto アプリケーションの作成#

はじめに、"Single page app" タイプの Logto アプリケーションを作成します。Logto アプリケーションを作成する手順は次のとおりです:

1. Logto コンソール にサインインします。
2. アプリケーション作成 をクリックします。
3. 開いたページで、「フレームワークなしでアプリを作成」ボタンを探してクリックします。
4. "Single page app" タイプを選択し、アプリケーション名を入力します。
5. 作成 をクリックします。

Chrome 拡張機能のセットアップ#

Logto SDK のインストール#

Chrome 拡張機能プロジェクトに Logto SDK をインストールします:

manifest.json の更新#

Logto SDK は manifest.json に次の権限を必要とします:

• permissions.identity: サインインとサインアウトに使用される Chrome Identity API のために必要です。
• permissions.storage: ユーザーのセッションを保存するために必要です。
• host_permissions: Logto SDK が Logto API と通信するために必要です。

バックグラウンドスクリプト (サービスワーカー) を設定する#

Chrome 拡張機能のバックグラウンドスクリプトで Logto SDK を初期化します:

<your-logto-endpoint> と <your-logto-app-id> を実際の値に置き換えます。これらの値は、Logto コンソールで作成したアプリケーションページで見つけることができます。

バックグラウンドスクリプトがない場合は、公式ガイド に従って作成することができます。

次に、他の拡張機能ページからのメッセージをリッスンし、認証プロセスを処理します:

上記のコードでは、2 つのリダイレクト URI が使用されています。これらはどちらも chrome.identity.getRedirectURL によって生成される 組み込み Chrome API です。2 つの URI は次のようになります:

• サインイン用: https://<extension-id>.chromiumapp.org/callback
• サインアウト用: https://<extension-id>.chromiumapp.org/

これらの URI はアクセスできないことに注意が必要であり、Chrome が認証プロセスのために特定のアクションをトリガーするためだけに使われます。

Logto アプリケーション設定の更新#

次に、作成したリダイレクト URI を許可するように Logto アプリケーション設定を更新します。

1. Logto コンソールのアプリケーションページに移動します。
2. 「リダイレクト URI」セクションに、URI を追加します: https://<extension-id>.chromiumapp.org/callback
3. 「ポストサインアウト リダイレクト URI」セクションに、URI を追加します: https://<extension-id>.chromiumapp.org/
4. 「CORS 許可オリジン」セクションに、URI を追加します: chrome-extension://<extension-id> 。Chrome 拡張機能の SDK はこのオリジンを使用して Logto API と通信します。
5. 変更を保存 をクリックします。

<extension-id> を実際の拡張機能 ID に置き換えることを忘れないでください。拡張機能 ID は chrome://extensions ページで見つけることができます。

設定を更新した後、Logto アプリケーション設定は次のようになります:

ポップアップにサインイン・サインアウトボタンを追加する#

もうすぐ完了です！ポップアップページにサインイン・サインアウトボタンとその他の必要なロジックを追加しましょう。

popup.html ファイルに:

popup.js ファイルに ( popup.js が popup.html に含まれていると仮定します):

チェックポイント: 認証フローをテストする#

Chrome 拡張機能で認証フローをテストできるようになりました:

1. 拡張機能のポップアップを開きます。
2. 「サインイン」ボタンをクリックします。
3. Logto のサインインページにリダイレクトされます。
4. Logto アカウントでサインインします。
5. Chrome に戻ってリダイレクトされます。

認証状態の確認#

Chrome は統一されたストレージ API を提供しているため、サインインおよびサインアウトフローではなく、他のすべての Logto SDK メソッドはポップアップページで直接使用できます。

popup.js で、バックグラウンドスクリプトで作成した LogtoClient インスタンスを再利用するか、同じ設定で新しいものを作成できます:

次に、認証状態とユーザープロファイルを読み込む関数を作成できます:

loadAuthenticationState 関数をサインインおよびサインアウトロジックと組み合わせることもできます:

以下は、認証状態と共に表示されるポップアップページの例です:

SDK に関する詳細情報については、公式ブラウザ SDK のドキュメント を参照してください。ブラウザ SDK は Chrome 拡張機能 SDK と同じ API を共有しています。

その他の考慮事項#

• サービスワーカーバンドル: Webpack や Rollup などのバンドラーを使用している場合は、Node.js モジュールの不要なバンドルを避けるために、ターゲットを browser またはそれに準じるものに明示的に設定する必要があります。
• モジュール解決: Logto Chrome 拡張機能 SDK は ESM のみのモジュールです。

TypeScript、Rollup その他の設定での完全な例を含むサンプルプロジェクトを参照してください。

結論#

ユーザーが認証されるようになったので、Chrome 拡張機能で有料機能を安全に提供できます。例えば、ユーザープロファイルにユーザーのサブスクリプションステータスを保存し、拡張機能を開いたときにそれをチェックできます。

Chrome 拡張機能と Logto の力を組み合わせることで、ユーザーとあなたの両方が満足できる、より柔軟でカスタマイズ可能な拡張機能を構築できます。