Przewodnik po szybkiej i zweryfikowanej rejestracji

Omówienie

Użytkownicy przyzwyczaili się do życia i działania w cyfrowym świecie. w którym wygoda, szybkość i bezpieczeństwo są podstawowymi oczekiwaniami. Gdy ubiegają się o czymś, na przykład o kartę kredytową, konto bankowe lub pożyczkę, oczekują, że ten proces będzie szybki i prosty.

Im więcej użytkowników musi wpisywać lub wpisywać powielone dane, tym mniejsze prawdopodobieństwo na utrzymanie ich klientów. Tworzenie krótkich, łatwych Weryfikacja poprawi wrażenia użytkowników, a jednocześnie zatrzymując użytkowników w witrynie.

Samodzielnie wprowadzane adresy mogą powodować zmniejszenie liczby konwersji, błędne. dane z systemu zarządzania relacjami z klientami (CRM) i kosztowne błędy w dostawie. Szybkie Zweryfikowana rejestracja ułatwia rejestrację szybkie sugerowanie adresów w pobliżu – wystarczy kilka kliknięć wyświetlanie wpisanego adresu w celu wizualnego potwierdzenia, co pomaga użytkownikowi mieć pewność, że wpisał właściwy adres. Weryfikacja korzystania z adresu użytkownika korzystającego z jego bieżącej lokalizacji pomaga też zapobiegać oszustwom. i zwiększa zaufanie użytkowników do Twoich produktów i usług. Może ona też zwiększyć zaufanie kupujących z banku i kart kredytowych.

W tym artykule znajdziesz wskazówki dotyczące implementacji tworzenia Zweryfikowana rejestracja dzięki Google Maps Platform. Użytkownicy najprawdopodobniej użytkowników urządzeń mobilnych. Większość przykładów implementacji w tym artykule i skupienie się na Androidzie. (Widoczna w nim wartość tutaj znajdziesz pełne przykładowe źródło). Możesz też użyć pakietów SDK na iOS.

Poniższy diagram przedstawia podstawowe interfejsy API wykorzystywane podczas tworzenia rozwiązania (kliknij, aby powiększyć).

Włączam interfejsy API

Aby wdrożyć te rekomendacje, musisz włączyć w Konsola Google Cloud:

• Maps SDK na Androida (lub interfejs API wybranej platformy)
• Interfejs Places API
• Geocoding API

Więcej informacji na ten temat znajdziesz w sekcji Pobieranie zaczęło korzystać z Google Maps Platform.

Sekcje ze sprawdzonymi metodami

Poniżej przedstawiamy praktyki i sposoby dostosowywania, które omówimy w tym temacie.

• check_circle_filled Jedną z głównych sprawdzonych metod jest ikona znacznika wyboru.
• stars Ikona gwiazdki jest opcjonalna, ale zalecana aby je ulepszyć.

Autouzupełnianie miejsc może uprościć wprowadzanie adresu w aplikacji, prowadząc pod kątem zwiększania współczynników konwersji i dbania o wygodę klientów. Autouzupełnianie udostępnia pojedyncze pole umożliwiające szybkie wpisywanie danych z opcją „wpisz z wyprzedzeniem”. adres która może służyć do automatycznego wypełniania formularza adresu rejestracji. Włączenie autouzupełniania miejsc w procesie rejestracji umożliwia:

• Zmniejsz liczbę błędów podczas wpisywania adresu.
• Zmniejsz liczbę kroków w procesie rejestracji.
• Uprość wpisywanie adresu na urządzeniach mobilnych i urządzeniach do noszenia.
• Znacznie zmniejsz liczbę naciśnięć klawiszy i skróć czas potrzebny klientowi na rejestrację.

Gdy użytkownik zaznaczy pole autouzupełniania i zacznie pisać, pojawi się lista pojawi się podpowiedzi adresów.

Gdy użytkownik wybierze adres z listy podpowiedzi, możesz używać aby zweryfikować adres i poznać lokalizację. Twoja aplikacja prawidłowych pól formularza podawania adresu, tak jak to jest widoczne w na tej ilustracji.

Google Maps Platform udostępnia widżet autouzupełniania miejsc na urządzenia mobilne platform i sieci. Widżet (widoczne na poprzednich ilustracjach) udostępnia z wbudowaną funkcją autouzupełniania, prowadzić optymalizację pod kątem wyszukiwania ograniczonego do lokalizacji.

