Guida rapida all'implementazione di Registrazione verificata

Panoramica

Gli utenti si sono abituati a vivere e operare in un mondo digitale in cui la comodità, la velocità e la sicurezza sono aspettative di base. Quando presentano domanda per qualcosa, ad esempio una carta di credito, un conto bancario o un prestito, si aspettano che la procedura sia rapida e semplice.

Più utenti devono digitare o inserire dati duplicati, minori sono le probabilità che tu li conservi come clienti. La creazione di un'esperienza di registrazione rapida, semplice e verificata migliorerà l'esperienza utente garantendoti un margine per mantenere gli utenti sul tuo sito.

L'inserimento manuale degli indirizzi può causare la riduzione delle conversioni, errori nei dati di CRM e costosi disguidi nella consegna. La funzionalità Registrazione rapida e verificata velocizza la registrazione, consigliando all'istante gli indirizzi nelle vicinanze con pochi tocchi e mostrando l'indirizzo inserito per una conferma visiva, consentendo all'utente di avere la certezza di aver inserito l'indirizzo corretto. La verifica dell'indirizzo dell'utente utilizzando la sua posizione attuale aiuta inoltre a prevenire le attività fraudolente e a rafforzare la fiducia degli utenti nei tuoi prodotti e servizi. La verifica può anche aumentare la tua fiducia nel fornire immediatamente carte di credito e banche virtuali.

Questo argomento fornisce indicazioni per l'implementazione al fine di creare un'esperienza di registrazione rapida e verificata con Google Maps Platform. Dato che molto probabilmente gli utenti si registreranno sui dispositivi mobili, la maggior parte degli esempi di implementazione in questo argomento è incentrata su Android. (la fonte di esempio completa è disponibile qui). Puoi utilizzare gli SDK iOS anche per eseguire le stesse operazioni.

Il seguente diagramma mostra le API principali coinvolte nella creazione della soluzione (fai clic per ingrandire).

Abilitazione delle API in corso…

Per implementare questi suggerimenti, devi abilitare le API seguenti nella console Google Cloud:

• SDK Maps per Android (o l'API per la piattaforma di vostra scelta)
• API Places
• API Geocoding

Per ulteriori informazioni sulla configurazione, consulta la guida introduttiva a Google Maps Platform.

Sezioni delle best practice

Di seguito sono riportate le pratiche e le personalizzazioni che tratteremo in questo argomento.

• check_circle_filled L'icona del segno di spunta è una best practice fondamentale.
• stars L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata per migliorare la soluzione.

Place Autocomplete può semplificare l'inserimento degli indirizzi nella tua applicazione, garantendo tassi di conversione più elevati e un'esperienza fluida per i clienti. Autocomplete fornisce un singolo campo di immissione rapida con una previsione dell'indirizzo "type-ahead", che può essere utilizzata per compilare automaticamente un modulo di indirizzo per la registrazione. Incorporando il completamento automatico di Place nel flusso di registrazione, puoi:

• Riduci gli errori di inserimento degli indirizzi.
• Riduci il numero di passaggi della procedura di registrazione.
• Semplifica l'esperienza di inserimento degli indirizzi sui dispositivi mobili o indossabili.
• Riduci notevolmente le sequenze di tasti e il tempo totale necessario per la registrazione.

Quando l'utente seleziona la casella di completamento automatico e inizia a digitare, viene visualizzato un elenco di previsioni di indirizzi.

Quando l'utente seleziona un indirizzo dall'elenco delle previsioni, puoi utilizzare la risposta per verificare l'indirizzo e ottenere la posizione. L'applicazione può quindi compilare i campi corretti del modulo di inserimento dell'indirizzo, come mostrato nella figura seguente.

Google Maps Platform offre un widget Place Autocomplete per piattaforme mobile e Web. Il widget, mostrato nelle figure precedenti, fornisce una finestra di dialogo di ricerca con la funzionalità di completamento automatico integrata che potete persino ottimizzare per la ricerca con ambito a livello di località.

Questa sezione descrive come implementare il completamento automatico del luogo per le registrazioni rapide e verificate.

Aggiunta del widget Place Autocomplete

In Android, puoi aggiungere il widget del completamento automatico utilizzando un intent con completamento automatico che avvia il completamento automatico di Place dal campo di immissione della riga indirizzo 1, in cui l'utente inizierà a inserire il proprio indirizzo. Quando iniziano a digitare, potranno selezionare il proprio indirizzo dall'elenco delle previsioni di completamento automatico.

Per prima cosa, prepara un Avvio applicazioni, utilizzando ActivityResultLauncher, che sentirà un risultato dell'attività avviata. Il callback risultato conterrà un oggetto Place corrispondente all'indirizzo selezionato dall'utente dalle previsioni di completamento automatico.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            (ActivityResultCallback<ActivityResult>) 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");
                }
            });

