CapacitorアプリにOAuth2を実装する5つのステップ

保護されたトークン [ Cloudflare Capacitor GitHub

Capgo Capacitor apps API

SDK Capacitor app 5 つのステップで:

1. OAuth2 プロバイダを設定する: Google などのプロバイダを選択し、リダイレクト URI を設定し、クライアント資格情報を安全に管理する。 OAuth2 プラグインをインストールして設定する: プラグインを追加し、プラットフォーム固有の設定 (例: iOS、Android) を設定する。
2. 認証フローを構築する: ユーザーログイン、トークンストレージ、ログアウトを安全に管理するプラグインを使用する。 @byteowls/capacitor-oauth2 Enable Info.plist __CAPGO_KEEP_0__ AndroidManifest.xml __CAPGO_KEEP_0__
3. __CAPGO_KEEP_0____CAPGO_KEEP_0__ PKCE 保護のために追加される
4. 複数プラットフォームでテストiOS、Android、ウェブブラウザでフローを検証。リダイレクト URI の一致が不正または PKCE のエラーが発生するなど、一般的な問題を修正します。
5. 実装のセキュリティトークンを安全なストレージ (Keychain/Keystore) に保存し、HTTPS を使用し、強力な コンテンツ セキュリティ ポリシー.

セキュアなトークン ストレージ オプションの比較

Google Sign In を追加する方法は Capacitor あなたの Ionic アプリ

Step 1: アプリケーション設定 OAuth2 サービスプロバイダー

OAuth2サービスプロバイダーの設定は、すべてが順調に動作することを保証する最初で最も重要なステップです。このプロセスには、提供するアプリの要件に合ったプロバイダーの選択、リダイレクトURIなどの技術的な詳細の設定、およびクレデンシャルを安全に管理することが含まれます。これらのステップは、次の段階でOAuth2プラグインをインストールするための土台を築きます。

OAuth2サービスプロバイダーの選択

まず、アプリの機能、セキュリティ要件、互換性に合ったOAuth2サービスプロバイダーを選択してください。開発中のアプリの種類は、使用するOAuth 2.0フローと直接関係しており、プロバイダーの選択に大きな影響を与えます。 [2]. For Capacitor-based apps, it’s recommended to use the Authorization Code Flow with PKCE - this is the preferred method for mobile applications.

プロバイダーの比較の際は、セキュリティ機能に焦点を当ててください。署名されたクッキー、CSRFトークン検証、暗号化されたJWTなどを探してください。アプリが敏感なデータを扱う場合、 多要素認証 のサポートは必須です。評価の際は、コストと機能を必要に応じてバランスをとり、長時間の比較に巻き込まれないようにしてください。

リダイレクトURIの設定

OAuth2 プロバイダーにユーザーを送信する場所を示すため、リダイレクト URI は重要です。両方のモバイルとウェブプラットフォームで滑らかなエクスペリエンスを確保するには、これらの URI を適切に構成する必要があります。

モバイル アプリでは、カスタム URL スキームを使用します。これは通常、 com.example.app://callbackで表されます。ここで com.example.app はアプリのパッケージ ID に一致します。ウェブでは、 window.location.origin をリダイレクト URI として使用します。ローカルでテストしている場合、 http://localhost:8100/callback のような URL がうまく機能します。

For iOS users, keep in mind that Capacitor’s Browser plugin uses のブラウザ プラグインがSFSafariViewController を使用していることを覚えておいてください。iOS 11 以降では、このプラグインはサファリとクッキーを共有しないため、シングル サインオン機能に影響を与える可能性があります。SSO が不可欠な場合は、 [3].

ASWebAuthenticationSession

をサポートするプラグインを使用することを検討してください。クライアント資格情報を管理する

__CAPGO_KEEP_0__のクライアントシークレットを直接アプリにハードコードしたり、バージョン管理システムにコミットしたりしないでください。代わりに環境変数または安全なシークレット管理システムを使用して、シークレットを保存してください。さらに、短期間のトークンを最小限のスコープで使用することで、露出を制限しセキュリティを強化してください。

ステップ2：OAuth2 プラグインのインストールと設定

OAuth2 プロバイダーが準備できたので、次のステップは、Capacitorアプリにプラグインを追加し、iOS、Android、Webプラットフォーム向けに設定することです。

プラグインのインストール

The @byteowls/capacitor-oauth2 プラグインはほとんどのOAuth2 プロバイダーと互換性があります。互換性の問題を避けるために、Capacitor設定に合ったバージョンをインストールする必要があります。

Capacitorのバージョンに基づいてインストールコマンドを以下に示します。

• Capacitor v5: npm i @byteowls/capacitor-oauth2
• Capacitor v4: npm i @byteowls/capacitor-oauth2@4
• Capacitor v3: npm i @byteowls/capacitor-oauth2@3

インストールが完了したら、( )を実行して、ネイティブ依存関係を更新してください。このステップは、iOSおよびAndroidプロジェクトとのプラグインの統合を確実に実行するために不可欠です。このステップをスキップすると、モバイルプラットフォーム向けにコンパイルする際にビルドエラーが発生する可能性があります。npx cap sync__CAPGO_KEEP_0__

Configure Plugin Settings

OAuth2 プラグインの設定を実施するには、OAuth2 プロバイダーの設定と一致させる必要があります。 oauth2Options object authenticate() method

• appId: OAuth2 プロバイダから取得するクライアント ID。
• authorizationBaseUrl: OAuth2 プロバイダの認証エンドポイント。
• responseType: 通常、 "code" redirectUrl
• redirectUrl: この設定は、ステップ 1 で設定したリダイレクト URL と一致する必要があります。

追加のパラメータやプラットフォーム固有のオプションを設定することもできます。 accessTokenEndpoint, scope, などを設定して、認証プロセスを微調整できます。

Android の場合、 AndroidManifest.xml ファイルを更新し、正しいスキームとホスト情報を含めます。 iOS の場合、 strings.xml ファイルを修正して、リダイレクト URL スキームを登録します。 これらのプラットフォーム固有の変更により、ユーザーは認証後、再びアプリにリダイレクトされます。 Info.plist バージョン互換性を確認する必要があります。

プラグインのバージョンが Capacitor バージョンと一致しない場合、ビルドエラーまたは実行時エラーが発生する可能性があります。 Capacitor リリースと厳密に同期しているため、互換性を確認する前に進めないようにしてください。

It’s essential to verify that the plugin version matches your Capacitor version. Mismatched versions can cause build errors or runtime issues. The @byteowls/capacitor-oauth2 互換性のある Capacitor バージョン

iOS向け開発を行っている場合、Xcodeのバージョン要件に注意してください。互換性のないバージョンを使用すると、アプリのビルドが正常に完了しない可能性があります。プラグインドキュメントには、詳細な互換性テーブルが掲載されており、バージョンに関連する問題をトラブルシューティングするのに役立ちます。

インストール後に問題が発生した場合、現在のプラグインバージョンをアンインストールし、Capacitorバージョンに適合したプラグインバージョンをインストールし、syncコマンドを実行してください。この方法は、互換性のないバージョンを強制的に使用しようとするよりも効果的です。

Step 3: OAuth2認証フローのビルド

プラグインを設定した後、完全に機能する認証フローを作成する時間です。このステップでは、安全なユーザーログイン、トークン管理、ログアウトを実現し、アプリがユーザーセッションをクロスプラットフォームで管理できるようにします。

ログインフローを作成

ログインプロセスは、オプションオブジェクトを呼び出すことで始まります。このオブジェクトには、自身のプロパティを含める必要があります。 authenticate() with authorizationBaseUrl, redirectUrl、と responseType に設定する 'code' PKCE 要件を満たすために

プラグインは、ユーザーが資格情報を入力できるように、プロバイダーのログインページを開きます。ログインが成功すると、プロバイダはユーザーをアプリにリダイレクトし、トークンとユーザー情報を提供します。

ここがベストパート：ユーザーはOAuth2 プロバイダに資格情報を直接入力するので、アプリは敏感情報にアクセスできません。このメソッドは、トークン、リフレッシュトークン、ユーザー情報（メールアドレスやプロファイル詳細など）を含むレスポンスオブジェクトを返します。

iOS と Android でこのプロセスは、セキュアなウェブビューを使用して、システムブラウザとクッキーを共有します。Web プラットフォームでは、標準ブラウザのリダイレクトを使用します。リダイレクトURLを適切に設定すると、どのプラットフォームでもSmoothなユーザー体験が実現します。

トークンストレージとリフレッシュ

• ユーザーがログインした後、トークンを安全に管理することは次の優先事項です。これには、トークンを安全に保存し、セッションの中断を避けるために自動的にリフレッシュすることが含まれます。ここでは、どのように管理するかを説明します。アクセストークン
• : これらをメモリに保存して、短時間で迅速にアクセスできます。リフレッシュトークン capacitor-secure-storage : セキュアなストレージを使用してください。たとえば、プラグインを使用すると、iOS Keychainを介してAES-256でトークンを暗号化できます。 Android Keystore__CAPGO_KEEP_0__

アプリが再起動したときは、ユーザーが再度パスワードを入力する必要なく、保存されたトークンを確認してログインさせることができます。

セッションを有効に維持するには、リフレッシュトークンを期限切れ前に取得してください。アクセストークンが期限切れになる前に、API呼び出しを行う前に、有効期限が近い場合は、OAuth2 プロバイダーから新しいアクセストークンを取得するためにリフレッシュトークンを使用してください。追加の信頼性のために、ネットワークが再接続されたときにトークン リフレッシュを再試行するロジックを含めることもお勧めします。リフレッシュトークンが期限切れまたは削除された場合は、ユーザーをログインフローにリダイレクトして再認証するようにしてください。

Logout機能を追加する

ログアウトプロセスは安全で効果的である。まず、プロバイダーのエンドポイントを介してリフレッシュトークンを取り消す。次に、セキュアストレージからトークンをクリアし、ユーザーデータをリセットして、すべてのセッションを終了する。

ローカルなトークンだけを削除するだけでは十分ではない。OAuth2プロバイダは、自動的にユーザーを再認証できるサーバーサイドセッションを維持していることが多い。リフレッシュトークンを取り消すことで、認可許可のトークンチェーンにリンクされた保存されたクレデンシャルが再利用できないようにする。

「JWT Access Tokensは取り消すことができない。有効期限が切れるまで有効である。Bearer Tokensなので、無効にする方法がない」と、Auth0の従業員であるlihua.zhang氏が述べている。 [5]

トークンを取り消すには、リフレッシュトークンをプロバイダーのトークン取り消しエンドポイントに呼び出し、ローカルストレージをクリアし、キャッシュされたユーザーデータをリセットし、ログイン画面にユーザーを戻す。

SSOのセットアップの場合、同じプロバイダーを使用する他のアプリのセッションも終了するかどうかを決定する必要がある。また、ネットワークの切断中にログアウトプロセスがSmoothに動作するようにするために、ログアウト要求をローカルに保存し、接続が復元されたときに再試行する。

ステップ4：OAuth2統合をテストする

After OAuth2 設定を設定し、認証フローを開発した後、次のステップは徹底的なテストです。これにより、デバイスとプラットフォームを問わず、信頼性の高いユーザー体験を提供するように、統合がうまく機能します。テストには、モバイル デバイスとウェブ ブラウザ上で機能を検証し、リリースする前に潜在的な問題を特定して解決することが含まれます。

iOS と Android でテスト

iOS と Android の物理デバイスで認証プロセスを完全にテストすることから始めます。

• iOS の場合URL スキームが正しく設定されていることを確認し、OAuth2 プロバイダーからリダイレクトを適切に処理するようにアプリが動作することを確認します。認証要求に "http" を使用しないでください。エラーが発生する可能性があります。代わりに、Google Sign-In for iOS または OpenID Foundation’s AppAuth for iOS を使用して、認証フローを効果的に処理します。 Info.plist Android の場合 WKWebView Android の場合、URL を含む正しいインテント フィルタが含まれていることを確認します。iOS と同様に、認証要求に "http" を使用しないでください。エラーが発生する可能性があります。 disallowed_useragent iOS と Android の物理デバイスで認証プロセスを完全にテストすることから始めます。 [6].

• URL スキームが正しく設定されていることを確認し、OAuth2 プロバイダーからリダイレクトを適切に処理するようにアプリが動作することを確認します。認証要求に "http" を使用しないでください。エラーが発生する可能性があります。代わりに、Google Sign-In for iOS または OpenID Foundation’s AppAuth for iOS を使用して、認証フローを効果的に処理します。URL を含む正しいインテント フィルタが含まれていることを確認します。iOS と同様に、認証要求に "http" を使用しないでください。エラーが発生する可能性があります。 AndroidManifest.xml 認証要求に "http" を使用しないでください。エラーが発生する可能性があります。 android.webkit.WebView 認証要求に "http" を使用しないでください。エラーが発生する可能性があります。代わりに、Google Sign-In for iOS または OpenID Foundation’s AppAuth for iOS を使用して、認証フローを効果的に処理します。 disallowed_useragent エラー。Google Sign-InやOpenID AppAuth for Androidなどのライブラリを使用することをお勧めします。 [6].

両方のケースで、認可サーバが利用できない場合のエラーシナリオをテストしてください。 [7]アプリが複数のパーミッション（スコープ）を要求する場合、許可されたものと拒否されたものを確認し、拒否されたものが存在する場合の対応を実装してください。 [6].

テスト用Web

Webプラットフォームの場合、開発者ツールを使用してネットワークリクエストを監視し、トークンのセキュリティを確保してください。OAuth 2.0 Playgroundなどのツールを使用してフローをテストできます。 [10]HTTPインターセプティングプロキシとして ZAP または BurpSuite を使用すると、テスト中により深い洞察が得られます。 [11].

テスト中に、パブリッククライアント用に推奨されるAuthorization Code グラントとPKCEを使用してください。URLパラメータではなく、POSTパラメータまたはヘッダ値を使用してシークレットを安全に送信し、さらにセキュリティヘッダを実装して保護を強化してください。 Referrer-Policy to enhance protection [11].

Fix Common Issues

テスト中に発生する可能性のある一般的な問題を解決する必要があります。

• Incorrect Redirect URIsリダイレクト URI が一致しない場合、 capacitor.config.json file in your Capacitor app, and the native platform manifests.

  が認可されていない [8]

• エラーが発生します。OAuth2 プロバイダーの設定、__CAPGO_KEEP_0__ アプリのファイル、およびネイティブ プラットフォーム マニフェストのすべてのリダイレクト URI を一致させる必要があります。“The sso accepted route needs to support the combination of iosScheme and hostname: ionic://com.myapp.mybundle” - LBopp [9].

• PKCE Verification Errors: Errors like “Plugin is not implemented on iOS” typically indicate missing configurations or issues within the Capacitor environment. Enable logging in your OAuth2 plugin to help identify and resolve these problems [4].

• Plugin Implementation Errorsプラグインの実装エラーは、iOS では「プラグインが実装されていません」というエラーが発生することがあります。これは、code 環境内の構成が不足しているか、問題があることを示唆しています。OAuth2 プラグインでログを有効にすると、これらの問題を特定して解決するのに役立ちます。 [4].

Step 5: OAuth2実装をセキュアにする

OAuth2統合を保護することは、敏感なデータを保護し、脆弱性を最小限に抑えるために不可欠です。以下に、実装をセキュアに保つための重要な実践を示します。

有効化 PKCE セキュリティの向上のために

One of the most effective ways to secure your authorization flow is by enabling PKCE (Proof Key for Code Exchange). PKCE helps prevent unauthorized interception of authorization codes. Here’s how it works:

• ランダムな code_verifier 43から128の文字の間の
• 次に、 code_challenge 認可コードを code_verifier SHA-256でハッシュし、結果をbase64 URL形式でエンコードすることで作成します。

If you’re using the capacitor-community/generic-oauth2 plugin, enabling PKCE is straightforward. Here’s an example configuration:

{
  responseType: "code",
  pkceEnable: true,
  redirectUrl: "com.companyname.appname:/"
}

This plugin automatically handles PKCE and does not support the Code Flow without it. The code_challenge_method is set to “S256” by default for proper validation [12].

OAuth2トークンのセキュリティストレージ

OAuth2トークンのセキュアな保存は、不正アクセスの防止に不可欠です。ネイティブモバイルアプリでは、オペレーティングシステムによって提供されるセキュアな保存を活用してください:

• iOSでは、 Keychain を使用してハードウェアバックアップされた暗号化とOSレベルの保護を実現します。
• Androidでは、 Keystore, これはハードウェアバックアップされた暗号化とOSレベルの保護もサポートします。 生物認証 追加のセキュリティのために。

Web アプリケーションでは、 HttpOnly セキュア クッキー 属性を付与してクロスサイト スクリプティング (XSS) のリスクを軽減する SameSite セキュア ストレージ オプションの簡単な比較:

ストレージ オプション

セキュリティの向上のために、短期間のアクセストークンと暗号化されたストレージを使用することを検討してください。たとえば、Auth0では、各アプリケーションあたり200個のアクティブなリフレッシュトークンを制限してリスクを軽減しています。 [13]また、HttpOnly Cookieを使用するBackend for Frontend (BFF) プロキシもセキュリティを強化できます。 [14].

セキュリティ設定

安全なストレージに加えて、Content Security Policies (CSP)を実装することで、クロスサイトスクリプティング(XSS)やcodeインジェクションなどの攻撃からアプリケーションを保護できます。CSPはサーバー側で設定できます。 Content-Security-Policy HTTPヘッダーを使用するか、HTMLにタグを追加することでCSPを設定できます。 <meta> CSPを設定する際に重点的に取り組むべきディレクティブには、以下のものがあります。

default-src

• : すべてのコンテンツタイプのデフォルトルールを設定します。セキュリティ設定
• script-srcJavaScriptの実行を許可するファイルを制御します。
• connect-srcAPIの呼び出しやOAuth2のインタラクションを管理します。
• frame-ancestorsiframe内でアプリを埋め込むことを許可しないことでクリックジャッキングを防止します。

最大の保護を得るには、厳格なnonceやハッシュを使用し、広範な許可リストではなく、代わりに unsafe-inline や unsafe-evalなどのディレクティブを避けることをお勧めします。 upgrade-insecure-requests HTTPSからHTTPに移行しているアプリの場合、HTTPSへの移行を支援するために frame-ancestors 'none'.

ディレクティブを追加することを検討してください。

OAuth2のコンテンツを他の場所で埋め込まれないようにするには、

You’ve successfully implemented OAuth2 authentication in your Capacitor app by following five core steps. These included setting up your OAuth2 provider, installing the required plugins, creating the authentication flow, testing across platforms, and securing your integration using PKCE and proper token storage. It’s important to remember that OAuth 2.0 is an 認可プロトコル, not an authentication protocol [1]の

Security is crucial, especially for mobile apps. Organizations using OAuth 2.0 report a 34% drop in API access security incidents compared to those relying on basic authentication methods [19]の

の

の

の

• の のの [16].
• Multi-Factor Authentication (MFA): セキュリティを強化するために追加の保護層を追加する [17].
• Progressive Profiling: ユーザー体験とオンボーディングを向上させるために、ユーザーデータを段階的に収集する [15].

For ongoing maintenance and updates, consider tools like Capgo, which allows you to push live updates, fixes, and new features instantly - bypassing the need to wait for app store approvals. This can be especially useful for handling security patches or rolling out new authentication features quickly.

More Resources

To further enhance your OAuth2 implementation, take advantage of these resources and strategies:

• API Gateway Security: デプロイメントを強化するために、認証、認可、キャッシュ、ロギング、分析を実装する [20].

• Aaron Parecki’s Advice: Aaron Parecki著の「OAuth 2.0 Simplified」によると、 OAuth 2.0 Simplified:

  “The Authorization Code Flow is the most secure of the OAuth 2.0 flows and should be used whenever possible for server-side applications” [18].

次のステップを導くための簡単な参照表です。

最新のセキュリティの検査と実装の最新化を実施して先行する。例えば、OAuth 2.1では、PKCEをすべての認証code要求に必要とし、より安全でないフローを廃止しています。 [19]さらに、CapacitorドキュメントとOAuth2プラグインリポジトリは、継続的な技術支援を提供して、認証システムの維持と改善を支援しています。

FAQs

::: faq

OAuth2の認証CodeフローにPKCEを使用する理由は何ですか?

OAuth2の認証CodeフローにPKCEを使用する理由は何ですか?

The OAuth2の認証CodeフローにPKCEを使用することは、モバイルアプリケーションにとって最適な選択肢です。なぜなら、認証Codeのインジェクションと中間者攻撃などのリスクを解決することで、セキュリティを向上させるからです。PKCE(Proof Key for __CAPGO_KEEP_1__ Exchange)は、認証サーバーが検証する独自の__CAPGO_KEEP_2__チャレンジを追加することで、保護層を追加します。このため、認証プロセスを完了するのは、意図したアプリのみが可能になります。 is a go-to choice for mobile apps because it boosts security by addressing risks like authorization code interception and man-in-the-middle attacks. PKCE (Proof Key for Code Exchange) works by adding an extra layer of protection: it requires a unique code challenge that the authorization server validates. This ensures that only the intended app can finalize the authentication process.

::: faq

iOS、Android、WebアプリケーションでOAuth2トークンを安全に保存する最良の方法は何ですか?

iOS、Android、WebアプリケーションでOAuth2トークンを安全に保存する最良の方法は何ですか?

OAuth2 トークンをさまざまなプラットフォーム間で安全に保つには、各プラットフォームに合わせたセキュア ストレージ ソリューションを使用することが不可欠です。 iOS の場合、Keychain Services が、Android の場合、Android Keystore システムが、セキュアなデータを保護するために特に設計されています。Web 上では、セキュアなクッキーまたは暗号化されたブラウザ ストレージが、有効な代替手段として機能します。

トークンに追加のセキュリティ層を提供するには、AES-256 のような暗号化を追加することができます。 短命のトークンを使用し、必要に応じてセキュアに更新すると、リスクがさらに軽減されます。 PKCE (Proof Key for __CAPGO_KEEP_0__ Exchange) を OAuth2 プロセス中に実装することは、未承認のアクセスをブロックするための賢い動きです。 PKCE (Proof Key for Code Exchange) FAQ

OAuth2統合をテストする際に、__CAPGO_KEEP_0__ アプリで最も一般的な問題は何ですか。また、どのように解決できますか?

OAuth2統合をテストする際に、開発者は Capacitor アプリでいくつかの一般的な障壁にぶつかる可能性があります。

When testing OAuth2 integration in Capacitor apps, developers might run into a few common roadblocks. Here’s a quick rundown of what to watch out for:

• 無効なクライアント認証情報: クライアント ID とシークレットを正しく設定し、OAuth プロバイダーの設定に記載されている詳細と一致させてください。小さなタイプミスでも問題が発生する可能性があります。
• Redirect URI の不一致: アプリのリダイレクト URI は、OAuth プロバイダで登録されている URI と完全に一致する必要があります。再確認して、不必要な頭痛を避けましょう。
• トークン有効期限: トークンは永続的ではありません。有効期限切れのトークンを処理するための信頼性の高いトークン再取得システムを設定して、ユーザー体験を中断せずに、問題を早期に検出して対処するようにしてください。
• スコープの不一致: アプリで要求するスコープは、OAuth プロバイダで設定されているスコープと一致する必要があります。スコープが一致しないと、予期しないエラーが発生する可能性があります。

これらの問題を解決するには、OAuth 設定を徹底的に確認し、強力なエラーハンドリングを実装して、問題を早期に検出して対処し、異なるシナリオ下で認証フローをテストすることが重要です。 Capgo などのツールを使用すると、更新や修正を直接アプリにプッシュできるため、アプリストアの承認を待つ必要がなく、開発が効率的でユーザーが満足できるようになります。 :::

5 つのステップで Capacitor アプリに OAuth2 を実装する

「を使用している場合 5 つのステップで Capacitor アプリに OAuth2 を実装する を使用してセキュリティと合規性を計画する場合、を接続する 暗号化 暗号化の実装詳細のための暗号化 法的合致 法的合致の実装詳細のための法的合致 Capgo セキュリティ スキャナー Capgo セキュリティ スキャナーの製品ワークフローのためのCapgo セキュリティ スキャナー Capgo セキュリティ Capgo セキュリティの製品ワークフローのためのCapgo セキュリティ Capgo トラスト センター Capgo トラスト センターの製品ワークフローのためのCapgo トラスト センター