\r\n

51Degrees Device Detection Python  4.3

Device Detection services for 51Degrees Pipeline

hash/useragentclienthints-web.py

This example requires a local data file. Free data files can be acquired by pulling the submodules under this repository or from the device-detection-data GitHub repository.

Expected output:

1 User Agent Client Hints Example
2 
3 Hardware Vendor: Unknown
4 Hardware Name: Array
5 Device Type: Desktop
1 # *********************************************************************
2 # This Original Work is copyright of 51 Degrees Mobile Experts Limited.
3 # Copyright 2019 51 Degrees Mobile Experts Limited, 5 Charlotte Close,
4 # Caversham, Reading, Berkshire, United Kingdom RG4 7BY.
5 #
6 # This Original Work is licensed under the European Union Public Licence (EUPL)
7 # v.1.2 and is subject to its terms as set out below.
8 #
9 # If a copy of the EUPL was not distributed with this file, You can obtain
10 # one at https://opensource.org/licenses/EUPL-1.2.
11 #
12 # The 'Compatible Licences' set out in the Appendix to the EUPL (as may be
13 # amended by the European Commission) shall be deemed incompatible for
14 # the purposes of the Work and the provisions of the compatibility
15 # clause in Article 5 of the EUPL shall not apply.
16 #
17 # If using the Work as, or as part of, a network application, by
18 # including the attribution notice(s) required under Article 5 of the EUPL
19 # in the end user terms of the application under an appropriate heading,
20 # such notice(s) shall fulfill the requirements of that article.
21 # ********************************************************************
22 
23 
39 
40 from fiftyone_devicedetection_onpremise.devicedetection_onpremise_pipelinebuilder import DeviceDetectionOnPremisePipelineBuilder
41 from fiftyone_pipeline_core.web import *
42 from flask.helpers import make_response
43 
44 data_file = "../fiftyone_devicedetection_onpremise/device-detection-cxx/device-detection-data/51Degrees-LiteV4.1.hash"
45 
46 # First create the device detection pipeline with the desired settings and include required UACH
47 # properties that follows the following format.
48 # SetHeader[Component name][Response header name]
49 # e.g. for browser, platform and hardware component properties to be set in Accept-CH response header
50 # include SetHeaderBrowserAccept-CH, SetHeaderPlatformAccept-CH and SetHeaderHardwareAccept-CH
51 # properties respectively.
52 
53 pipeline = DeviceDetectionOnPremisePipelineBuilder(
54  data_file_path = data_file,
55  licence_keys = "",
56  performance_profile = 'MaxPerformance',
57  auto_update=False).build()
58 
59 from flask import Flask, request
60 
61 app = Flask(__name__)
62 
63 # Helper function to get a property value if it exists and return
64 # the reason why if it doesn't
65 
66 def get_value_helper(flowdata, engine, property_key):
67 
68  engine_properties = getattr(flowdata, engine)
69 
70  try:
71  property_value = getattr(engine_properties, property_key)
72 
73  if property_value.has_value():
74  return property_value.value()
75  else:
76  return property_value.no_value_message()
77  except:
78  return "Not found in datafile"
79 
80 # Create a main route for the device detections
81 
82 @app.route('/')
83 def server():
84 
85  # Create the flowdata object for the device detection
86 
87  flowdata = pipeline.create_flowdata()
88 
89  # Add any information from the request (headers, cookies and any other additional information)
90 
91  flowdata.evidence.add_from_dict(webevidence(request))
92 
93  # Process the flowdata
94 
95  flowdata.process()
96 
97  # Generate the HTML
98 
99  output = "<h2>User Agent Client Hints Example</h2>"
100 
101  output += """
102 
103  <p>
104  By default, the user-agent, sec-ch-ua and sec-ch-ua-mobile HTTP headers
105  are sent.
106  <br />
107  This means that on the first request, the server can determine the
108  browser from sec-ch-ua while other details must be derived from the
109  user-agent.
110  <br />
111  If the server determines that the browser supports client hints, then
112  it may request additional client hints headers by setting the
113  Accept-CH header in the response.
114  <br />
115  Select the <strong>Make second request</strong> button below,
116  to use send another request to the server. This time, any
117  additional client hints headers that have been requested
118  will be included.
119  </p>
120 
121  <button type="button" onclick="redirect()">Make second request</button>
122  <script>
123 
124  // This script will run when button will be clicked and device detection request will again
125  // be sent to the server with all additional client hints that was requested in the previous
126  // response by the server.
127  // Following sequence will be followed.
128  // 1. User will send the first request to the web server for detection.
129  // 2. Web Server will return the properties in response based on the headers sent in the request. Along
130  // with the properties, it will also send a new header field Accept-CH in response indicating the additional
131  // evidence it needs. It builds the new response header using SetHeader[Component name]Accept-CH properties
132  // where Component Name is the name of the component for which properties are required.
133  // 3. When "Make second request" button will be clicked, device detection request will again
134  // be sent to the server with all additional client hints that was requested in the previous
135  // response by the server.
136  // 4. Web Server will return the properties based on the new User Agent CLient Hint headers
137  // being used as evidence.
138 
139  function redirect() {
140  sessionStorage.reloadAfterPageLoad = true;
141  window.location.reload(true);
142  }
143 
144  window.onload = function () {
145  if ( sessionStorage.reloadAfterPageLoad ) {
146  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>";
147  sessionStorage.reloadAfterPageLoad = false;
148  }
149  else{
150  document.getElementById('description').innerHTML = "<p>The following values are determined by sever-side device detection on the first request.</p>";
151  }
152  }
153 
154  </script>
155 
156  <div id="evidence">
157  <strong></br>Evidence values used: </strong>
158  <table>
159  <tr>
160  <th>Key</th>
161  <th>Value</th>
162  </tr>
163 
164  """
165  evidences = pipeline.get_element("device").filter_evidence(flowdata)
166  for key, value in evidences.items():
167  output += "<tr>"
168  output += "<td>" + str(key) + "</td>"
169  output += "<td>" + str(value) + "</td>"
170  output += "</>"
171  output += "</table>"
172  output += "</div>"
173 
174  output += "<div id=description></div>"
175  output += "<div id=\"content\">"
176  output += "<strong>Detection results:</strong></br>"
177  output += "<p>"
178  output += "<b>Hardware Vendor:</b> " + str(get_value_helper(flowdata, "device", "hardwarevendor"))
179  output += "<br />"
180  output += "<b>Hardware Name:</b> " + str(get_value_helper(flowdata, "device", "hardwarename"))
181  output += "<br />"
182  output += "<b>Device Type:</b> " + str(get_value_helper(flowdata, "device", "devicetype"))
183  output += "<br />"
184  output += "<b>Platform Vendor:</b> " + str(get_value_helper(flowdata, "device", "platformvendor"))
185  output += "<br />"
186  output += "<b>Platform Name:</b> " + str(get_value_helper(flowdata, "device", "platformname"))
187  output += "<br />"
188  output += "<b>Platform Version:</b> " + str(get_value_helper(flowdata, "device", "platformversion"))
189  output += "<br />"
190  output += "<b>Browser Vendor:</b> " + str(get_value_helper(flowdata, "device", "browservendor"))
191  output += "<br />"
192  output += "<b>Browser Name:</b> " + str(get_value_helper(flowdata, "device", "browsername"))
193  output += "<br />"
194  output += "<b>Browser Version:</b> " + str(get_value_helper(flowdata, "device", "browserversion"))
195  output += "<br /></div>"
196 
197  # Create a response variable and add response object
198 
199  response = make_response(output)
200 
201  # Some browsers require that extra HTTP headers are explicitly
202  # requested. So set whatever headers are required by the browser in
203  # order to return the evidence needed by the pipeline.
204  # More info on this can be found at
205  # https://51degrees.com/blog/user-agent-client-hints
206 
207  response = set_response_header(flowdata, response)
208 
209  return response