W tej sekcji opisano, jak wdrożyć autouzupełnianie miejsc dla funkcji Szybkie i zweryfikowana rejestracja.

Dodawanie widżetu autouzupełniania miejsca

Na urządzeniu z Androidem widżet autouzupełniania możesz dodać za pomocą Intencja autouzupełniania uruchamia autouzupełnianie miejsc z pola do wprowadzania danych Wiersz adresu 1, przy czym użytkownik zacznie wpisywać adres. Gdy zaczną pisać, wybrać adres z listy podpowiedzi autouzupełniania.

Najpierw przygotuj program uruchamiający aktywność, używając ActivityResultLauncher który będzie nasłuchiwać wyników od rozpoczętej aktywności. Wynikowe wywołanie zwrotne będzie zawierać obiekt Place odpowiadające adresowi wybranemu przez użytkownika z autouzupełniania. i generowanie prognoz.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

Następnie zdefiniuj pola, położenie i właściwości typu elementu Umieść intencję autouzupełniania i utwórz ją za pomocą Autocomplete.IntentBuilder Na koniec uruchom intencję, używając elementu ActivityResultLauncher zdefiniowanego w poprzedniego przykładowego kodu.

    private void startAutocompleteIntent() {

        // Set the fields to specify which types of place data to
        // return after the user has made a selection.
        List<Place.Field> fields = Arrays.asList(Place.Field.ADDRESS_COMPONENTS,
                Place.Field.LAT_LNG, Place.Field.VIEWPORT);

        // Build the autocomplete intent with field, country, and type filters applied
        Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
                .setCountries(Arrays.asList("US"))
                .setTypesFilter(new ArrayList<String>() {{
                    add(TypeFilter.ADDRESS.toString().toLowerCase());
                }})
                .build(this);
        startAutocomplete.launch(intent);
    }

Obsługa adresu zwróconego przez autouzupełnianie miejsc

Wcześniejsze zdefiniowanie atrybutu ActivityResultLauncher określiło także, co powinno być ma miejsce, gdy w wywołaniu zwrotnym zostanie zwrócony wynik działania. Jeśli użytkownik zaznaczono prognozę, zostanie ona dostarczona do intencji zawartej w intencji do obiektu wyniku. Jako że intencję utworzył Autocomplete.IntentBuilder, metoda Autocomplete.getPlaceFromIntent() może wyodrębnić obiekt Place .

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

Następnie wywołaj Place.getAddressComponents() i dopasuj poszczególne adresy do odpowiedniego pola do wprowadzania danych w formularzu adresu, wypełniając wartością z wybranego przez użytkownika miejsca.

Przechwytywanie danych adresowych z prognozy zamiast danych wprowadzonych ręcznie pomaga zapewnić dokładność adresu, upewniając się, że adres jest znany i i ogranicza liczbę naciśnięć klawiszy.

O czym warto pamiętać przy wdrażaniu autouzupełniania miejsc

Autouzupełnianie oferuje szereg opcji, jego implementacji, jeśli chcesz używać czegoś więcej niż tylko widżetu. Za pomocą kombinację usług, aby znaleźć dokładnie to, co jest potrzebne do dopasowania lokalizacji w odpowiedni sposób.

• W przypadku formularza ADDRESS ustaw parametr typów na address, aby ograniczyć pasuje do pełnych adresów. Więcej informacji o typów obsługiwanych w żądaniach autouzupełniania miejsc.

• Określ odpowiednie ograniczenia i uprzedzenia. jeśli nie musisz szukać na całym świecie. Istnieje wiele parametrów, które można wykorzystać do odchylenia lub ograniczenia dopasowania tylko do określonych regionów.

  • Użyj właściwości RectangularBounds, aby wyznaczyć prostokątne granice, dla których chcesz zablokować w danym regionie, użyj ustawienia setLocationRestriction(), by mieć pewność, że tylko adresy te obszary są zwracane.

  • Aby ograniczyć odpowiedzi do konkretnego zestawu krajów, użyj właściwości setCountries().

• Pozostaw pola z możliwością edycji, jeśli w dopasowaniu brakuje niektórych pól. i umożliwić klientom zaktualizowanie jej adresu w razie potrzeby. Ponieważ większość adresów zwrócone przez autouzupełnianie miejsc nie zawierają numerów podrzędnych, takich jak mieszkania, lokalu lub mieszkania, można przenieść zaznaczenie na wiersz adresu 2 zachęcać użytkowników do uzupełnienia tych informacji w razie potrzeby.

