@capgo/capacitor-autofill-save-password

원활한 인증 경험을 위해 시스템 통합으로 비밀번호 자동 완성 및 자격 증명 관리를 활성화합니다.

개요

Capacitor Autofill Save Password 플러그인은 Capacitor 애플리케이션에 비밀번호 저장 및 자동 완성 기능을 제공합니다. 이 플러그인은 시스템 수준 자격 증명 관리와 통합되어 안전한 비밀번호 저장 및 검색으로 원활한 인증 경험을 제공합니다.

비밀번호 저장

시스템 키체인에 자격 증명을 안전하게 저장 🔐

자동 완성 통합

시스템 수준 비밀번호 자동 완성 지원 🗝️

크로스 플랫폼

Android 개발이 진행 중인 iOS 지원 📱

도메인 연결

원활한 인증을 위한 Associated domains ❤️

설치

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';

// Save password after successful login
async function login(username: string, password: string) {
  try {
    // Perform your login logic here
    const loginSuccess = await performLogin(username, password);

    if (loginSuccess) {
      // Prompt user to save password
      await SavePassword.promptDialog({
        username: username,
        password: password,
        url: 'https://yourdomain.com' // iOS only
      });

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

// Read saved password for autofill
async function loadSavedCredentials() {
  try {
    const credentials = await SavePassword.readPassword();

    if (credentials.username && credentials.password) {
      console.log('Found saved credentials');
      // Pre-fill login form
      return {
        username: credentials.username,
        password: credentials.password
      };
    }
  } catch (error) {
    console.error('Failed to read saved password:', error);
  }

  return null;
}

Android 구성 (작업 진행 중)

향후 Android 지원을 위해 다음 구성이 필요합니다:

1. Google Services 플러그인

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 Reference

promptDialog(options)

시스템 키체인에 사용자 자격 증명을 저장합니다.

interface SavePasswordOptions {
  username: string;
  password: string;
  url?: string; // iOS only - associated domain 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 {
      // Authenticate with your backend
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });

      if (response.ok) {
        // Offer to save credentials
        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) {
      // User declined to save or error occurred
      console.log('Password not saved:', error);
    }
  }

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

모범 사례

성공적인 인증 후에만 비밀번호 저장을 요청하세요
사용자가 비밀번호 저장을 거부하는 경우를 우아하게 처리하세요
키체인 액세스 실패에 대한 적절한 오류 처리를 구현하세요
웹-앱 자격 증명 공유를 원활하게 하려면 associated domains를 사용하세요
다양한 iOS 버전에서 자동 완성 기능을 테스트하세요

보안 고려 사항

자격 증명은 적절한 보안 플래그와 함께 시스템 키체인에 저장됩니다
Associated domains는 자격 증명이 승인된 앱에서만 액세스할 수 있도록 보장합니다
자격 증명 관리를 위한 플랫폼 보안 지침을 따르세요
민감한 애플리케이션에 대한 추가 보안 조치 구현을 고려하세요

제한 사항

Android 지원은 현재 개발 중입니다
iOS는 적절한 associated domains 구성이 필요합니다
자동 완성 동작은 다양한 iOS 버전에 따라 달라질 수 있습니다
자격 증명 저장 및 액세스에 대한 사용자 동의가 필요합니다

문서

자세한 구현 가이드 및 고급 통합 패턴은 전체 문서를 확인하세요.