Contact Picker API는 사용자가 연락처 목록에서 연락처를 쉽게 공유할 수 있도록 합니다.
Contact Picker API란 무엇인가요?
모바일 기기에서 사용자의 연락처에 액세스하는 것은 iOS/Android 앱의 기능이 되어 왔습니다. 시간이 거의 다 됐을 거야. 사용자가 자주 묻는 기능 요청 중 하나입니다. 웹 개발자들의 말을 듣는데, 주로 iOS/Android 앱을 빌드하는 주된 이유이기도 합니다. 있습니다.
Android M 이상의 Chrome 80부터 사용할 수 있는 연락처 선택도구 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의 경우 연락처 선택 도구를 사용하려면 Android M 이상이 필요합니다.
연락처 선택도구 열기
Contact Picker API의 진입점은 navigator.contacts.select()입니다.
호출하면 프로미스가 반환되고 연락처 선택 도구가 표시되어
사용자가 사이트와 공유할 연락처를 선택합니다. 후(After)
공유할 항목을 선택하고 완료를 클릭하면 프라미스는
사용자가 선택한 연락처 배열입니다.
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.
}
연락처 선택 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 팀은 인코더와 디코더에 강력한 웹 플랫폼 기능에 대한 액세스 제어, 사용자 제어, 투명성, 인체공학을 포함합니다. 각각에 대해 설명해 드리겠습니다.
사용자 제어
사용자의 선택 도구를 통해서이며 안전한 최상위 탐색 컨텍스트에서 사용자 동작 이렇게 하면 사이트에서 페이지 로드 시 선택 도구를 표시하거나 임의로 표시하는 것을 방지할 수 있습니다. 선택 도구를 사용할 수 있습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">모든 연락처를 일괄 선택할 수 있는 옵션은 없음 특정 사용자와 공유해야 하는 연락처만 선택할 수 있습니다. 있습니다. 또한 사용자는 사이트와 공유할 속성을 제어할 수 있습니다. 선택 도구 상단의 속성 버튼을 전환할 수 있습니다.
투명성
어떤 연락처 세부정보가 공유되고 있는지 명확히 하기 위해 선택 도구는 항상
연락처의 이름, 아이콘, 사이트에 있는 모든 속성을 표시합니다.
있습니다. 예를 들어 사이트에서 name, email, tel를 요청하면
세 가지 속성이 모두 선택 도구에 표시됩니다. 이와 달리
사이트에서 tel만 요청하면 선택 도구에 이름만 표시되며
전화번호입니다.
<ph type="x-smartling-placeholder">name, email 및 다음을 요청하는 사이트
tel, 연락처 1개가 선택되었습니다.
<ph type="x-smartling-placeholder">tel만 요청하는 사이트, 연락처 1개 선택됨
<ph type="x-smartling-placeholder">연락처를 길게 누르면 연락처가 공유될 수 있습니다. Cheshire Cat 연락처 이미지 참고.
권한 지속성 없음
연락처에 대한 액세스는 주문형이며 유지되지 않습니다. 사이트에서
사용자 동작으로 navigator.contacts.select()를 호출해야 합니다.
사용자가 공유하려는 연락처를 개별적으로 선택해야 합니다.
할 수 있습니다.
의견
Chrome팀에서 연락처 선택도구 사용 경험에 대한 의견을 듣고자 합니다. API에 액세스할 수 있습니다.
구현에 문제가 있습니까?
Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 어떻게 해야 할까요?
- https://new.crbug.com에서 버그를 신고합니다. 최대한 많은
버그 재현을 위한 간단한 안내를 제공하고,
구성요소를
Blink>Contacts로 설정합니다. Glitch가 잘 작동합니다. 문제를 재현하는 데 도움을 드리고자 합니다.
API를 사용할 계획이신가요?
Contact Picker API를 사용할 계획이신가요? 여러분의 공적 후원은 Chrome팀이 기능의 우선순위를 정하고 다른 브라우저 공급업체에 지원하는 것이 매우 중요합니다
- WICG 담화 대화목록에서 사용 계획을 공유합니다.
- 해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다.
#ContactPicker및 어디에서 어떻게 사용하는지 알려주세요.
유용한 링크
- 공개 설명
- 연락처 선택도구 사양
- Contact Picker API 데모 및 Contact Picker API 데모 소스
- 버그 추적
- ChromeStatus.com 항목
- 깜박임 구성요소:
Blink>Contacts
감사합니다.
감사합니다.
기능을 구현하고
코드
훔치고 데모를 위해 리팩터링했습니다.
추신: 연락처 선택도구의 이름은 이상한 나라의 앨리스에 나오는 캐릭터입니다.