@capgo/capacitor-autofill-save-password

シームレスな認証エクスペリエンスのためにシステム統合でパスワード自動入力と認証情報管理を有効にします。

概要

Capacitor Autofill Save Passwordプラグインは、Capacitorアプリケーション用のパスワード保存および自動入力機能を提供します。このプラグインは、安全なパスワードストレージと取得でシームレスな認証エクスペリエンスを提供するために、システムレベルの認証情報管理と統合します。

パスワード保存

認証情報をシステムキーチェーンに安全に保存 🔐

自動入力統合

システムレベルのパスワード自動入力サポート 🗝️

クロスプラットフォーム

iOSサポート、Androidは開発中 📱

ドメイン関連付け

シームレスな認証のための関連ドメイン ❤️

インストール

npm install @capgo/capacitor-autofill-save-password
npx cap sync

プラットフォームサポート

iOS: 完全サポート（iOS 18.3以前のバージョンで動作）
Android: 開発中

iOS設定

1. Associated Domainsの設定

Apple Developer アカウントで Associated Domains を設定し、App.entitlements ファイルに追加します:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.developer.associated-domains</key>
    <array>
        <string>webcredentials:yourdomain.com</string>
        <string>webcredentials:www.yourdomain.com</string>
    </array>
</dict>
</plist>

2. Web Credentialの設定

ウェブサイトに .well-known/apple-app-site-association ファイルを追加します:

{
  "webcredentials": {
    "apps": [
      "TEAMID.com.yourcompany.yourapp"
    ]
  }
}

コアAPIメソッド

パスワード管理

promptDialog(options) - パスワードをシステムキーチェーンに保存
readPassword() - キーチェーンから保存されたパスワードを読み取る

使用例

import { SavePassword } from '@capgo/capacitor-autofill-save-password';

// ログイン成功後にパスワードを保存
async function login(username: string, password: string) {
  try {
    // ここでログインロジックを実行
    const loginSuccess = await performLogin(username, password);

    if (loginSuccess) {
      // パスワードを保存するようユーザーに促す
      await SavePassword.promptDialog({
        username: username,
        password: password,
        url: 'https://yourdomain.com' // iOSのみ
      });

      console.log('Password saved successfully');
    }
  } catch (error) {
    console.error('Failed to save password:', error);
  }
}

// 自動入力用に保存されたパスワードを読み取る
async function loadSavedCredentials() {
  try {
    const credentials = await SavePassword.readPassword();

    if (credentials.username && credentials.password) {
      console.log('Found saved credentials');
      // ログインフォームに事前入力
      return {
        username: credentials.username,
        password: credentials.password
      };
    }
  } catch (error) {
    console.error('Failed to read saved password:', error);
  }

  return null;
}

Android設定（開発中）

将来のAndroidサポートには、以下の設定が必要になります:

1. Google Services Plugin

android/app/build.gradle に追加します:

apply plugin: 'com.google.gms.google-services'

2. ドメイン設定

android/app/src/main/res/values/strings.xml に追加します:

<resources>
    <string name="asset_statements">
        [{
            "relation": ["delegate_permission/common.handle_all_urls"],
            "target": {
                "namespace": "web",
                "site": "https://yourdomain.com"
            }
        }]
    </string>
</resources>

3. Google Services JSON

Androidプロジェクトに google-services.json を追加します。

APIリファレンス

promptDialog(options)

ユーザー認証情報をシステムキーチェーンに保存します。

interface SavePasswordOptions {
  username: string;
  password: string;
  url?: string; // iOSのみ - 関連ドメインURL
}

readPassword()

システムキーチェーンから保存された認証情報を取得します。

interface SavedCredentials {
  username: string;
  password: string;
}

ログインフローとの統合

import { SavePassword } from '@capgo/capacitor-autofill-save-password';

class AuthService {
  async login(username: string, password: string) {
    try {
      // バックエンドで認証
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });

      if (response.ok) {
        // 認証情報の保存を提案
        await this.offerToSavePassword(username, password);
        return true;
      }
    } catch (error) {
      console.error('Login failed:', error);
    }
    return false;
  }

  private async offerToSavePassword(username: string, password: string) {
    try {
      await SavePassword.promptDialog({
        username,
        password,
        url: 'https://yourdomain.com'
      });
    } catch (error) {
      // ユーザーが保存を拒否したか、エラーが発生した
      console.log('Password not saved:', error);
    }
  }

  async loadSavedCredentials() {
    try {
      return await SavePassword.readPassword();
    } catch (error) {
      console.log('No saved credentials found');
      return null;
    }
  }
}

ベストプラクティス

認証が成功した後にのみパスワードの保存を促す
ユーザーがパスワードの保存を拒否した場合を適切に処理する
キーチェーンアクセスの失敗に対する適切なエラーハンドリングを実装する
シームレスなウェブアプリ認証情報共有のために関連ドメインを使用する
異なるiOSバージョン間で自動入力機能をテストする

セキュリティに関する考慮事項

認証情報は適切なセキュリティフラグでシステムキーチェーンに保存されます
関連ドメインにより、認証情報は認可されたアプリのみがアクセスできることが保証されます
認証情報管理については、プラットフォームのセキュリティガイドラインに従ってください
機密性の高いアプリケーションには追加のセキュリティ対策の実装を検討してください

制限事項

Androidサポートは現在開発中です
iOSには適切な関連ドメイン設定が必要です
自動入力の動作は異なるiOSバージョン間で異なる場合があります
認証情報の保存とアクセスにはユーザーの同意が必要です

ドキュメント

詳細な実装ガイドと高度な統合パターンについては、完全なドキュメントを確認してください。