Podczas wpisywania adresu dostarcz użytkownikom wizualne potwierdzenie na mapie. Zapewnia to użytkownikom dodatkową pewność, że adres jest poprawne.

Poniższy rysunek przedstawia mapę znajdującą się pod adresem z pinezką w miejscu adresu Dołączył użytkownik.

Poniższy przykład zawiera podstawowe kroki dodawania mapy. na Androidzie. Więcej informacji znajdziesz w dokumentacji.

• Dodawanie SupportMapFragment (w tym przypadku dynamiczne dodawanie fragmentu).
• Uzyskiwanie uchwytu fragmentu i rejestrowanie wywołania zwrotnego
• Określanie stylu mapy i dodawanie znacznika do niej
• Wyłączanie elementów sterujących mapą

Dodaję: SupportMapFragment

Najpierw dodaj fragment SupportMapFragment do plik XML układu.

    <fragment
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:id="@+id/confirmation_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Następnie automatycznie dodaj fragment, jeśli jeszcze nie istnieje.

    private void showMap(Place place) {
        coordinates = place.getLatLng();

        // It isn't possible to set a fragment's id programmatically so we set a tag instead and
        // search for it using that.
        mapFragment = (SupportMapFragment)
                getSupportFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);

        // We only create a fragment if it doesn't already exist.
        if (mapFragment == null) {
            mapPanel = ((ViewStub) findViewById(R.id.stub_map)).inflate();
            GoogleMapOptions mapOptions = new GoogleMapOptions();
            mapOptions.mapToolbarEnabled(false);

            // To programmatically add the map, we first create a SupportMapFragment.
            mapFragment = SupportMapFragment.newInstance(mapOptions);

            // Then we add it using a FragmentTransaction.
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.confirmation_map, mapFragment, MAP_FRAGMENT_TAG)
                    .commit();
            mapFragment.getMapAsync(this);
        } else {
            updateMap(coordinates);
        }
    }

Uzyskanie uchwytu fragmentu i rejestrowanie wywołania zwrotnego

1. Aby uzyskać uchwyt fragmentu, wywołaj metodę FragmentManager.findFragmentById i prześlij ją. identyfikator zasobu fragmentu w pliku układu. Jeśli dodałeś fragment dynamicznie, pomiń ten krok, ponieważ nick został już pobrany.

2. Wywołaj metodę getMapAsync, aby ustawić parametr dla danego fragmentu.

Jeśli np. dodasz fragment statycznie:

val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

Określanie stylu i dodawanie znacznika do mapy

Gdy mapa będzie gotowa, określ styl, wyśrodkuj kamerę i dodaj znacznik na współrzędne podanego adresu. W poniższym kodzie użyto stylu zdefiniowane w obiekcie JSON lub możesz załadować identyfikator mapy z zostało zdefiniowane za pomocą funkcji Definiowanie stylów map w Google Cloud

    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        map = googleMap;
        try {
            // Customise the styling of the base map using a JSON object defined
            // in a string resource.
            boolean success = map.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(coordinates, 15f));
        marker = map.addMarker(new MarkerOptions().position(coordinates));
    }

(Zobacz pełny przykładowy kod)

Wyłączanie elementów sterujących mapą

Aby mapa była prosta dzięki wyświetlaniu lokalizacji bez dodatkowych elementów sterujących (takich jak kompas, pasek narzędzi lub inne wbudowane funkcje), możesz wyłączyć elementy sterujące, których nie widzisz niezbędną. Na urządzeniu z Androidem możesz też włączyć wersji uproszczonej, i interaktywność.

Uzyskanie dowodu adresu zamieszkania – pewność, że użytkownik znajduje się w podawany adres – może być skomplikowany ze względu na takie czynniki jak lokalizacja użytkownika, użytkownicy przenoszący się pod nowy adres czy firmy cyfrowe takich jak banki cyfrowe, które nie mają fizycznej lokalizacji, może wejść na stronę , aby przedstawić dokument potwierdzający adres wraz z rachunkami za media lub innymi dokumentacji. Cyfrowe metody weryfikacji adresów użytkowników pozwalają umożliwi Ci szybszą i łatwiejszą rejestrację.

Bezpieczeństwo jest priorytetem przy weryfikacji adresu, zwłaszcza w przypadku rejestracji. Ta sekcja zawiera wskazówki i przykłady do sprawdzenia czy lokalizacja użytkownika podczas rejestracji odpowiada adresowi wpisanemu jako do własnych potrzeb.