Definisci poi i campi, la posizione e le proprietà dell'intent del completamento automatico del posizionamento, quindi crealo con Autocomplete.IntentBuilder. Infine, lancia l'intent utilizzando il ActivityResultLauncher definito nell'esempio di codice precedente.

    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)
                .setCountry("US")
                .setTypeFilter(TypeFilter.ADDRESS)
                .build(this);
        startAutocomplete.launch(intent);
    }

Gestione dell'indirizzo restituito da Place Autocomplete

La definizione precedente di ActivityResultLauncher definisce anche cosa deve essere fatto quando il risultato dell'attività viene restituito nel callback. Se l'utente ha selezionato una previsione, questa verrà mostrata nell'intent contenuto nell'oggetto risultato. Poiché l'intent è stato creato da Autocomplete.IntentBuilder, il metodo Autocomplete.getPlaceFromIntent() può estrarre l'oggetto Place da questo oggetto.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            (ActivityResultCallback<ActivityResult>) 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");
                }
            });

Da qui, chiama Place.getAddressComponents() e associa ogni componente indirizzo al campo di immissione corrispondente nel modulo dell'indirizzo, completando il campo con il valore del luogo selezionato dell'utente.

L'acquisizione dei dati degli indirizzi dalla previsione anziché dall'indirizzo inserito manualmente contribuisce a garantire l'accuratezza dell'indirizzo, assicura che l'indirizzo sia noto e possa essere consegnato e riduce le sequenze di tasti dell'utente.

Considerazioni relative all'implementazione del completamento automatico dei luoghi

Il completamento automatico del luogo offre una serie di opzioni che gli consentono di essere flessibile con la sua implementazione se vuoi utilizzare altri elementi oltre al widget. Puoi utilizzare una combinazione di servizi per ottenere esattamente ciò di cui hai bisogno per far corrispondere una località nel modo corretto.

• Per un modulo INDIRIZZO, imposta il parametro tipi su address per limitare le corrispondenze agli indirizzi completi. Scopri di più sui tipi supportati nelle richieste di completamento automatico dei lavori.

• Imposta le limitazioni e le distorsioni appropriate se non hai bisogno di eseguire ricerche in tutto il mondo. Esistono diversi parametri che possono essere utilizzati per bias o limitare la corrispondenza solo a regioni specifiche.

  • Usa RectangularBounds per impostare i limiti rettangolari per vincolare un'area, quindi utilizza setLocationRestriction() per assicurarti che vengano restituiti solo gli indirizzi in quelle aree.

  • Utilizza setCountries() per limitare le risposte a un determinato insieme di paesi.

• Lascia i campi modificabili in caso di mancato corrispondenza di determinati campi e consenti ai clienti di aggiornare l'indirizzo, se necessario. Poiché la maggior parte degli indirizzi restituiti dalla funzione di completamento automatico del luogo non contiene numeri di sottopreferenze come numeri di appartamenti, suite o unità, puoi spostare lo stato attivo sulla riga indirizzo 2 per invogliare l'utente a inserire tali informazioni, se necessario.

Come parte dell'inserimento dell'indirizzo, fornisci agli utenti una conferma visiva dell'indirizzo su una mappa. Ciò garantisce agli utenti un'ulteriore garanzia che l'indirizzo sia corretto.

La figura seguente mostra una mappa sotto l'indirizzo con un segnaposto in corrispondenza dell'indirizzo inserito.

L'esempio seguente segue i passaggi di base per aggiungere una mappa in Android. Per ulteriori dettagli, consulta la documentazione.

