This example demonstrates how a User-Agent Client Hints (UACH) round trip works with the 51Degrees cloud service.

This example demonstrates how a User-Agent Client Hints (UACH) round trip works with the 51Degrees cloud service. By default the user-agent, sec-ch-ua and sec-ch-ua-mobile HTTP headers are sent. If device detection determines that the browser supports client hints then it requests additional client hints headers by setting the Accept-CH header in the response. Selecting the "Make second request" button reloads the page so those additional headers are included as evidence.

This example is available in full on GitHub.

To run this example, you will need to create a Resource Key. The Resource Key stores your selected properties and any associated License Keys that allow more requests or access to paid properties.

You can create a Resource Key at configure.51degrees.com.

Required PyPi Dependencies:

View

{#

*********************************************************************

* This Original Work is copyright of 51 Degrees Mobile Experts Limited.

* Forbury Square, Reading, Berkshire, United Kingdom RG1 3EU.

*

* This Original Work is licensed under the European Union Public Licence (EUPL)

* v.1.2 and is subject to its terms as set out below.

*

* If a copy of the EUPL was not distributed with this file, You can obtain

* one at https://opensource.org/licenses/EUPL-1.2.

*

* The 'Compatible Licences' set out in the Appendix to the EUPL (as may be

* amended by the European Commission) shall be deemed incompatible for

* the purposes of the Work and the provisions of the compatibility

* clause in Article 5 of the EUPL shall not apply.

*

* If using the Work as, or as part of, a network application, by

* including the attribution notice(s) required under Article 5 of the EUPL

* in the end user terms of the application under an appropriate heading,

* such notice(s) shall fulfill the requirements of that article.

* ********************************************************************* #}

<head>

<title>User-Agent Client Hints Example</title>

</head>

<h2 class="c-eg-page__title">User-Agent Client Hints example</h2>

By default, the user-agent, sec-ch-ua and sec-ch-ua-mobile HTTP headers are sent. This means

that on the first request, the server can determine the browser from sec-ch-ua while other

details must be derived from the user-agent. If the server determines that the browser supports

client hints, then it may request additional client hints headers by setting the Accept-CH

header in the response.

</p>

Select the <strong>Make second request</strong> button below to send another request to the

server. This time, any additional client hints headers that have been requested will be included

as evidence.

</p>

<button type="button" class="b-btn" onclick="redirect()">Make second request</button>

</div>

<h3 class="c-eg-page__heading">Evidence values used</h3>

Evidence was

/

<span class="c-eg-legend__swatch c-eg-legend__swatch--present">present</span>

for detection

</p>

<th class="c-eg-table__cell">Value</th>

</tr>

</thead>

<tbody>

{% for key, value in data.evidence.get_all().items() %}

{% if "header.user-agent" in key or "header.sec-ch" in key %}

{% if data.pipeline.get_element("cloud").get_evidence_key_filter().filter_evidence_key(key) %}

{% else %}

{% endif %}

<td class="c-eg-table__cell">{{ value }}</td>

</tr>

{% endif %}

{% endfor %}

</tbody>

</table>

<h3 class="c-eg-page__heading">Detection results</h3>

<th class="c-eg-table__cell">Value</th>

</tr>

</thead>

<tbody>

<tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Hardware Vendor:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "hardwarevendor") }}</td></tr>

<tr class="c-eg-table__row"><td class="c-eg-table__cell c-eg-table__cell--key">Hardware Name:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "hardwarename") }}</td></tr>

<tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Device Type:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "devicetype") }}</td></tr>

<tr class="c-eg-table__row"><td class="c-eg-table__cell c-eg-table__cell--key">Platform Vendor:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "platformvendor") }}</td></tr>

<tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Platform Name:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "platformname") }}</td></tr>

<tr class="c-eg-table__row"><td class="c-eg-table__cell c-eg-table__cell--key">Platform Version:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "platformversion") }}</td></tr>

<tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Browser Vendor:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "browservendor") }}</td></tr>

