시작하기

설치

npm

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

yarn

yarn add @capgo/capacitor-autofill-save-password
npx cap sync

pnpm

pnpm add @capgo/capacitor-autofill-save-password
npx cap sync

bun

bun add @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"
    ]
  }
}

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>

사용 예제

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

API Reference

promptDialog(options)

promptDialog(options: SavePasswordOptions) => Promise<void>

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

Param	Type
options	SavePasswordOptions

readPassword()

readPassword() => Promise<SavedCredentials>

시스템 키체인에서 저장된 자격 증명을 검색합니다.

반환값: Promise<SavedCredentials>

인터페이스

SavePasswordOptions

Prop	Type	Description
username	string	저장할 사용자 이름
password	string	저장할 비밀번호
url	string	iOS 전용 - 연결된 도메인 URL (선택 사항)

SavedCredentials

Prop	Type	Description
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는 자격 증명이 승인된 앱에서만 액세스할 수 있도록 보장합니다
• 자격 증명 관리를 위한 플랫폼 보안 지침을 따르세요
• 민감한 애플리케이션에 대한 추가 보안 조치 구현을 고려하세요