• Aggiungere SupportMapFragment (in questo caso, aggiungere un frammento in modo dinamico)
• Ottenere un handle per il frammento e registrare il callback
• Stili e aggiunta di un indicatore alla mappa
• Disattivazione dei controlli della mappa

Aggiunta di SupportMapFragment in corso...

Innanzitutto, aggiungi un frammento SupportMapFragment al file XML di layout.

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

Quindi, aggiungi in modo programmatico il frammento se non esiste ancora.

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

Ottenere un handle per il frammento e registrare il callback

1. Per ottenere un handle per il frammento, chiama il metodo FragmentManager.findFragmentById e trasmetti l'ID risorsa del frammento nel file di layout. Se hai aggiunto il frammento in modo dinamico, salta questo passaggio perché hai già recuperato l'handle.

2. Richiama il metodo getMapAsync per impostare il callback sul frammento.

Ad esempio, se hai aggiunto il frammento in modo statico:

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

      

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

      

Stili e aggiunta di un indicatore alla mappa

Quando la mappa è pronta, imposta lo stile, centra la fotocamera e aggiungi un indicatore alle coordinate dell'indirizzo inserito. Il seguente codice utilizza uno stile definito in un oggetto JSON oppure puoi caricare un ID mappa definito in alternativa con Styling di Maps basato su cloud.

    @Override
    public void onMapReady(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));
    }

(Vedi esempio di codice completo)

Disattivazione dei controlli della mappa

Per semplificare la mappa mostrando la tua posizione senza ulteriori controlli della mappa (ad esempio, bussola, barra degli strumenti o altre funzionalità integrate), disattiva i controlli non necessari. Su Android, un'altra opzione è attivare la modalità Lite per fornire interattività limitata.

Ottenere la prova dell'indirizzo (con la certezza che l'utente si trova all'indirizzo che ha inserito) può essere complicato da fattori quali la località dell'utente remoto, il trasferimento di utenti a un nuovo indirizzo o le attività digitali (ad esempio le banche digitali) che non hanno una sede fisica che gli utenti possono visitare per fornire una prova dell'indirizzo con bollette o altra documentazione. Fornire modi digitali per verificare gli indirizzi degli utenti ti consente di offrire un'esperienza di registrazione più rapida e senza problemi.

La sicurezza è fondamentale per ottenere un controllo dell'indirizzo, in particolare con una procedura di registrazione digitale. Questa sezione fornisce indicazioni ed esempi per verificare se la località di un utente durante la registrazione corrisponde all'indirizzo che inserisce come suo.

Il processo di confronto tra l'indirizzo inserito e la posizione di un dispositivo prevede i seguenti passaggi:

1. Conversione dell'indirizzo inserito dall'utente in coordinate geografiche.
2. Chiedere all'utente l'autorizzazione per ottenere la posizione del proprio dispositivo.
3. Calcolare la distanza tra l'indirizzo inserito e la posizione del dispositivo. Puoi determinare la distanza massima conteggiata per una corrispondenza di indirizzo-località.

La figura seguente è un esempio di come puoi chiedere agli utenti di confrontare l'indirizzo che hanno inserito con la loro posizione attuale.

Conversione dell'indirizzo inserito dall'utente in coordinate geografiche

Dopo che gli utenti hanno accettato di eseguire la verifica dell'indirizzo (toccando "Verifica di essere attualmente" nella figura precedente), il primo passaggio per confrontare l'indirizzo con la posizione attuale consiste nella conversione dell'indirizzo inserito in coordinate geografiche.

Se l'utente ha selezionato il proprio indirizzo con Place Autocomplete, assicurati di richiedere Place.Field.LAT_LNG nell'elenco dei campi Place Autocomplete, come mostrato nello snippet di codice Aggiungere il widget Place Autocomplete, e chiama il metodo Place.getLatLng() per ottenere le coordinate geografiche dell'indirizzo selezionato.

coordinates = place.getLatLng();

Se l'utente ha inserito manualmente il proprio indirizzo o apportato modifiche dopo che il completamento automatico di Place ha completato i campi, utilizza il servizio Android Geocoder o l'API Geocoding per cercare le coordinate corrispondenti a tale indirizzo.

Esempio

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

