Blocking Traffic from all but one country

Ask the community
,
1

Hello Wixers! I’m trying to block all incoming traffic from all countries while only allowing Mexican users to access but I can’t seem to get it working, any help would be appreciated.
This is the website https://www.dargenta.mx

This is the code:

Wix Block Country Array

import wixLocation from ‘wix-location’;
import {fetch} from ‘wix-fetch’;
$w.onReady( function () {
fetch(‘https://extreme-ip-lookup.com/json’, {
method: ‘get’
})
.then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
})
})
const blocked = [‘AE’, ‘AF’, ‘AG’, ‘AI’, ‘AL’, ‘AM’, ‘AO’, ‘AQ’, ‘AR’, ‘AS’, ‘AT’, ‘AU’, ‘AW’, ‘AX’, ‘AZ’, ‘BA’, ‘BB’, ‘BD’, ‘BE’, ‘BF’, ‘BG’, ‘BH’, ‘BI’, ‘BJ’, ‘BL’, ‘BM’, ‘BN’, ‘BO’, ‘BQ’, ‘BR’, ‘BS’, ‘BT’, ‘BV’, ‘BW’, ‘BY’, ‘BZ’, ‘CA’, ‘CC’, ‘CD’, ‘CF’, ‘CG’, ‘CH’, ‘CI’, ‘CK’, ‘CL’, ‘CM’, ‘CN’, ‘CO’, ‘CR’, ‘CU’, ‘CV’, ‘CW’, ‘CX’, ‘CY’, ‘CZ’, ‘DE’, ‘DJ’, ‘DK’, ‘DM’, ‘DO’, ‘DZ’, ‘EC’, ‘EE’, ‘EG’, ‘EH’, ‘ER’, ‘ES’, ‘ET’, ‘FI’, ‘FJ’, ‘FK’, ‘FM’, ‘FO’, ‘FR’, ‘GA’, ‘GB’, ‘GD’, ‘GE’, ‘GF’, ‘GG’, ‘GH’, ‘GI’, ‘GL’, ‘GM’, ‘GN’, ‘GP’, ‘GQ’, ‘GR’, ‘GS’, ‘GT’, ‘GU’, ‘GW’, ‘GY’, ‘HK’, ‘HM’, ‘HN’, ‘HR’, ‘HT’, ‘HU’, ‘ID’, ‘IE’, ‘IL’, ‘IM’, ‘IN’, ‘IO’, ‘IQ’, ‘IR’, ‘IS’, ‘IT’, ‘JE’, ‘JM’, ‘JO’, ‘JP’, ‘KE’, ‘KG’, ‘KH’, ‘KI’, ‘KM’, ‘KN’, ‘KP’, ‘KR’, ‘KW’, ‘KY’, ‘KZ’, ‘LA’, ‘LB’, ‘LC’, ‘LI’, ‘LK’, ‘LR’, ‘LS’, ‘LT’, ‘LU’, ‘LV’, ‘LY’, ‘MA’, ‘MC’, ‘MD’, ‘ME’, ‘MF’, ‘MG’, ‘MH’, ‘MK’, ‘ML’, ‘MM’, ‘MN’, ‘MO’, ‘MQ’, ‘MR’, ‘MS’, ‘MT’, ‘MU’, ‘MV’, ‘MW’, ‘MY’, ‘MZ’, ‘NA’, ‘NC’, ‘NE’, ‘NF’, ‘NG’, ‘NI’, ‘NL’, ‘NO’, ‘NP’, ‘NR’, ‘NU’, ‘NZ’, ‘OM’, ‘PA’, ‘PE’, ‘PF’, ‘PG’, ‘PH’, ‘PK’, ‘PL’, ‘PM’, ‘PN’, ‘PR’, ‘PS’, ‘PT’, ‘PW’, ‘PY’, ‘QA’, ‘RE’, ‘RO’, ‘RS’, ‘RU’, ‘RW’, ‘SA’, ‘SB’, ‘SC’, ‘SD’, ‘SE’, ‘SG’, ‘SH’, ‘SI’, ‘SJ’, ‘SK’, ‘SL’, ‘SM’, ‘SN’, ‘SO’, ‘SR’, ‘SS’, ‘ST’, ‘SV’, ‘SX’, ‘SY’, ‘SZ’, ‘TC’, ‘TD’, ‘TF’, ‘TG’, ‘TH’, ‘TJ’, ‘TK’, ‘TL’, ‘TM’, ‘TN’, ‘TO’, ‘TR’, ‘TT’, ‘TV’, ‘TW’, ‘TZ’, ‘UA’, ‘UG’, ‘UM’, ‘US’, ‘UY’, ‘UZ’, ‘VA’, ‘VC’, ‘VE’, ‘VG’, ‘VI’, ‘VN’, ‘VU’, ‘WF’, ‘WS’, ‘YE’, ‘YT’, ‘ZA’, ‘ZM’, ‘ZW’]; // Array of blocked country codes
const loc = json.countryCode; // The location of the visitor

