This example demonstrates detection using user-agent client hints. Each client hints header can only be used to determine the properties for a single component. For example, the sec-ch-ua value can be used to determine the browser of the connecting device, but not other components such as the hardware. We show this by first performing detection with sec-ch-ua only. We then repeat with the user-agent header set as well. Note that the client hint takes priority over the user-agent for detecting browser details.
40 from flask.helpers
import make_response
41 from fiftyone_devicedetection_cloud.devicedetection_cloud_pipelinebuilder
import DeviceDetectionCloudPipelineBuilder
48 if "resource_key" in os.environ:
49 resource_key = os.environ[
"resource_key"]
51 resource_key =
"!!YOUR_RESOURCE_KEY!!" 53 if resource_key ==
"!!YOUR_RESOURCE_KEY!!":
55 You need to create a resource key at 56 https://configure.51degrees.com and paste it into the code, 57 'replacing !!YOUR_RESOURCE_KEY!! 58 To include the properties used in this example, go to https://configure.51degrees.com/ 67 pipeline = DeviceDetectionCloudPipelineBuilder({
68 "resource_key": resource_key
71 from flask
import Flask, request
78 def get_value_helper(flowdata, engine, property_key):
80 engine_properties = getattr(flowdata, engine)
83 property_value = getattr(engine_properties, property_key)
85 if property_value.has_value():
86 return property_value.value()
88 return property_value.no_value_message()
90 return "Not found in cloud" 99 flowdata = pipeline.create_flowdata()
103 flowdata.evidence.add_from_dict(webevidence(request))
111 output =
"<h2>User Agent Client Hints Example</h2>" 116 By default, the user-agent, sec-ch-ua and sec-ch-ua-mobile HTTP headers 119 This means that on the first request, the server can determine the 120 browser from sec-ch-ua while other details must be derived from the 123 If the server determines that the browser supports client hints, then 124 it may request additional client hints headers by setting the 125 Accept-CH header in the response. 127 Select the <strong>Make second request</strong> button below, 128 to use send another request to the server. This time, any 129 additional client hints headers that have been requested 133 <button type="button" onclick="redirect()">Make second request</button> 136 // This script will run when button will be clicked and device detection request will again 137 // be sent to the server with all additional client hints that was requested in the previous 138 // response by the server. 139 // Following sequence will be followed. 140 // 1. User will send the first request to the web server for detection. 141 // 2. Web Server will return the properties in response based on the headers sent in the request. Along 142 // with the properties, it will also send a new header field Accept-CH in response indicating the additional 143 // evidence it needs. It builds the new response header using SetHeader[Component name]Accept-CH properties 144 // where Component Name is the name of the component for which properties are required. 145 // 3. When "Make second request" button will be clicked, device detection request will again 146 // be sent to the server with all additional client hints that was requested in the previous 147 // response by the server. 148 // 4. Web Server will return the properties based on the new User Agent CLient Hint headers 149 // being used as evidence. 151 function redirect() { 152 sessionStorage.reloadAfterPageLoad = true; 153 window.location.reload(true); 156 window.onload = function () { 157 if ( sessionStorage.reloadAfterPageLoad ) { 158 document.getElementById('description').innerHTML = "<p>The information shown below is determined using <strong>User Agent Client Hints</strong> that was 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>"; 159 sessionStorage.reloadAfterPageLoad = false; 162 document.getElementById('description').innerHTML = "<p>The following values are determined by sever-side device detection on the first request.</p>"; 169 <strong></br>Evidence values used: </strong> 177 evidences = pipeline.get_element(
"cloud").filter_evidence(flowdata)
178 for key, value
in evidences.items():
179 if (
"header.user-agent" in key
or "header.sec-ch" in key):
181 output +=
"<td>" + str(key) +
"</td>" 182 output +=
"<td>" + str(value) +
"</td>" 187 output +=
"<div id=description></div>" 188 output +=
"<div id=\"content\">" 189 output +=
"<strong>Detection results:</strong></br>" 191 output +=
"<b>Hardware Vendor:</b> " + str(get_value_helper(flowdata,
"device",
"hardwarevendor"))
193 output +=
"<b>Hardware Name:</b> " + str(get_value_helper(flowdata,
"device",
"hardwarename"))
195 output +=
"<b>Device Type:</b> " + str(get_value_helper(flowdata,
"device",
"devicetype"))
197 output +=
"<b>Platform Vendor:</b> " + str(get_value_helper(flowdata,
"device",
"platformvendor"))
199 output +=
"<b>Platform Name:</b> " + str(get_value_helper(flowdata,
"device",
"platformname"))
201 output +=
"<b>Platform Version:</b> " + str(get_value_helper(flowdata,
"device",
"platformversion"))
203 output +=
"<b>Browser Vendor:</b> " + str(get_value_helper(flowdata,
"device",
"browservendor"))
205 output +=
"<b>Browser Name:</b> " + str(get_value_helper(flowdata,
"device",
"browsername"))
207 output +=
"<b>Browser Version:</b> " + str(get_value_helper(flowdata,
"device",
"browserversion"))
208 output +=
"<br /></div>" 212 response = make_response(output)
220 response = set_response_header(flowdata, response)