웹용 Contact Picker

# Contact Picker API란 무엇입니까?

<style> #video-demo { max-height: 600px; } </style>

모바일 장치에서 사용자의 연락처에 대한 액세스는 (거의) 초기부터 있던 iOS/Android 앱의 기능입니다. 웹 개발자로부터 가장 많이 듣는 기능 요청 중 하나이며 iOS/Android 앱을 빌드하는 주요 이유이기도 합니다.

Android의 Chrome 80에서 사용할 수 있는 Contact Picker API는 사용자가 자신의 연락처 목록에서 항목을 선택하고 선택한 항목의 제한된 세부 정보를 웹 사이트와 공유할 수 있도록 하는 주문형 API입니다. 이를 통해 사용자는 원하는 시간에 원하는 내용만 공유할 수 있으며 사용자가 친구 및 가족에게 더 쉽게 도달하고 연결할 수 있습니다.

예를 들어 웹 기반 이메일 클라이언트는 Contact Picker API를 사용하여 이메일 수신자를 선택할 수 있습니다. Voice-over-IP 앱은 전화를 걸 전화 번호를 조회할 수 있습니다. 또는 소셜 네트워크는 사용자가 이미 가입한 친구를 찾는 데 도움이 될 수 있습니다.

# 현재 상태

# Contact Picker API 사용

Contact Picker API는 원하는 연락처 정보 유형을 지정하는 옵션 매개변수가 있는 메서드 호출을 필요로 합니다. 두 번째 방법은 기본 시스템이 제공할 정보를 알려줍니다.

# 기능 감지

Contact Picker API가 지원되는지 확인하려면 다음을 사용하세요.

const supported = ('contacts' in navigator && 'ContactsManager' in window);

또한 Android에서 Contact Picker를 사용하려면 Android M 이상이 필요합니다.

# Contact Picker 열기

Contact Picker API의 진입점은 navigator.contacts.select() 입니다. 호출되면 프라미스를 반환하고 Contact Picker를 표시하여 사용자가 사이트와 공유할 연락처를 선택할 수 있도록 합니다. 공유할 항목을 선택하고 완료를 클릭하면 프라미스는 사용자가 선택한 연락처 배열을 처리합니다.

select()를 호출할 때 첫 번째 매개변수로 반환하려는 속성 배열(허용되는 값: 'name', 'email', 'tel', 'address' 또는 'icon')과 선택적으로 여러 연락처를 두 번째 매개변수로 선택할 수 있는지 여부를 제공해야 합니다.

const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};

try {
  const contacts = await navigator.contacts.select(props, opts);
  handleResults(contacts);
} catch (ex) {
  // Handle any errors here.
}

Contact Picker API는 안전한 최상위 탐색 컨텍스트에서만 호출할 수 있으며 다른 강력한 API와 마찬가지로 사용자 동작이 필요합니다.

# 사용 가능한 속성 감지

사용 가능한 속성을 감지하려면 navigator.contacts.getProperties()를 호출합니다. 사용 가능한 속성을 나타내는 문자열 배열을 처리하는 프라미스를 반환합니다. 예: ['name', 'email', 'tel', 'address']. 이러한 값을 select()로 전달할 수 있습니다.

속성은 항상 사용할 수 있는 것은 아니며 새 속성이 추가될 수도 있습니다. 나중에는 다른 플랫폼 및 연락처 소스에서 공유되는 속성을 제한할 수도 있습니다.

# 결과 처리

Contact Picker API는 연락처 배열을 반환하고 각 연락처에는 요청된 속성의 배열이 포함됩니다. 연락처에 요청된 속성에 대한 데이터가 없거나 사용자가 특정 속성을 공유하지 않도록 선택하는 경우 API는 빈 배열을 반환합니다. (사용자 제어 섹션을 통해 사용자가 속성을 선택하는 방법을 설명합니다.)