<tr class="c-eg-table__row"><td class="c-eg-table__cell c-eg-table__cell--key">Browser Name:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "browsername") }}</td></tr>

<tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Browser Version:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "browserversion") }}</td></tr>

</tbody>

</table>

</div>

<div class="c-eg-message"><p class="c-eg-message__text">Want to try on-premise? <a href="/contact-us?utm_source=code&utm_medium=example&utm_campaign=51degrees-python&utm_content=fiftyone_devicedetection_examples-src-fiftyone_devicedetection_examples-cloud-useragentclienthints_web-templates-index.html&utm_term=try-on-premise">Contact us</a> to discuss requirements.</p><a class="b-btn c-eg-message__cta" href="/contact-us?utm_source=code&utm_medium=example&utm_campaign=51degrees-python&utm_content=fiftyone_devicedetection_examples-src-fiftyone_devicedetection_examples-cloud-useragentclienthints_web-templates-index.html&utm_term=try-on-premise">Contact us</a></div>

</div>

// This script runs when the "Make second request" button is clicked and a device

// detection request is sent to the server again with all the additional client hints

// that were requested in the previous response by the server.

// The following sequence is followed:

// 1. The user sends the first request to the web server for detection.

// 2. The web server returns the properties in the response based on the headers sent

// in the request. Along with the properties, it also sends a new Accept-CH header in

// the response indicating the additional evidence it needs. It builds the new

// response header using SetHeader[Component name]Accept-CH properties where Component

// Name is the name of the component for which properties are required.

// 3. When the "Make second request" button is clicked, the device detection request is

// sent to the server again with all the additional client hints that were requested

// in the previous response by the server.

// 4. The web server returns the properties based on the new User-Agent Client Hint

// headers being used as evidence.

function redirect() {

sessionStorage.reloadAfterPageLoad = true;

window.location.reload(true);

}

window.onload = function () {

if (sessionStorage.reloadAfterPageLoad) {

document.getElementById('description').innerHTML = "<p class=\"c-eg-page__lead\">The information shown below is determined using <strong>User-Agent Client Hints</strong> that were sent in the request to obtain additional evidence. If no additional information appears then it may indicate an external problem such as <strong>User-Agent Client Hints</strong> being disabled in your browser.</p>";

sessionStorage.reloadAfterPageLoad = false;

}

else {

document.getElementById('description').innerHTML = "<p class=\"c-eg-page__lead\">The following values are determined by server-side device detection on the first request.</p>";

}

};

</script>

App

# *********************************************************************

# This Original Work is copyright of 51 Degrees Mobile Experts Limited.

# Forbury Square, Reading, Berkshire, United Kingdom RG1 3EU.

#

# This Original Work is licensed under the European Union Public Licence

# (EUPL) v.1.2 and is subject to its terms as set out below.

#

# If a copy of the EUPL was not distributed with this file, You can obtain

# one at https://opensource.org/licenses/EUPL-1.2.

#

# The 'Compatible Licences' set out in the Appendix to the EUPL (as may be

# amended by the European Commission) shall be deemed incompatible for

# the purposes of the Work and the provisions of the compatibility

# clause in Article 5 of the EUPL shall not apply.

#

# If using the Work as, or as part of, a network application, by

# including the attribution notice(s) required under Article 5 of the EUPL

# in the end user terms of the application under an appropriate heading,

# such notice(s) shall fulfill the requirements of that article.

# *********************************************************************

import os

import sys

from fiftyone_devicedetection_examples.example_utils import ExampleUtils

from flask import Flask, request, render_template

from flask.helpers import make_response

from fiftyone_devicedetection_cloud.devicedetection_cloud_pipelinebuilder import DeviceDetectionCloudPipelineBuilder

from fiftyone_pipeline_core.logger import Logger

from fiftyone_pipeline_core.web import webevidence, set_response_header

class UserAgentClientHintsWeb():

app = Flask(__name__)

def build(self, resource_key, logger):

# First create the device detection pipeline with the desired settings.

