Przewodnik po szybkiej i zweryfikowanej rejestracji

Przegląd

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

Im więcej użytkowników musi wpisywać lub wpisywać zduplikowane dane, tym mniejsze szanse na zatrzymanie ich jako klientów. Stworzenie szybkiej, łatwej i zweryfikowanej rejestracji poprawi wygodę użytkowników, a jednocześnie pozwoli Ci utrzymać ich w witrynie.

Ręcznie wprowadzane adresy mogą prowadzić do zmniejszenia liczby konwersji, błędnych danych z systemu CRM i kosztownych błędów podczas dostarczania. Szybka i weryfikowana rejestracja przyspiesza rejestrację, umożliwiając natychmiastowe sugerowanie adresów w pobliżu za pomocą zaledwie kilku kliknięć kciukiem oraz wyświetlanie podanego adresu w celu wizualnego potwierdzenia, dzięki czemu użytkownik ma pewność, że podał prawidłowy adres. Weryfikacja adresu użytkownika na podstawie jego bieżącej lokalizacji pomaga też zapobiegać oszustwom i zwiększa zaufanie użytkowników do Twoich produktów i usług. Dzięki weryfikacji zyskasz pewność, że od razu otrzymasz wirtualny bank i kartę kredytową.

W tym temacie znajdziesz wskazówki dotyczące wdrażania funkcji szybkiej i zweryfikowanej rejestracji w Google Maps Platform. Użytkownicy najczęściej rejestrują się na urządzeniach mobilnych, więc większość przykładów implementacji w tym temacie dotyczy Androida. (tutaj znajdziesz pełną treść przykładową). Do tych samych celów możesz też używać pakietów SDK na iOS.

Poniższy diagram przedstawia podstawowe interfejsy API użyte w tworzeniu rozwiązania (kliknij, aby powiększyć).

Włączam interfejsy API

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

• Pakiet SDK Map Google na Androida (lub interfejs API odpowiedni dla wybranej platformy)
• Places API,
• Geocoding API

Więcej informacji o konfigurowaniu znajdziesz w artykule o pierwszych krokach z Google Maps Platform.

Sekcje ze sprawdzonymi metodami

Poniżej przedstawiono metody i opcje dostosowywania, które zostaną omówione w tym temacie.

• check_circle_filled Ikona znacznika wyboru to podstawowa sprawdzona metoda.
• stars Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie w celu ulepszenia rozwiązania.

Autouzupełnianie miejsc może uprościć wpisywanie adresu w aplikacji, co przekłada się na wyższe współczynniki konwersji i wygodę klientów. Autouzupełnianie to jedno pole do szybkiego wprowadzania adresu z przewidywaniem „wpisz z wyprzedzeniem”, które może służyć do automatycznego wypełniania formularza z adresem rejestracyjnym. Włączenie autouzupełniania miejsc podczas 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 zmniejszają liczbę naciśnięć klawiszy i zmniejszają całkowity czas potrzebny klientowi na rejestrację.

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

Gdy użytkownik wybierze adres z listy prognoz, możesz użyć tej odpowiedzi do zweryfikowania adresu i uzyskania lokalizacji. Dzięki temu aplikacja może wypełnić odpowiednie pola w formularzu podawania adresu, jak pokazano na tej ilustracji.

Google Maps Platform udostępnia widżet autouzupełniania miejsc na platformach mobilnych i w internecie. Widżet, który widać na poprzednich ilustracjach, zawiera okno wyszukiwania z wbudowaną funkcją autouzupełniania, które można nawet zoptymalizować pod kątem wyszukiwania w zakresie lokalizacji.

W tej sekcji opisano, jak zaimplementować autouzupełnianie miejsc w celu szybkiej i zweryfikowanej rejestracji.

Dodawanie widżetu autouzupełniania miejsc

Na Androidzie możesz dodać widżet autouzupełniania za pomocą intencji autouzupełniania, która uruchamia autouzupełnianie miejsca z pola do wprowadzania danych w wierszu adresu 1, gdzie użytkownik zaczyna wpisywać swój adres. Gdy zacznie pisać, będzie mógł wybrać swój adres z listy podpowiedzi autouzupełniania.

Najpierw przygotuj program uruchamiający aktywność, używając ActivityResultLauncher, który nasłuchuje wyniku uruchomionego działania. Wynikowe wywołanie zwrotne będzie zawierać obiekt Place odpowiadający adresowi wybranemu przez użytkownika z podpowiedzi autouzupełniania.

    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, lokalizację i właściwości typu intencji autouzupełniania miejsca oraz utwórz ją za pomocą Autocomplete.IntentBuilder. Na koniec uruchom intencję, używając elementu ActivityResultLauncher zdefiniowanego w poprzednim przykładowym kodzie.

    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 parametru ActivityResultLauncher określa też, co należy zrobić po zwróceniu wyniku aktywności w wywołaniu zwrotnym. Jeśli użytkownik wybrał prognozę, zostanie ona zrealizowana w intencji zawartej w obiekcie wyniku. Intencja została utworzona przez Autocomplete.IntentBuilder, więc metoda Autocomplete.getPlaceFromIntent() może wyodrębnić z niej 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 każdy komponent adresu do odpowiadającego mu pola do wprowadzania danych w formularzu adresu, wypełniając to pole wartością z wybranego przez użytkownika miejsca.

