Merge pull request #21 from theta360developers/tutorial-2

added client_secret screenshot

docs/tutorial2.md

@@ -46,14 +46,22 @@ To generate the viewer token, you need the following:
 1. Client ID
 2. Private Key
 
-We will use PyJWT to generate the viewer token with the Private Key.
+We will use PyJWT and cryptography to generate the viewer token with the Private Key.
 
-### install PyJWT
+### install PyJWT and cryptography
+
+PyJWT is needed to generate the JSON Web Token that the
+viewer needs.  The cryptography package is needed for the
+RS256 encryption used to encode the token.
 
 ```text
-pip install PyJWT
+pip install PyJWT cryptography
 ```
 
+!!! tip
+    You can check the Python packages installed in your environment
+    with `pip freeze`
+
 ### Create `server.py` file
 
 Use VSCode or equivalent to create a file, `server.py`.
@@ -68,3 +76,82 @@ The Private Key is long.  Put it in triple quotes.
 The Client ID is shorter.
 
 ![client id](images/tutorial2/client_id.png)
+
+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"
+# generate token for RICOH360 Viewer
+payload = {"client_id": CLIENT_ID}
+token = jwt.encode(payload, PRIVATE_KEY, algorithm="RS256")
+print(f"token for RICOH360 Viewer: {token}")
+```
+
+### run `server.py`
+
+Test the RICOH360 Viewer token creation by running
+`python server.py`.
+
+Expected output is shown below.  The token is shortened
+in the example.
+
+```text
+python server.py              
+token for RICOH360 Viewer: eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.XE4c2tlamFtaTQzbmZqcWM3YjhwNGxjcXAifQ...
+...
+...
+```
+
+## contentId
+
+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"
+// instantiate viewer object
+const viewer = new RICOH360Viewer({
+    divId: "viewer",
+    onFetchToken: () => "{{token}}",
+});
+// start viewer with content
+viewer.start({
+    contentId: "{{contentId}}"
+});
+```
+
+### Requirements for contentId
+
+You need the following to get a contentId:
+
+1. RICOH THETA images loaded up into your account on the RICOH360 Cloud
+1. RICOH360 Cloud token generated with AWS Cognito
+
+In addition to the requirements above, you also need the following from RICOH
+to generate a RICOH360 Cloud token.
+
+1. Client ID
+1. Client Secret
+
+The Client ID is the same ID used to generate the RICOH360 Viewer token.
+
+Add the `CLIENT_SECRET` below the `CLIENT_ID` in your `server.py` file.
+
+![client secret](images/tutorial2/client_secret.png)
+
+### install requests
+
+```text
+pip install requests
+```
+
+Import requests and base64 in your `server.py` file.
+
+```python
+import jwt
+import requests
+import base64
+
+PRIVATE_KEY = """-----BEGIN PRIVATE KEY-----
+...
+...
+```