예를 들어 사이트에서 name, email, tel을 요청하고 사용자가 이름 필드에 데이터가 있는 단일 연락처를 선택하는 경우 두 개의 전화번호를 제공하지만 이메일 주소가 없는 경우 반환되는 응답은 다음과 같습니다.

[{
  "email": [],
  "name": ["Queen O'Hearts"],
  "tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]

# 보안 및 권한

Chrome 팀은 사용자 제어, 투명성, 인체 공학을 포함하여 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 핵심 원칙을 사용하여 Contact Picker API를 설계하고 구현했습니다. 각각에 대해 설명하겠습니다.

# 사용자 제어

사용자 연락처에 대한 액세스는 선택기를 통해 이루어지며 안전한 최상위 탐색 컨텍스트에서 사용자 동작으로만 호출할 수 있습니다. 이렇게 하면 사이트가 페이지 로드 시 선택기를 표시하거나 컨텍스트 없이 선택기를 무작위로 표시할 수 없습니다.

사용자가 특정 웹사이트에 대해 공유해야 하는 연락처만 선택할 수 있도록 모든 연락처를 일괄 선택하는 옵션은 없습니다. 사용자는 선택기 상단에 있는 속성 버튼을 토글하여 사이트와 공유되는 속성을 제어할 수도 있습니다.

# 투명성

공유되는 연락처 세부 정보를 명확히 하기 위해 선택기는 항상 연락처의 이름 및 아이콘과 함께 사이트에서 요청한 모든 속성을 표시합니다. 예를 들어 사이트에서 name, email, tel을 요청하면 세 가지 속성이 모두 선택기에 표시됩니다. 또는 사이트에서 tel만 요청하는 경우 선택기에 이름과 전화번호만 표시됩니다.

연락처를 길게 누르면 연락처를 선택할 경우 공유되는 모든 정보가 표시됩니다. (Cheshire Cat 연락처 이미지 참조.)

# 권한 지속성 없음

연락처에 대한 액세스는 주문형이며 지속되지 않습니다. 사이트에서 액세스를 원할 때마다 사용자 동작으로 navigator.contacts.select()를 호출해야 하며 사용자는 사이트와 공유할 연락처를 개별적으로 선택해야 합니다.

# 피드백

Chrome 팀은 Contact Picker API에 대한 귀하의 경험을 듣고 싶습니다.

# 구현에 문제가 있습니까?

Chrome 구현에서 버그를 찾으셨나요? 아니면 구현이 사양과 다른가요?

• https://new.crbug.com에서 버그를 신고하세요. 가능한 한 많은 세부 정보를 포함하고 버그를 재현하기 위한 간단한 지침을 제공하고 구성요소를 Blink>Contacts로 설정해 주세요. Glitch는 빠르고 쉽게 문제 재현을 공유하는 데 유용합니다.

# API를 사용할 계획이 있으신가요?

Contact Picker API를 사용할 계획입니까? Chrome 팀이 기능의 우선 순위를 정하고 브라우저 공급업체에 이 API의 지원이 얼마나 중요한지 보여주기 위해서는 여러분의 공개 지원이 큰 힘이 됩니다.

• WICG Discourse 스레드에서 사용 계획을 공유하세요.
• #ContactPicker로 해시태그 @ChromiumDev를 포함한 트윗을 보내서 어디에서 어떻게 활용하고 있는지 알려주세요.

# 유용한 링크

• 공개 설명문
• Contact Picker 사양
• Contact Picker API 데모 및 Contact Picker API 데모 소스
• 버그 추적
• ChromeStatus.com 항목
• Blink 구성 요소: Blink>Contacts

# 감사의 말

이 기능을 구현하고 있는 Finnur Thorarinsson과 Rayan Kanso, 그리고 데모를 위해 뻔뻔하지만 제가 코드를 도용하고 리팩토링한 대상인 Peter Beverloo에게 감사의 인사를 전합니다.

추신: 제 Contact Picker의 이름은 이상한 나라의 앨리스에 나오는 캐릭터에서 가져왔습니다.