From a1ae2ec4f96a1e43160f153ee8abb78636e89059 Mon Sep 17 00:00:00 2001 From: Salman Sami Date: Mon, 29 Jul 2024 11:57:03 +0500 Subject: [PATCH 1/4] Updated the ndex.html contents --- .../project-implementation/web.mdx | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/shared/video-sdk/authentication-workflow/project-implementation/web.mdx b/shared/video-sdk/authentication-workflow/project-implementation/web.mdx index 6f768bf3b..170717a3b 100644 --- a/shared/video-sdk/authentication-workflow/project-implementation/web.mdx +++ b/shared/video-sdk/authentication-workflow/project-implementation/web.mdx @@ -10,15 +10,28 @@ This section shows you how to integrate token authentication in your - Token demo + + Token Demo + + + + - -

Token demo

- - +

Token Demo

+
+
+ + +
+
``` From f28ed61f53f91f98f04ce7f58fea02db029e55cb Mon Sep 17 00:00:00 2001 From: Salman Sami Date: Mon, 29 Jul 2024 17:03:10 +0500 Subject: [PATCH 2/4] Updated the Use a token section and addition of links --- .../authentication-workflow/index.mdx | 14 +- .../project-implementation/web.mdx | 408 +++++++++--------- 2 files changed, 214 insertions(+), 208 deletions(-) diff --git a/shared/video-sdk/authentication-workflow/index.mdx b/shared/video-sdk/authentication-workflow/index.mdx index f160df441..5fc711990 100644 --- a/shared/video-sdk/authentication-workflow/index.mdx +++ b/shared/video-sdk/authentication-workflow/index.mdx @@ -6,13 +6,13 @@ import ProjectImplement from '@docs/shared/video-sdk/authentication-workflow/pro import ProjectTest from '@docs/shared/video-sdk/authentication-workflow/project-test/index.mdx'; import Reference from '@docs/shared/video-sdk/authentication-workflow/reference/index.mdx'; -Authentication is the process of validating the identity of each user before they access a system. uses digital tokens to authenticate users and their privileges. A token is a string used to verify user privileges when joining a channel. When a user connects to and passes in the token, the server verifies the user's identity and permissions based on the information in the token. +Authentication is the process of validating the identity of each user before they access a system. uses digital tokens to authenticate users and their privileges. A [token](./video-calling/reference/glossary?#token) is a string used to verify user privileges when joining a channel. When a user connects to and passes in the token, the server verifies the user's identity and permissions based on the information in the token. ## Understand the tech enables you to implement permissions in two distinct ways according to your scenario: -- **Uniform permissions**: Uniformly set permissions for joining channels and concurrent streams. This is applicable to most scenarios. For details, see [Implement basic authentication](#implement-basic-authentication). +- **Uniform permissions**: Uniformly set permissions for joining [channels](./video-calling/reference/glossary?#channel) and concurrent streams. This is applicable to most scenarios. For details, see [Implement basic authentication](#implement-basic-authentication). - **Finely control permissions for publishing different streams**: Manage permissions to publish different types of streams, such as audio, video, and data. If you have higher requirements for business security, use these permissions to finely control the validity period of permissions to publish different streams. For details, see [Co-host token authentication](#co-host-token-authentication). @@ -37,13 +37,13 @@ Before starting, ensure that you have: * Implemented the [SDK quickstart](../get-started/get-started-sdk) in your project. * The following information from [Agora Console](https://console.agora.io/v2): - * App ID: A unique string generated by Agora that identifies your project. - * App Certificate: A string generated by Agora Console to enable token authentication. To obtain the App Certificate for your project, enable primary certificate. + * [App ID](./video-calling/reference/glossary?#app-id): A unique string generated by Agora that identifies your project. + * [App Certificate](./video-calling/reference/glossary?#app-certificate): A string generated by Agora Console to enable token authentication. To obtain the App Certificate for your project, enable primary certificate. ## Implement basic authentication -This section shows you how to implement basic authentication by generating a token and joining a channel. To ensure the security of your business, recommends that you authenticate every client that joins a channel. +This section shows you how to implement basic authentication by generating a token and joining a [channel](./video-calling/reference/glossary?#channel). To ensure the security of your business, recommends that you authenticate every client that joins a channel. ### Generate a token provides an open source token generator code repository on [GitHub](https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey). The repository provides code in the following languages ​​to generate tokens on your own server, based on the `HMAC-SHA256` algorithm: @@ -289,13 +289,13 @@ if __name__ == "__main__": -The code samples presented on this page use an integer user ID to generate a token. To use a string user ID, refer to the [Token Generator code repository](https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey) to view the corresponding code sample in the desired language. +The code samples presented on this page use an integer [user ID](./video-calling/reference/glossary?#user-iduid) to generate a token. To use a string user ID, refer to the [Token Generator code repository](https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey) to view the corresponding code sample in the desired language. -The user ID and channel name used to join a channel must be consistent with the values used to generate the token. +The [user ID](./video-calling/reference/glossary?#user-iduid) and channel name used to join a channel must be consistent with the values used to generate the token. ## Advanced authentication features diff --git a/shared/video-sdk/authentication-workflow/project-implementation/web.mdx b/shared/video-sdk/authentication-workflow/project-implementation/web.mdx index 170717a3b..6c3be23a9 100644 --- a/shared/video-sdk/authentication-workflow/project-implementation/web.mdx +++ b/shared/video-sdk/authentication-workflow/project-implementation/web.mdx @@ -5,221 +5,227 @@ import CodeBlock from '@theme/CodeBlock'; This section shows you how to integrate token authentication in your . -1. Open the [SDK quickstart](../get-started/get-started-sdk) project you created earlier. - -1. In `index.html`, include an HTTP client library such as `axios` for sending token requests to the authentication server. - - ```html - - - - - Token Demo - - - - - - -