Proces porównywania podanego adresu z lokalizacją urządzenia obejmuje następujące kroki:

1. Konwertowanie adresu wpisanego przez użytkownika na współrzędne geograficzne.
2. Wyświetlenie użytkownikowi prośby o zgodę na uzyskanie lokalizacji urządzenia.
3. Obliczam odległość między podanym adresem a lokalizacją urządzenia Określisz maksymalną odległość uwzględnianą przy dopasowywaniu adresu do lokalizacji.

Poniższy rysunek pokazuje, jak możesz zachęcać użytkowników do porównania pod podanym adresem.

Konwertowanie adresu wpisanego przez użytkownika na współrzędne geograficzne

Gdy użytkownicy zgodzą się na weryfikację adresu (przez kliknięcie „Potwierdź, że teraz jestem” na poprzedniej ilustracji), pierwszym krokiem w procesie porównywania adresu z obecnymi lokalizacja jest konwertowana na współrzędne geograficzne.

Jeśli użytkownik wybrał swój adres za pomocą autouzupełniania, pamiętaj, aby poprosić o Place.Field.LAT_LNG na liście pól autouzupełniania, tak jak w polu Dodanie fragmentu kodu widżetu autouzupełniania miejsca i wywołaj funkcję Place.getLatLng(). aby uzyskać współrzędne geograficzne wybranego adresu.

coordinates = place.getLatLng();

Jeśli użytkownik ręcznie wpisał swój adres lub wprowadził zmiany po ustawieniu Miejsce Autouzupełnianie wypełniło pola, użyj Usługa geokodera na Androida lub Geocoding API aby wyszukać współrzędne odpowiadające temu adresowi.

Przykład

https://maps.googleapis.com/maps/api/geocode/json?address=1600%20Amphitheatre%2BParkway%2C%20Mountain%20View%2C%20CA%2094043&key=YOUR_API_KEY

Pamiętaj, aby zakodować adres URL wywołaniem interfejsu Geocoding API.

Krótkie informacje dotyczące kodowania adresu URL: %20 = spacja, %2B = + (plus), %2C = , (przecinek)

Wyświetlanie użytkownikowi prośby o zgodę na uzyskanie lokalizacji urządzenia

Aby uzyskać lokalizację urządzenia użytkownika, musisz poprosić go o zgodę na włączyć usługi lokalizacyjne. Korzystając ze wskazówek w dokumentacji Androida na temat: tworzenie aplikacji korzystających z lokalizacji, zastosuj ten proces:

• Poproś o dostęp do lokalizacji w formie jednorazowej prośby o dostęp do lokalizacji, dokładnie na tym poziomie. (ACCESS_FINE_LOCATION).

• Jeśli użytkownik przyznał dostęp do lokalizacji, uzyskasz informacje o jego lokalizacji.

• Jeśli użytkownik odmówi zgody na dostęp do lokalizacji, zachowaj ostrożność w odniesieniu do tego odrzucenia. Możesz na przykład przedstawić następujący typ wiadomości (zakładając, że nie zapisujesz bieżącej lokalizacji użytkownika):

  "Jeśli nie podasz swojej dokładnej lokalizacji, trzeba będzie zweryfikować go pocztą, aby aktywować konto. [OK]”

Na rysunku poniżej przedstawiono przykładową prośbę o przyznanie uprawnień użytkownikowi uzyskać lokalizację urządzenia.

Aby sprawdzić dostęp do lokalizacji, przygotuj program uruchamiający aktywność, który będzie posłuchaj wyniku z rozpoczętej aktywności ActivityResultLauncher. Wynikowe wywołanie zwrotne będzie zawierać ciąg znaków wskazujący, czy użytkownik przyznał lub odmówiła przyznania uprawnień.

    // Register the permissions callback, which handles the user's response to the
    // system permissions dialog. Save the return value, an instance of
    // ActivityResultLauncher, as an instance variable.
    private final ActivityResultLauncher<String> requestPermissionLauncher =
            registerForActivityResult(new ActivityResultContracts.RequestPermission(), isGranted -> {
                if (isGranted) {
                    // Since ACCESS_FINE_LOCATION is the only permission in this sample,
                    // run the location comparison task once permission is granted.
                    // Otherwise, check which permission is granted.
                    getAndCompareLocations();
                } else {
                    // Fallback behavior if user denies permission
                    Log.d(TAG, "User denied permission");
                }
            });

