diff --git a/docs/images/tutorial2/client_id.png b/docs/images/tutorial2/client_id.png index 7e87aa6..e239625 100644 Binary files a/docs/images/tutorial2/client_id.png and b/docs/images/tutorial2/client_id.png differ diff --git a/docs/images/tutorial2/client_secret.png b/docs/images/tutorial2/client_secret.png index 1ce2dc6..f3e23f5 100644 Binary files a/docs/images/tutorial2/client_secret.png and b/docs/images/tutorial2/client_secret.png differ diff --git a/docs/images/tutorial2/content_list.png b/docs/images/tutorial2/content_list.png new file mode 100644 index 0000000..8fa7456 Binary files /dev/null and b/docs/images/tutorial2/content_list.png differ diff --git a/docs/images/tutorial2/thumbnail.png b/docs/images/tutorial2/thumbnail.png new file mode 100644 index 0000000..c1410db Binary files /dev/null and b/docs/images/tutorial2/thumbnail.png differ diff --git a/docs/images/tutorial2/tokens.png b/docs/images/tutorial2/tokens.png new file mode 100644 index 0000000..8ecbeed Binary files /dev/null and b/docs/images/tutorial2/tokens.png differ diff --git a/docs/tutorial2.md b/docs/tutorial2.md index 24ce134..a795931 100644 --- a/docs/tutorial2.md +++ b/docs/tutorial2.md @@ -5,7 +5,7 @@ The RICOH360 Viewer requires two things to start: 1. token for viewer 2. contentId for the image you want to show -```javascript linenums="1" hl_lines="4 8" title="index.html snippet" +```javascript linenums="1" hl_lines="4 8" title="index.html" // instantiate viewer object const viewer = new RICOH360Viewer({ divId: "viewer", @@ -80,7 +80,7 @@ The Client ID is shorter. With the `CLIENT_ID` and `PRIVATE_KEY` set in your Python script, you can now generate the token for the RICOH360 Viewer. -```python linenums="34" title="server.py snippet" +```python linenums="34" title="server.py" # generate token for RICOH360 Viewer payload = {"client_id": CLIENT_ID} token = jwt.encode(payload, PRIVATE_KEY, algorithm="RS256") @@ -102,12 +102,12 @@ token for RICOH360 Viewer: eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.XE4c2tlamFtaTQzb ... ``` -## contentId +## Content ID We can now instantiate the viewer. However, we won't be able to see any image in the viewer until we supply it with a contentId. -```javascript linenums="1" hl_lines="8" title="index.html snippet" +```javascript linenums="1" hl_lines="8" title="index.html" // instantiate viewer object const viewer = new RICOH360Viewer({ divId: "viewer", @@ -146,7 +146,7 @@ pip install requests Import requests and base64 in your `server.py` file. -```python +```python linenums="1" title="server.py" import jwt import requests import base64 @@ -155,3 +155,111 @@ PRIVATE_KEY = """-----BEGIN PRIVATE KEY----- ... ... ``` + +### Make request to AWS Cognito for RICOH360 Cloud token + +Use this code to get the RICOH360 Cloud token. Place it at the bottom of +your `server.py` file + +```python linenums="42" title="server.py" +# generate token for RICOH360 Cloud API +# Endpoint and authentication for AWS token +token_endpoint = "https://saas-prod.auth.us-west-2.amazoncognito.com/oauth2/token" # noqa: E501 +auth = base64.b64encode(f"{CLIENT_ID}:{CLIENT_SECRET}".encode()).decode("utf-8") # noqa: E501 +headers = { + "Content-Type": "application/x-www-form-urlencoded", + "Authorization": f"Basic {auth}", +} +body = {"grant_type": "client_credentials", "scope": "all/read"} + +# Request AWS token +token_response = requests.post(token_endpoint, headers=headers, data=body) +token_object = token_response.json() +ricoh_cloud_access_token = token_object.get("access_token") +print(8 * "=") +print(f"RICOH360 Cloud Token\n {ricoh_cloud_access_token}") +``` + +### Test RICOH360 Cloud Token Creation + +Run `python server.py` to test the RICOH360 Cloud token creation. + +You should see your two tokens printed to the console. + +![tokens](images/tutorial2/tokens.png) + +Congratulations. Now that you have the two tokens, you're almost +done with the setup. You just need to get a Content ID for the image +you want to display. + +### Use Cloud Token to Get Content + +Remember that our goal is to send a `contentId` to the HTML file that will +display the image. Prior to building the HTML page, we are getting +the content ID to send to the HTML file. + +Although we are only building the `server.py` file at this point, let's +look at the JavaScript snippet again to understand our goal. + +```javascript linenums="1" hl_lines="8" title="index.html" +// instantiate viewer object +const viewer = new RICOH360Viewer({ + divId: "viewer", + onFetchToken: () => "{{token}}", +}); +// start viewer with content +viewer.start({ + contentId: "{{contentId}}" +}); +``` + +Add this code to the bottom of your `server.py` file. + +```python linenums="60" title="server.py" + +# get content from RICOH360 Cloud server +print("start process to contact RICOH360 Cloud server to get content") +# Fetch content using the token +content_headers = {"Authorization": f"Bearer {ricoh_cloud_access_token}"} +content_response = requests.get( + "https://api.ricoh360.com/contents?limit=1", headers=content_headers +) +content_data = content_response.json() +print("got response from RICOH360 Cloud server") +print("RICOH360 Cloud Content") +print(content_data) +``` + +### Test contents API + +run `python server.py` + +!!! tip + Make sure you have content in your RICOH360 Cloud account. + +You should see the content listing. + +![content listing](images/tutorial2/content_list.png) + +In most editors, you can also click on the link to the thumbnail. On a Mac, +I am using CMD-click. + +![thumbnail](images/tutorial2/thumbnail.png) + +### parse content_id from JSON + +```python title="server.py" linenums="72" +# parse content_id +print(8 * "=") +print("Get content_id from data") +content_id = content_data[0]["content_id"] +print(content_id) +``` + +You should see this output on the console. + +```text +======== +Get content_id from data +c6eac34b-9bdc-4ba1-81af-29470fdead79 +```