Token Demo

-
-
- - +1. ##### Open the [SDK quickstart](../get-started/get-started-sdk) project you created earlier. + +1. ##### Edit index.html + In `index.html`, include an HTTP client library such as `axios` for sending token requests to the authentication server. + + ```html + + + + + Token Demo + + + + + + +

Token Demo

+
+
+ + +
-
- - - ``` - -1. Add a `fetchToken` method to retrieve a token from your token server to join a channel. - - ```js - // Retrieve a token from your token server - function fetchToken(uid, channelName, tokenRole) { - - return new Promise(function (resolve) { - axios.post('http:///fetch_rtc_token', { - uid: uid, - channelName: channelName, - role: tokenRole - }, { - headers: { - 'Content-Type': 'application/json; charset=UTF-8' - } - }) - .then(function (response) { - const token = response.data.token; - resolve(token); + + + ``` + +1. ##### Edit AgoraLogic.js + Add necessary code to `AgoraLogic.js` in order to create fetch token requests to the token generation server. + + 1. ##### Complete sample code + For a complete implementation of token authentication in `AgoraLogic.js`, refer to the following code: + +
+ Sample code for basic authentication + + {`var rtc = { + // Set local audio track and video track + localAudioTrack: null, + localVideoTrack: null, + }; + + var options = { + // Fill in app ID + appId: "", + // Fill in a channel name + channel: "test", + // Set the user as host or audience + role: "host" + }; + + // Get a token from your token server + + function fetchToken(uid, channelName, tokenRole) { + + return new Promise(function (resolve) { + axios.post('http:///fetch_rtc_token', { + uid: uid, + channelName: channelName, + role: tokenRole + }, { + headers: { + 'Content-Type': 'application/json; charset=UTF-8' + } }) - .catch(function (error) { - console.log(error); - }); - }) - } - ``` - -1. Use the token to join a channel - - ```js - // Assign the obtained token to the token parameter in the join method - let token = await fetchToken(uid, options.channel, 1); - await client.join(options.appId, options.channel, token, uid); - ``` - -### Token expiration - -After you join a channel using a token, the SDK triggers the `token-privilege-will-expire` callback, 30 seconds before the token is set to expire. Upon receiving this callback, retrieve a fresh token from the server and call the `renewToken` method to pass the newly generated token to the SDK. - - ```javascript - client.on("token-privilege-will-expire", async function () { - // When you receive the token-privilege-will-expire callback, request a fresh token from the server - let token = await fetchToken(uid, options.channel, 1); - // Call renewToken to pass the new token to the SDK - await client.renewToken(token); - }); - ``` - -When the token expires, the SDK triggers the `token-privilege-did-expire` callback. In this case, retrieve a fresh token from the server and call the `join` method to rejoin the channel with the new token: - - ```javascript - // The token expired. - client.on("token-privilege-did-expire", async function () { - console.log("Fetching a new token") - // Request a new token from the server - let token = await fetchToken(uid, options.channel, 1); - console.log("Rejoining the channel with new token") - // Call join to rejoin the channel - await client.join(options.appId, options.channel, token, uid); - }); - ``` - -### Complete sample code - -For a complete implementation of token authentication, refer to the following code: - -
- Sample code for basic authentication - - {`var rtc = { - // Set local audio track and video track - localAudioTrack: null, - localVideoTrack: null, - }; - - var options = { - // Fill in app ID - appId: "", - // Fill in a channel name - channel: "test", - // Set the user as host or audience - role: "host" - }; - - // Get a token from your token server - - function fetchToken(uid, channelName, tokenRole) { - - return new Promise(function (resolve) { - axios.post('http:///fetch_rtc_token', { - uid: uid, - channelName: channelName, - role: tokenRole - }, { - headers: { - 'Content-Type': 'application/json; charset=UTF-8' - } + .then(function (response) { + const token = response.data.token; + resolve(token); + }) + .catch(function (error) { + console.log(error); + }); }) - .then(function (response) { - const token = response.data.token; - resolve(token); - }) - .catch(function (error) { - console.log(error); + } + + async function startBasicCall() { + + const client = AgoraRTC.createClient({ mode: "live", codec: "vp8" }); + client.setClientRole(options.role); + const uid = 123456; + + // Assign the obtained token to the token parameter of the join method, and join the channel + let token = await fetchToken(uid, options.channel, 1); + + await client.join(options.appId, options.channel, token, uid); + rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack(); + rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack(); + await client.publish([rtc.localAudioTrack, rtc.localVideoTrack]); + const localPlayerContainer = document.createElement("div"); + localPlayerContainer.id = uid; + localPlayerContainer.style.width = "640px"; + localPlayerContainer.style.height = "480px"; + document.body.append(localPlayerContainer); + + rtc.localVideoTrack.play(localPlayerContainer); + + console.log("publish success!"); + + client.on("user-published", async (user, mediaType) => { + await client.subscribe(user, mediaType); + console.log("subscribe success"); + + if (mediaType === "video") { + const remoteVideoTrack = user.videoTrack; + const remotePlayerContainer = document.createElement("div"); + remotePlayerContainer.textContent = "Remote user " + user.uid.toString(); + remotePlayerContainer.style.width = "640px"; + remotePlayerContainer.style.height = "480px"; + document.body.append(remotePlayerContainer); + remoteVideoTrack.play(remotePlayerContainer); + + } + + if (mediaType === "audio") { + const remoteAudioTrack = user.audioTrack; + remoteAudioTrack.play(); + } + + client.on("user-unpublished", user => { + const remotePlayerContainer = document.getElementById(user.uid); + remotePlayerContainer.remove(); }); - }) - } - - async function startBasicCall() { - - const client = AgoraRTC.createClient({ mode: "live", codec: "vp8" }); - client.setClientRole(options.role); - const uid = 123456; - - // Assign the obtained token to the token parameter of the join method, and join the channel - let token = await fetchToken(uid, options.channel, 1); - - await client.join(options.appId, options.channel, token, uid); - rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack(); - rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack(); - await client.publish([rtc.localAudioTrack, rtc.localVideoTrack]); - const localPlayerContainer = document.createElement("div"); - localPlayerContainer.id = uid; - localPlayerContainer.style.width = "640px"; - localPlayerContainer.style.height = "480px"; - document.body.append(localPlayerContainer); - - rtc.localVideoTrack.play(localPlayerContainer); - - console.log("publish success!"); - - client.on("user-published", async (user, mediaType) => { - await client.subscribe(user, mediaType); - console.log("subscribe success"); - - if (mediaType === "video") { - const remoteVideoTrack = user.videoTrack; - const remotePlayerContainer = document.createElement("div"); - remotePlayerContainer.textContent = "Remote user " + user.uid.toString(); - remotePlayerContainer.style.width = "640px"; - remotePlayerContainer.style.height = "480px"; - document.body.append(remotePlayerContainer); - remoteVideoTrack.play(remotePlayerContainer); - - } - - if (mediaType === "audio") { - const remoteAudioTrack = user.audioTrack; - remoteAudioTrack.play(); - } - - client.on("user-unpublished", user => { - const remotePlayerContainer = document.getElementById(user.uid); - remotePlayerContainer.remove(); + }); - }); + // When you receive the token-privilege-will-expire callback, request a new token from the server and call renewToken to pass the new token to the SDK + client.on("token-privilege-will-expire", async function () { + let token = await fetchToken(uid, options.channel, 1); + await client.renewToken(token); + }); - // When you receive the token-privilege-will-expire callback, request a new token from the server and call renewToken to pass the new token to the SDK - client.on("token-privilege-will-expire", async function () { - let token = await fetchToken(uid, options.channel, 1); - await client.renewToken(token); - }); + // When you receive the token-privilege-did-expire callback, request a new token from the server and call join to rejoin the channel. + client.on("token-privilege-did-expire", async function () { + console.log("Fetching a new token") + let token = await fetchToken(uid, options.channel, 1); + console.log("Rejoining the channel with a new token") + await client.join(options.appId, options.channel, token, uid); + }); - // When you receive the token-privilege-did-expire callback, request a new token from the server and call join to rejoin the channel. - client.on("token-privilege-did-expire", async function () { - console.log("Fetching a new token") + } + + startBasicCall()`} + +
+ + Replace `` with your app ID, which must be consistent with the app ID you specified in the server configuration. Update `` with the host URL and port of the local Golang server you have deployed. For example `99.9.9.99:8082`. + + Build and run the project on the local device, the performs the following operations: + + * Obtains a token from your token server. + * Joins the channel. + * Automatically renews the token when it is about to expire. + 1. ##### Understand the code + 1. ###### Add a `fetchToken` method to retrieve a token from your token server to join a channel. + + ```js + // Retrieve a token from your token server + function fetchToken(uid, channelName, tokenRole) { + + return new Promise(function (resolve) { + axios.post('http:///fetch_rtc_token', { + uid: uid, + channelName: channelName, + role: tokenRole + }, { + headers: { + 'Content-Type': 'application/json; charset=UTF-8' + } + }) + .then(function (response) { + const token = response.data.token; + resolve(token); + }) + .catch(function (error) { + console.log(error); + }); + }) + } + ``` + + 1. ###### Use the token to join a channel + + ```js + // Assign the obtained token to the token parameter in the join method let token = await fetchToken(uid, options.channel, 1); - console.log("Rejoining the channel with a new token") await client.join(options.appId, options.channel, token, uid); - }); + ``` - } + 1. ###### Token expiration - startBasicCall()`} - -
+ After you join a channel using a token, the SDK triggers the `token-privilege-will-expire` callback, 30 seconds before the token is set to expire. Upon receiving this callback, retrieve a fresh token from the server and call the `renewToken` method to pass the newly generated token to the SDK. + + ```javascript + client.on("token-privilege-will-expire", async function () { + // When you receive the token-privilege-will-expire callback, request a fresh token from the server + let token = await fetchToken(uid, options.channel, 1); + // Call renewToken to pass the new token to the SDK + await client.renewToken(token); + }); + ``` + + When the token expires, the SDK triggers the `token-privilege-did-expire` callback. In this case, retrieve a fresh token from the server and call the `join` method to rejoin the channel with the new token: + + ```javascript + // The token expired. + client.on("token-privilege-did-expire", async function () { + console.log("Fetching a new token") + // Request a new token from the server + let token = await fetchToken(uid, options.channel, 1); + console.log("Rejoining the channel with new token") + // Call join to rejoin the channel + await client.join(options.appId, options.channel, token, uid); + }); + ``` - Replace `` with your app ID, which must be consistent with the app ID you specified in the server configuration. Update `` with the host URL and port of the local Golang server you have deployed. For example `99.9.9.99:8082`. -Build and run the project on the local device, the performs the following operations: -* Obtains a token from your token server. -* Joins the channel. -* Automatically renews the token when it is about to expire. \ No newline at end of file From f3a4b71fb41ce8ad833a9438a0cff72de7801dd5 Mon Sep 17 00:00:00 2001 From: Salman Sami Date: Tue, 30 Jul 2024 10:55:36 +0500 Subject: [PATCH 3/4] Terminology links updated, link to deployment of token generation server guide added. --- shared/video-sdk/authentication-workflow/index.mdx | 9 +++++---- .../project-implementation/web.mdx | 6 +++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/shared/video-sdk/authentication-workflow/index.mdx b/shared/video-sdk/authentication-workflow/index.mdx index 5fc711990..c706638f2 100644 --- a/shared/video-sdk/authentication-workflow/index.mdx +++ b/shared/video-sdk/authentication-workflow/index.mdx @@ -6,13 +6,13 @@ import ProjectImplement from '@docs/shared/video-sdk/authentication-workflow/pro import ProjectTest from '@docs/shared/video-sdk/authentication-workflow/project-test/index.mdx'; import Reference from '@docs/shared/video-sdk/authentication-workflow/reference/index.mdx'; -Authentication is the process of validating the identity of each user before they access a system. uses digital tokens to authenticate users and their privileges. A [token](./video-calling/reference/glossary?#token) is a string used to verify user privileges when joining a channel. When a user connects to and passes in the token, the server verifies the user's identity and permissions based on the information in the token. +Authentication is the process of validating the identity of each user before they access a system. uses digital [tokens](./video-calling/reference/glossary?#token) to authenticate users and their privileges. A token is a string used to verify user privileges when joining a [channel](./video-calling/reference/glossary?#channel). When a user connects to and passes in the token, the server verifies the user's identity and permissions based on the information in the token. ## Understand the tech enables you to implement permissions in two distinct ways according to your scenario: -- **Uniform permissions**: Uniformly set permissions for joining [channels](./video-calling/reference/glossary?#channel) and concurrent streams. This is applicable to most scenarios. For details, see [Implement basic authentication](#implement-basic-authentication). +- **Uniform permissions**: Uniformly set permissions for joining channels and concurrent streams. This is applicable to most scenarios. For details, see [Implement basic authentication](#implement-basic-authentication). - **Finely control permissions for publishing different streams**: Manage permissions to publish different types of streams, such as audio, video, and data. If you have higher requirements for business security, use these permissions to finely control the validity period of permissions to publish different streams. For details, see [Co-host token authentication](#co-host-token-authentication). @@ -43,7 +43,7 @@ Before starting, ensure that you have: ## Implement basic authentication -This section shows you how to implement basic authentication by generating a token and joining a [channel](./video-calling/reference/glossary?#channel). To ensure the security of your business, recommends that you authenticate every client that joins a channel. +This section shows you how to implement basic authentication by generating a token and joining a channel. To ensure the security of your business, recommends that you authenticate every client that joins a channel. ### Generate a token provides an open source token generator code repository on [GitHub](https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey). The repository provides code in the following languages ​​to generate tokens on your own server, based on the `HMAC-SHA256` algorithm: @@ -287,6 +287,7 @@ if __name__ == "__main__": +Refer to this [quick guide](#manually-deploy-a-token-generator-locally) on how to deploy a token generator locally. The code samples presented on this page use an integer [user ID](./video-calling/reference/glossary?#user-iduid) to generate a token. To use a string user ID, refer to the [Token Generator code repository](https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey) to view the corresponding code sample in the desired language. @@ -295,7 +296,7 @@ The code samples presented on this page use an integer [user ID](./video-calling -The [user ID](./video-calling/reference/glossary?#user-iduid) and channel name used to join a channel must be consistent with the values used to generate the token. +The user ID and channel name used to join a channel must be consistent with the values used to generate the token. ## Advanced authentication features diff --git a/shared/video-sdk/authentication-workflow/project-implementation/web.mdx b/shared/video-sdk/authentication-workflow/project-implementation/web.mdx index 6c3be23a9..21ede65ba 100644 --- a/shared/video-sdk/authentication-workflow/project-implementation/web.mdx +++ b/shared/video-sdk/authentication-workflow/project-implementation/web.mdx @@ -3,7 +3,7 @@ import CodeBlock from '@theme/CodeBlock'; ### Use a token -This section shows you how to integrate token authentication in your . +This section shows you how to integrate [token](./video-calling/reference/glossary?#token) authentication in your . 1. ##### Open the [SDK quickstart](../get-started/get-started-sdk) project you created earlier. @@ -155,12 +155,12 @@ This section shows you how to integrate token authentication in your performs the following operations: * Obtains a token from your token server. - * Joins the channel. + * Joins the [channel](./video-calling/reference/glossary?#channel). * Automatically renews the token when it is about to expire. 1. ##### Understand the code 1. ###### Add a `fetchToken` method to retrieve a token from your token server to join a channel. From 6337b7d65c3c5d3f9865edf65620f8c30c0e5493 Mon Sep 17 00:00:00 2001 From: Salman Sami Date: Tue, 30 Jul 2024 21:39:37 +0500 Subject: [PATCH 4/4] Edited ordered list headings --- .../project-implementation/web.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/shared/video-sdk/authentication-workflow/project-implementation/web.mdx b/shared/video-sdk/authentication-workflow/project-implementation/web.mdx index 21ede65ba..e8cead8ce 100644 --- a/shared/video-sdk/authentication-workflow/project-implementation/web.mdx +++ b/shared/video-sdk/authentication-workflow/project-implementation/web.mdx @@ -5,9 +5,9 @@ import CodeBlock from '@theme/CodeBlock'; This section shows you how to integrate [token](./video-calling/reference/glossary?#token) authentication in your . -1. ##### Open the [SDK quickstart](../get-started/get-started-sdk) project you created earlier. +1. **Open the [SDK quickstart](../get-started/get-started-sdk) project** you created earlier. -1. ##### Edit index.html +1. **Edit index.html** In `index.html`, include an HTTP client library such as `axios` for sending token requests to the authentication server. ```html @@ -37,10 +37,10 @@ This section shows you how to integrate [token](./video-calling/reference/glossa ``` -1. ##### Edit AgoraLogic.js +1. **Edit AgoraLogic.js** Add necessary code to `AgoraLogic.js` in order to create fetch token requests to the token generation server. - 1. ##### Complete sample code + 1. **Complete sample code** For a complete implementation of token authentication in `AgoraLogic.js`, refer to the following code:
@@ -162,8 +162,8 @@ This section shows you how to integrate [token](./video-calling/reference/glossa * Obtains a token from your token server. * Joins the [channel](./video-calling/reference/glossary?#channel). * Automatically renews the token when it is about to expire. - 1. ##### Understand the code - 1. ###### Add a `fetchToken` method to retrieve a token from your token server to join a channel. + 1. **Understand the code** + 1. **Add a `fetchToken` method** to retrieve a token from your token server to join a channel. ```js // Retrieve a token from your token server @@ -190,7 +190,7 @@ This section shows you how to integrate [token](./video-calling/reference/glossa } ``` - 1. ###### Use the token to join a channel + 1. **Use the token to join a channel** ```js // Assign the obtained token to the token parameter in the join method @@ -198,7 +198,7 @@ This section shows you how to integrate [token](./video-calling/reference/glossa await client.join(options.appId, options.channel, token, uid); ``` - 1. ###### Token expiration + 1. **Token expiration** After you join a channel using a token, the SDK triggers the `token-privilege-will-expire` callback, 30 seconds before the token is set to expire. Upon receiving this callback, retrieve a fresh token from the server and call the `renewToken` method to pass the newly generated token to the SDK.