Następnie sprawdź, czy aplikacja ma już uprawnienie ACCESS_FINE_LOCATION. Jeśli nie, poproś o nie użytkownika, wysyłając prośbę o uprawnienia za pomocą programu uruchamiającego zdefiniowanego w poprzednim kroku.

    private void checkLocationPermissions() {
        if (ContextCompat.checkSelfPermission(this, ACCESS_FINE_LOCATION)
                == PackageManager.PERMISSION_GRANTED) {
            getAndCompareLocations();
        } else {
            requestPermissionLauncher.launch(
                    ACCESS_FINE_LOCATION);
        }
    }

Po przyznaniu uprawnień ACCESS_FINE_LOCATION użyj uśrednionej lokalizacji może pobrać ostatnią znaną lokalizację. i utwórz na jego podstawie obiekt LatLng.

        FusedLocationProviderClient fusedLocationClient =
                LocationServices.getFusedLocationProviderClient(this);

        fusedLocationClient.getLastLocation()
                .addOnSuccessListener(this, location -> {
                    // Got last known location. In some rare situations this can be null.
                    if (location == null) {
                        return;
                    }

                    deviceLocation = new LatLng(location.getLatitude(), location.getLongitude());
                    // ...
                });
    }

Obliczam odległość między podanym adresem a lokalizacją urządzenia

Za pomocą obliczeń matematycznych oblicz odległość między dwiema współrzędnych szerokości i długości geograficznej (wpisany adres i lokalizacja urządzenia). Oprogramowanie typu open source Biblioteka narzędziowa pakietu Maps SDK na Androida zawiera przydatne metody obliczania odległości kulicznej między dwoma punktami na Ziemi.

Najpierw zainstaluj bibliotekę narzędziową pakietu Maps SDK na Androida, dodając zależność od pliku build.gradle.kts aplikacji:

dependencies {


    // Utility Library for Maps SDK for Android
    // You do not need to add a separate dependency for the Maps SDK for Android
    // since this library builds in the compatible version of the Maps SDK.
    implementation("com.google.maps.android:android-maps-utils:3.8.2")
}

Następnie, po uzyskaniu ostatniej znanej lokalizacji urządzenia, wróć do pliku aktywności, zdefiniować promień w metrach, aby uznać obie lokalizacje za „dopasowane”. Promień powinien być wystarczająco duży, by uwzględnić zmienność dokładności GPS oraz rozmiar miejsca pod adresem podanym przez użytkownika. Na przykład:

private static final double acceptableProximity = 150;

Następnie użyj metody z biblioteki narzędziowej computeDistanceBetween(). aby obliczyć odległość między lokalizacją urządzenia a użytkownikiem lokalizację adresu. Jeśli odległość mieści się w zakresie określonym powyżej, które pasują do lokalizacji.

// Use the computeDistanceBetween function in the Maps SDK for Android Utility Library
// to use spherical geometry to compute the distance between two Lat/Lng points.
double distanceInMeters = computeDistanceBetween(deviceLocation, enteredLocation);
if (distanceInMeters <= acceptedProximity) {
    Log.d(TAG, "location matched");
    // TODO: Display UI based on the locations matching
} else {
    Log.d(TAG, "location not matched");
    // TODO: Display UI based on the locations not matching
}

(Zobacz pełny przykładowy kod)

Jeśli adres i lokalizacja pasują do siebie, wyświetl potwierdzenie w aplikacji, jak pokazano na poniższej ilustracji.

Zezwalaj użytkownikom na wpisywanie adresów na podstawie firmy lub ciekawego miejsca imię i nazwisko. Informację o tym, jak dalej pisać Usługa przewidywania działa nie tylko dla adresów, ale można też zezwolić użytkownikom na wpisywanie nazw firm lub punktów orientacyjnych. Aby umożliwić podawanie zarówno adresów, jak i nazw instytucji, usuń właściwość types z definicji autouzupełniania.

Dostosuj wygląd i styl pola autouzupełniania miejsca, aby dopasować stylu witryny. Jeśli wolisz kontrolować wygląd i styl Miejsc Autouzupełnianie w aplikacji zamiast widżetu Google. Możesz używać Automatyczne uzupełnianie miejsc do interfejsu tworzonego przez Ciebie za pomocą usługi autouzupełniania miejsc.