日本語

chrome-extension
収益化
認証

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

Chrome 拡張機能にユーザー認証を追加して収益化する方法を学びましょう。

Gao

Founder

4/2/2024

ユーザー認証に何週間も費やすのはもうやめましょう

Logto でより速く安全なアプリをリリース。数分で認証を統合し、コア製品に集中できます。

始めましょう

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

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

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

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

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

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

さぁ始めましょう！

導入

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

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

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

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

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

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 アプリケーション設定を更新します。

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

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

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

アプリケーション設定

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

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

popup.html ファイルに:

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

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

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

拡張機能のポップアップを開きます。
「サインイン」ボタンをクリックします。
Logto のサインインページにリダイレクトされます。
Logto アカウントでサインインします。
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 の力を組み合わせることで、ユーザーとあなたの両方が満足できる、より柔軟でカスタマイズ可能な拡張機能を構築できます。

Logto Cloud を無料で試す

導入#

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

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

Logto SDK のインストール#

manifest.json の更新#

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

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

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

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

認証状態の確認#

その他の考慮事項#

結論#

導入#

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

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

Logto SDK のインストール#

manifest.json の更新#

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

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

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

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

認証状態の確認#

その他の考慮事項#

結論#

導入

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

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

Logto SDK のインストール

`manifest.json` の更新

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

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

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

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

認証状態の確認

その他の考慮事項

結論

導入

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

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

Logto SDK のインストール

`manifest.json` の更新

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

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

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

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

認証状態の確認

その他の考慮事項

結論