Przechwytywanie danych adresowych z prognozy zamiast z adresu wpisywanego ręcznie pomaga zapewnić dokładność adresu, zapewnić, że adres jest znany i można go dostarczyć, a także zmniejsza liczbę naciśnięć klawiszy przez użytkownika.

Uwagi na temat wdrażania autouzupełniania miejsc

Autouzupełnianie miejsc ma kilka opcji, które pozwalają mu dostosować się do jego implementacji, jeśli chcesz używać czegoś więcej niż tylko widżetu. Możesz korzystać z różnych usług, aby znaleźć dokładnie to, czego potrzebujesz, aby dopasować lokalizację do wybranej lokalizacji.

• W przypadku formularza ADRESU ustaw parametr typów na address, aby ograniczyć dopasowania do pełnych adresów z ulicą i numerem. Dowiedz się więcej o typach obsługiwanych w żądaniach autouzupełniania miejsc.

• Ustaw odpowiednie ograniczenia i uprzedzenia, jeśli nie chcesz przeprowadzać wyszukiwania na całym świecie. Istnieje wiele parametrów, które można wykorzystać do odchylenia lub ograniczenia dopasowania tylko do konkretnych regionów.

  • Użyj operatora RectangularBounds, aby ustawić prostokątne granice do ograniczania obszaru. Użyj polecenia setLocationRestriction(), aby mieć pewność, że zwracane są tylko adresy z tych obszarów.

  • Użyj opcji setCountries(), aby ograniczyć udzielanie odpowiedzi do wybranych krajów.

• Pozostaw pola możliwe do edytowania, na wypadek gdyby niektóre pola zostały pominięte w dopasowaniu, i pozwól klientom na aktualizowanie adresu w razie potrzeby. Ponieważ większość adresów zwracanych przez autouzupełnianie miejsc nie zawiera numerów podobszarów, takich jak numery mieszkań, lokali czy lokali, możesz przenieść zaznaczenie na drugi wiersz adresu, aby zachęcić użytkownika do wpisania tych informacji w razie potrzeby.

W ramach wpisywania adresu udostępniaj użytkownikom wizualne potwierdzenie adresu na mapie. Dzięki temu użytkownicy będą mieli dodatkową pewność, że adres jest prawidłowy.

Poniższy rysunek przedstawia mapę pod adresem z pinezką w miejscu, w którym został wpisany.

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

• Dodawanie SupportMapFragment (w tym przypadku dynamiczne dodawanie fragmentu)
• Uzyskanie nicka dla fragmentu i zarejestrowanie wywołania zwrotnego
• Styl i dodawanie znacznika do mapy
• Wyłączanie elementów sterujących mapą

Dodaję SupportMapFragment

Najpierw dodaj fragment SupportMapFragment do pliku 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 taki fragment, jeśli jeszcze go nie ma.

    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 nicka dla fragmentu i zarejestrowanie wywołania zwrotnego

1. Aby uzyskać uchwyt dla fragmentu, wywołaj metodę FragmentManager.findFragmentById i przekaż do niej identyfikator zasobu fragmentu w pliku układu. Jeśli fragment został dodany dynamicznie, pomiń ten krok, ponieważ uchwyt został już pobrany.

2. Wywołaj metodę getMapAsync, aby ustawić wywołanie zwrotne tego fragmentu.

Jeśli na przykład 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, wybierz styl, wyśrodkuj kamerę i dodaj znacznik w miejscu współrzędnych wpisanego adresu. Poniższy kod używa stylu zdefiniowanego w obiekcie JSON. Możesz też wczytać identyfikator mapy zdefiniowany za pomocą stylu map w chmurze.

    @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 uprościć mapę i wyświetlać lokalizację bez dodatkowych elementów sterujących (takich jak kompas, pasek narzędzi i inne wbudowane funkcje), rozważ wyłączenie elementów sterujących, których nie potrzebujesz. Na Androidzie inną opcją jest włączenie wersji uproszczonej, aby zapewnić ograniczoną interaktywność.

Uzyskanie dowodu adresu (czyli zapewnienie, że użytkownik ma pewność, że znajduje się pod wpisanym adresem) może być skomplikowane przez takie czynniki jak zdalna lokalizacja użytkownika, przeniesienie użytkowników pod nowy adres czy firmy (np. banki cyfrowe) bez lokalizacji fizycznej, którą użytkownik może potwierdzić za pomocą rachunków za media lub innej dokumentacji. Udostępnianie cyfrowych sposobów weryfikacji adresów użytkowników umożliwia szybsze i bezproblemowe proces rejestracji.

Bezpieczeństwo ma kluczowe znaczenie przy sprawdzaniu adresu, zwłaszcza w przypadku rejestracji cyfrowej. Ta sekcja zawiera wskazówki i przykłady pozwalające sprawdzić, czy lokalizacja użytkownika podczas rejestracji jest zgodna z adresem, który podał jako swój.

