Configuring a Custom-Hosted Splash Page

Configure Access Control

1. In Dashboard, navigate to Configure > Access control.
2. Select the SSID you want to configure from the SSID drop-down. 
3. Under Network access > Association requirements, choose "Open", "WPA2," or "WEP." 
4. Under Network access > Network sign-on method, choose "Click-through splash page" or "Sign-on splash page." 
5. Enable walled garden (located under Network access > Walled garden) and enter the public IP address of your web server.
   Note: The address specified needs to be the public-facing IP address of the web server hosting the Splash page, not the local LAN IP. This is because the actual web page request comes from Dashboard, not the local devices.
6. Click "Save Changes." 

Enabling a Custom-Hosted Splash page on the Meraki Cloud

1. Navigate to Configure > Splash page
2. Select the SSID you want to configure from the SSID drop-down.
3. Under Custom splash URL select the radio button Or provide a URL where users will be redirected:
4. Type the URL of your custom splash page:
   
5. Click Save Changes.

Click-through based splash page

1. When a client connects to your network a web browser is opened with an HTTP-based request (ie. http://google.com).
2. Assuming you have successfully completed the configuration on the Meraki cloud in the steps above the Meraki access points (AP) in your network will intercept this request and redirect the user through the Meraki cloud to the custom URL you specified. The user should be directed to a URL similar to the following string:

http://yourwebsite.com/clickthrough....xx:xx:xx:xx:xx

Assuming you have correctly added the web server's IP to the walled garden, the user will be viewing the splash page. Note the extra parameters appended to the URL. It is critical that your web server detects and makes use of these parameters, as they indicate how to grant access. You might choose to store these parameters in a session or otherwise save them for later use.

Note: If your browser enters an infinite redirect loop, check your walled garden settings and ensure the your web server's IP has been added to the walled garden.

3. At this point you can interact with the user however you wish. You might require them to agree to your terms of service, complete a form, or watch an advertisement. It is important to note that the user can fetch any web content within your walled garden.
4. Once you are prepared to grant access to the user, you must forward certain parameters you can gather from the URL in step 2 above. Specifically, you must forward the user to the following URL: 

GET['base_grant_url'] + "?continue_url=" + GET['user_continue_url']

Where the following parameters are extracted from the user’s original query or specified by you:

• base_grant_url = https://n##.network-auth.com/splash/grant (Log into Dashboard and note the number next to "n" in the URL. Use that number in place of "##")
• user_continue_url = http://google.com

In the case of the example above the assembled URL would be:

https://n##.network-auth.com/splash/...p://google.com

Note: Your URL may be different than the above example. It is dynamic and you should therefore never hard-code the grant URL.

5. The Meraki cloud grants access on the AP and redirects the user to continue to the URL (ie. http://www.google.com).
6. Advanced: Network operators can optionally specify the length of the session they are granting, up to 2592000 seconds (30 days). To do so include an extra GET parameter with name "duration."

For example:

GET['base_grant_url'] + "?continue_url=" + GET['user_continue_url'] + "&duration=3600" (to grant access for one hour).

For additional info, please reference our example Clickthrough Splash page code. The script is in its simplest form but it's a working script and can be readily uploaded to your host for testing or use. 

Sign-on based splash page

1. When a client connects to your network a web browser is opened with a HTTP-based request (ie. http://google.com).
2. Assuming you have successfully completed the configuration on the Meraki cloud in the steps above the Meraki access points (AP) in your network will intercept this request and redirect the user through the cloud to the custom URL you specified. The user should be directed to a URL similar to the following string:

http://yourwebsite.com/clickthrough?continue_url=http%3A%2F%2Fgoogle.com...

3. Assuming you have correctly added the web server's IP address to your walled garden (step I-5), the user will be viewing your splash page (Note the extra parameters appended to the URL). It's critical that your web server detects and makes use of these parameters as they indicate how to grant access. You might choose to store these parameters in a session or otherwise save them for later use.

Note: If your browser enters an infinite redirect loop, check your walled garden settings and ensure your web server's IP was added to the walled garden.

4. At this point you can interact with the user however you wish. You might require them to agree to your terms of service, complete a form, or watch an advertisement. It is important to note that the user can fetch any web content within your walled garden.
5. In order to collect logon credentials, you will need to create an HTML based form that collects and then submits these to the login URL. In its simplest form this could look similar to the code below:

<html>
    <head>
        <title>Internet Access Login</title>
    </head>
    <body>
        <h2>Internet Access Login</h2>   
        <form method=POST action="<? urldecode(GET['login_url']) ?>">
            <input type="hidden" name="success_url" value="<? urldecode(GET['continue_url']) ?>" />
            Username: <input type ="text" name="username" />
            Password: <input type ="text" name="password" />
            <input type="submit" value="Login" />
        </form>
    </body>
</html>

In the above example the code inside <? ?> is executed via the server-side. The login_url parameter is an opaque string used by the Meraki cloud for authentication and security. It is subject to change and should not be hard-coded.

6. The user will be prompted (per your custom-hosted page) to enter their credentials and then submit the form to the Meraki cloud.
7. The Meraki cloud will then send a RADIUS access-request message to the configured RADIUS server which will then receive an Access-accept message (assuming the account is valid and grants access to the AP as appropriate).
8. In a successful sign-on, the Meraki cloud redirects the user to the provided success URL. For failures the user is redirected to the original captive portal URL. If the RADIUS server responds with an error the user will be presented with the error contained in the "error_message" parameter.