// Log the location to the console - for reference
console.into(Visitor country code is: ${loc}.)

if (blocked.indexOf(loc) > -1) {
wixLocation.to(‘/not-mexico’);
} else {
wixLocation.to(‘’);
}

2

What’s currently happening with your code is that you call the fetch for the IP lookup, and then (and this is important ) before the fetch returns its results , you check the location.

You need to move the code that checks the location into the .then() function so that it runs after the fetch’s Promise has been resolved .

See the following for more information about Promises:

3

Yisrael! Thank you very much, I made up this piece of code from several iterations of it and don’t really understand how to do that… DO you know of someone that might help me fix it?

Best regards

Simon

4

The following code should work:

import { fetch } from 'wix-fetch';
import wixLocation from 'wix-location';

const API_KEY = < API KEY from extreme-ip-lookup.com >;

$w.onReady(function () {
    fetch(`https://extreme-ip-lookup.com/json/?key=${API_KEY}`, {
            method: 'get'
        })
        .then((httpResponse) => {
            if (httpResponse.ok) {
                return httpResponse.json();
            }
        })

        .then((json) => {
            const loc = json.countryCode;
            if(loc !== 'MX') {
                wixLocation.to('/not-available');
            }
        });
})

Note that the above code is problematic since it exposes your [secret] API KEY to your site visitors. A better option would be to use the method demonstrated in the Find Visitor Location example.

5

Hello Yisrael, I think something is missing here, in the meantime I don’t mind showing my key, I’ll deal with the routers later or try to hide it in the secrets manager and reference it.

918×492 38.8 KB

936×504 42.4 KB

current code looks like this

import wixLocation from ‘wix-location’ ;
import { fetch } from ‘wix-fetch’ ;

const API_KEY = < “extreme api” >;

$w . onReady ( function () {
fetch ( https://extreme-ip-lookup.com/json/?key= ${ API_KEY }, {
method : ‘get’
})
. then (( httpResponse ) => {
if ( httpResponse . ok ) {
return httpResponse . json ();
}
})

    . then (( json ) => { 
        const  loc  =  json . countryCode ; 
        $w ( '#txtLocation' ). text  =  loc ; 
        if ( loc  !==  'MX' ) { 
            wixLocation . to ( '/not-mexico' ); 
        } 
    });

})

Thanks for your help.

Best regards & Happy new Year!

6

Just delete this line:

$w('#txtLocation').text=loc;

I was using a text field in my test site and you don’t need this. I changed the code in my post above by deleting this line.

My code was tested and works.

7

Got it working!

On the second website I’m trying to do the exact opposite, if Mexico’s the country where you are, it redirects you, bot this one seems again to elude me, I changed the !== MX to ===MX so it only activates if you are in mexico but no luck.
Here is the Modified code

$w.onReady( function () {
fetch(https://extreme-ip-lookup.com/json/?key=${API_KEY}, {
method: ‘get’
})
.then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
})

    .then((json) => { 
        const  loc = json.countryCode; 
        if  (loc === 'MX') { 
            wixLocation.to('/to-mexico'); 
        } 
    });

})

8

Seems OK to me. You’ll have to debug this and figure out what’s going on. You an start with adding a console.log() statement to see what the value of loc (countryCode) is. Something like this:

const loc = json.countryCode;
console.log(loc);