Proces porównywania wpisanego adresu z lokalizacją urządzenia obejmuje te kroki:

1. Konwertowanie adresu podanego przez użytkownika na współrzędne geograficzne.
2. Wyświetlanie użytkownikowi prośby o zgodę na poznanie lokalizacji urządzenia
3. Obliczanie odległości między wpisanym adresem a lokalizacją urządzenia. W tym celu musisz określić maksymalną odległość, która będzie uwzględniana przy dopasowaniu adresu do lokalizacji.

Poniższy rysunek pokazuje, jak możesz poprosić użytkowników o porównanie wpisanego adresu z ich bieżącą lokalizacją.

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

Gdy użytkownik zgodzi się na weryfikację adresu (przez kliknięcie „Potwierdź, że jestem teraz” na poprzedniej ilustracji), pierwszym krokiem porównywania adresu z obecną lokalizacją jest przekształcenie podanego adresu na współrzędne geograficzne.

Jeśli użytkownik wybrał swój adres za pomocą autouzupełniania miejsc, wyślij żądanie Place.Field.LAT_LNG na listę pól autouzupełniania miejsc, tak jak to pokazano w przypadku fragmentu kodu Dodawanie widżetu autouzupełniania miejsca, i wywołaj metodę 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 wypełnieniu pól przez autouzupełnianie miejsc, skorzystaj z usługi Android Geocoder 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łania interfejsu Geocoding API.

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

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

Aby uzyskać lokalizację urządzenia użytkownika, musisz poprosić go o włączenie usług lokalizacyjnych. Korzystając ze wskazówek zawartych w dokumentacji Androida na temat tworzenia aplikacji korzystających z danych o lokalizacji, zastosuj ten proces:

• Poproś o dostęp do lokalizacji w ramach jednorazowego przyznania na określonym poziomie (ACCESS_FINE_LOCATION).

• Jeśli użytkownik udzielił dostępu do lokalizacji, pobierze ją.

• Jeśli użytkownik odrzuci dostęp do lokalizacji, zadbaj o zgodność z tym, co zrobić w przypadku odrzucenia. Może to być na przykład taki komunikat (przy założeniu, że nie przechowujesz bieżącej lokalizacji użytkownika):

  „Jeśli nie udostępnisz aplikacji swojej dokładnej lokalizacji, w celu aktywowania konta musisz potwierdzić swoją lokalizację drogą pocztową. [OK]”

Poniższy rysunek przedstawia przykładową prośbę o zgodę na dostęp do lokalizacji urządzenia.

Aby sprawdzić uprawnienia do lokalizacji, przygotuj menu z aplikacjami, które nasłuchuje wyniku uruchomionej aktywności w ActivityResultLauncher. Wynikowe wywołanie zwrotne będzie zawierać ciąg znaków wskazujący, czy użytkownik przyznał czy odmówił uzyskania żądanych 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ś użytkownika o przyznanie uprawnień, uruchamiając działanie związane z 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 uprawnienia ACCESS_FINE_LOCATION użyj dostawcy uśrednionej lokalizacji, aby pobrać ostatnią znaną lokalizację urządzenia i utworzyć 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 wpisanym adresem a lokalizacją urządzenia

Oblicz odległość między 2 współrzędnymi szerokości i długości geograficznej (wpisany adres i lokalizację urządzenia). Biblioteka narzędziowa pakietu Map Google na Androida typu open source zawiera kilka przydatnych metod obliczania odległości sferycznych między 2 punktami na Ziemi.

Najpierw zainstaluj bibliotekę narzędziową pakietu Maps SDK na Androida, dodając tę zależność do pliku build.gradle 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.0'
}

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

private static final double acceptableProximity = 150;

Następnie użyj metody biblioteki narzędziowej computeDistanceBetween(), aby obliczyć odległość między lokalizacją urządzenia a adresem podanym przez użytkownika. Jeśli odległość mieści się w określonym powyżej promieniu, weź pod uwagę dopasowane lokalizacje.

// 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 są zgodne, wyświetl w aplikacji potwierdzenie, tak jak na ilustracji poniżej.

Zezwalaj użytkownikom na wpisywanie adresu na podstawie nazwy firmy lub ciekawego miejsca. Usługa przewidywania „Wpisz z wyprzedzeniem” działa nie tylko w przypadku adresów, ale możesz też zezwolić użytkownikom na wpisywanie nazw firm lub punktów orientacyjnych. Aby umożliwić wpisywanie zarówno adresów, jak i nazw instytucji, usuń z definicji autouzupełniania właściwość types.

Dostosuj wygląd i styl pola autouzupełniania miejsca, aby pasował do stylu Twojej witryny. Jeśli wolisz mieć wpływ na wygląd i styl autouzupełniania miejsc w aplikacji, a nie korzystać z widżetu Google, możesz skorzystać z funkcji autouzupełniania w interfejsie, które tworzysz.