Assicurati di codificare l'URL della chiamata all'API Geocoding.

Riferimento rapido per la codifica degli URL: %20 = spazio, %2B = + (più), %2C = , (virgola)

Richiesta all'utente dell'autorizzazione per ottenere la posizione del dispositivo

Per ottenere la posizione del dispositivo, devi richiedere l'autorizzazione dell'utente per abilitare i servizi di geolocalizzazione. Utilizzando le indicazioni riportate nella documentazione di Android sulla creazione di app sensibili alla posizione, implementa il seguente flusso:

• Richiedi l'autorizzazione di accesso alla posizione, come autorizzazione una tantum, a un livello preciso (ACCESS_FINE_LOCATION).

• Se l'utente concede l'accesso alla posizione, recupera la posizione dell'utente.

• Se l'utente rifiuta l'accesso alla posizione, procedi con il rifiuto. Ad esempio, potresti presentare il seguente tipo di messaggio (supponendo che tu non stia memorizzando la posizione attuale dell'utente):

  "Se non consenti all'app di conoscere la tua posizione esatta, dovrai attivare la verifica tramite posta per attivare il tuo account. [OK]"

La figura seguente mostra un esempio di richiesta per gli utenti di consentire l'autorizzazione ad ottenere la posizione del dispositivo.

Per verificare l'autorizzazione di accesso alla posizione, prepara un Avvio app che sentirà un risultato dell'attività avviata con ActivityResultLauncher. Il callback del risultato conterrà una stringa che indica se l'utente ha concesso o negato l'autorizzazione richiesta.

    // 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");
                }
            });

Dopodiché controlla se l'app dispone già dell'autorizzazione ACCESS_FINE_LOCATION. In caso contrario, chiedi all'utente di avviare l'attività di richiesta di autorizzazione utilizzando Avvio app definito nel passaggio precedente.

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

Una volta che l'autorizzazione ACCESS_FINE_LOCATION è stata concessa, usa il fornitore di posizione fuso per recuperare l'ultima posizione nota del dispositivo e creare un oggetto LatLng da quest'ultimo.

        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());
                    // ...
                });
    }

Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo

Utilizza la matematica per calcolare la distanza tra due coordinate di latitudine/longitudine (indirizzo inserito e posizione del dispositivo). L'SDK Maps open source per la libreria delle utilità Android offre alcuni metodi pratici per calcolare la distanza sferica tra due punti su Earth.

Innanzitutto, installa l'SDK Maps per Android Utility Library aggiungendo la seguente dipendenza al file build.gradle dell'app:

dependencies {
    implementation 'com.google.maps.android:android-maps-utils:2.3.0'

}

Quindi, torna nel file dell'attività dopo aver ricevuto l'ultima posizione nota del dispositivo, definisci un raggio in metri in modo da considerare le due località come "con corrispondenza". Il raggio deve essere sufficientemente grande da tenere conto della variabilità della precisione del GPS e delle dimensioni del luogo all'indirizzo inserito dall'utente. Ad esempio:

private static final double acceptableProximity = 150;

Quindi, utilizza il metodo della libreria di utilità computeDistanceBetween() per calcolare la distanza tra la posizione del dispositivo e la posizione dell'indirizzo inserita dall'utente. Se la distanza rientra nel raggio definito sopra, considera le località corrispondenti.

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

(Vedi esempio di codice completo)

Se l'indirizzo e la località corrispondono, mostra una conferma nell'app, come mostrato nella figura seguente.

Consenti agli utenti di inserire un indirizzo in base a un nome di attività o punto d'interesse. Il servizio di previsione "digita" non funziona solo per gli indirizzi, ma puoi anche decidere di consentire agli utenti di inserire nomi di attività o punti di riferimento. Per consentire l'inserimento sia degli indirizzi che dei nomi delle strutture, rimuovi la proprietà types dalla definizione di completamento automatico.

Personalizza l'aspetto della casella Place Autocomplete in base allo stile del tuo sito web. Se preferisci controllare l'aspetto di Place Autocomplete nella tua app anziché utilizzare il widget di Google, puoi utilizzare Place Autocomplete in modo programmatico per ottimizzare la UI che crei con il servizio Place Autocomplete.