# The cloud service is configured with the required UACH SetHeader properties

# which follow the format SetHeader[Component name][Response header name],

# e.g. for browser component properties to be set in the Accept-CH response

# header use the SetHeaderBrowserAccept-CH property.

pipeline_settings = {

"resource_key": resource_key,

# Set to True so a device-detection failure degrades gracefully instead of

# returning a 500 for every request. Use False while developing to surface

# mistakes loudly. Errors are still recorded on flowdata.errors / the logger.

"suppress_process_exceptions": True,

}

# If a cloud endpoint is set in the environment, point the pipeline at it.

cloud_endpoint = ExampleUtils.get_cloud_endpoint()

if cloud_endpoint:

pipeline_settings["cloud_endpoint"] = cloud_endpoint

UserAgentClientHintsWeb.pipeline = DeviceDetectionCloudPipelineBuilder(

pipeline_settings).add_logger(logger).build()

return self

def run(self):

UserAgentClientHintsWeb.app.run(port=int(os.environ.get("PORT", 5000)))

# The main route performs device detection and renders the results. On the

# second request, any additional client hints headers requested via the

# Accept-CH response header from the first request will be included as evidence.

@staticmethod

@app.route('/')

def server():

# Create the flowdata object for the device detection

flowdata = UserAgentClientHintsWeb.pipeline.create_flowdata()

# Add any information from the request (headers, cookies and any other

# additional information)

flowdata.evidence.add_from_dict(webevidence(request))

# Process the flowdata

flowdata.process()

response = make_response()

# Some browsers require that extra HTTP headers are explicitly

# requested. So set whatever headers are required by the browser in

# order to return the evidence needed by the pipeline.

# More info on this can be found at

# /blog/user-agent-client-hints?utm_source=code&utm_medium=example&utm_campaign=51degrees-python&utm_content=fiftyone_devicedetection_examples-src-fiftyone_devicedetection_examples-cloud-useragentclienthints_web-app.py&utm_term=server

set_response_header(flowdata, response)

# Generate the HTML

response.set_data(render_template(

'index.html',

data=flowdata,

utils=ExampleUtils,

response=response))

return response

def main(argv):

# Use the command line args to get the resource key if present.

# Otherwise, get it from the environment variable.

resource_key = argv[0] if len(argv) > 0 else ExampleUtils.get_resource_key()

# Configure a logger to output to the console.

logger = Logger(min_level="info")

if (resource_key):

UserAgentClientHintsWeb().build(resource_key, logger).run()

else:

logger.log("error",

"No resource key specified in environment variable " +

f"'{ExampleUtils.RESOURCE_KEY_ENV_VAR}'. The 51Degrees " +

"cloud service is accessed using a 'ResourceKey'. " +

"For more detail see " +

"/documentation/_services__cloud__resource_keys.html?utm_source=code&utm_medium=example&utm_campaign=51degrees-python&utm_content=fiftyone_devicedetection_examples-src-fiftyone_devicedetection_examples-cloud-useragentclienthints_web-app.py&utm_term=resource-key-required. " +

"A resource key with the properties required by this " +

"example can be created for free at " +

"https://configure.51degrees.com/?utm_source=code&utm_medium=example&utm_campaign=51degrees-python&utm_content=fiftyone_devicedetection_examples-src-fiftyone_devicedetection_examples-cloud-useragentclienthints_web-app.py&utm_term=resource-key-required. " +

"Once complete, populated the environment variable " +

"mentioned at the start of this message with the key.")

if __name__ == "__main__":

main(sys.argv[1:])

build

Definition onpremise/build/__init__.py:1

fiftyone_devicedetection_cloud.devicedetection_cloud_pipelinebuilder

Definition devicedetection_cloud_pipelinebuilder.py:1

fiftyone_devicedetection_examples.example_utils

Definition example_utils.py:1

fiftyone_pipeline_core::logger

fiftyone_pipeline_core::web

cloud/useragentclienthints_web/app.py

View

App