Merge pull request #136 from disqus/sso-embed

✅📝 Add Feature to DiscussionEmbed for Compatibility with SSO
disqus · Oct 7, 2022 · bdc2410 · bdc2410
2 parents 4bc39af + fba16ea
commit bdc2410
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,35 @@ import { DiscussionEmbed } from 'disqus-react';
 
 This component is limited to one instance in the DOM at a time and will handle updates to both the `config` and `shortname` props and reload appropriately with the new discussion thread.  
 
+### DiscussionEmbed with SSO
+
+This is an example for setting up the DiscussionEmbed component with SSO.  This example config is also used on the Disqus SSO example found here: https://disqus-sso-demo.glitch.me/.
+
+```js
+import { DiscussionEmbed } from 'disqus-react';
+
+<DiscussionEmbed
+    shortname='example'
+    config={
+        {
+            url: this.props.article.url,
+            identifier: this.props.article.id,
+            title: this.props.article.title,
+            language: 'zh_TW' //e.g. for Traditional Chinese (Taiwan),
+            sso: {
+                name: 'SampleNews',
+                button: 'http://example.com/images/samplenews.gif',
+                icon: 'http://example.com/favicon.png',
+                url: 'http://example.com/login/',
+                logout: 'http://example.com/logout/',
+                profile_url: 'http://example.com/profileUrlTemplate/{username}',
+                width: '800',
+                height: '400',
+            }
+        }
+    }
+/>
+```
 
 ### CommentCount  
 

diff --git a/src/DiscussionEmbed.jsx b/src/DiscussionEmbed.jsx
@@ -80,6 +80,8 @@ export class DiscussionEmbed extends React.Component {
             this.page.category_id = config.categoryID;
             this.page.remote_auth_s3 = config.remoteAuthS3;
             this.page.api_key = config.apiKey;
+            if (config.sso)
+                this.sso = config.sso;
             if (config.language)
                 this.language = config.language;
 
@@ -120,5 +122,15 @@ DiscussionEmbed.propTypes = {
         beforeComment: PropTypes.func,
         onNewComment: PropTypes.func,
         onPaginate: PropTypes.func,
+        sso: PropTypes.shape({
+            name: PropTypes.string,
+            button: PropTypes.string,
+            icon: PropTypes.string,
+            url: PropTypes.string,
+            logout: PropTypes.string,
+            profile_url: PropTypes.string,
+            width: PropTypes.string,
+            height: PropTypes.string,
+        }),
     }).isRequired,
 };
diff --git a/tests/DiscussionEmbed.js b/tests/DiscussionEmbed.js
@@ -17,6 +17,18 @@ const DISQUS_CONFIG = {
     identifier: 'tester',
 };
 
+// This is the SSO config that is used on the Disqus SSO example found here: https://disqus-sso-demo.glitch.me/
+const SSO_CONFIG = {
+    name: 'SampleNews',
+    button: 'http://example.com/images/samplenews.gif',
+    icon: 'http://example.com/favicon.png',
+    url: 'http://example.com/login/',
+    logout: 'http://example.com/logout/',
+    profile_url: 'http://example.com/profileUrlTemplate/{username}',
+    width: '800',
+    height: '400',
+};
+
 const Component = (props) =>
     <DiscussionEmbed
         data-testid='disqus-thread'
@@ -39,6 +51,13 @@ test('Creates window.disqus_config', () => {
     expect(global.window.disqus_config).toBeTruthy();
 });
 
+test('Creates window.disqus_config when passed an SSO config', () => {
+    const TEST_CONFIG = DISQUS_CONFIG;
+    TEST_CONFIG.sso = SSO_CONFIG;
+    render(<Component config={TEST_CONFIG} />);
+    expect(global.window.disqus_config).toBeTruthy();
+});
+
 test('Inserts the script correctly', () => {
     const { baseElement } = render(<Component config={DISQUS_CONFIG} />);
     const scriptQuery = baseElement.querySelectorAll(`#${EMBED_SCRIPT_ID}`);
@@ -48,13 +67,23 @@ test('Inserts the script correctly', () => {
     expect(scriptQuery[0].src).toEqual('https://testing.disqus.com/embed.js');
 });
 
+test('Inserts the script correctly when passed an SSO config', () => {
+    const TEST_CONFIG = DISQUS_CONFIG;
+    TEST_CONFIG.sso = SSO_CONFIG;
+    const { baseElement } = render(<Component config={TEST_CONFIG}/>);
+    const scriptQuery = baseElement.querySelectorAll(`#${EMBED_SCRIPT_ID}`);
+    expect(scriptQuery.length).toEqual(1);
+    expect(scriptQuery[0].src).toEqual('https://testing.disqus.com/embed.js');
+});
+
 test('Cleans script and window attributes on unmount', () => {
     const { baseElement, unmount } = render(<Component config={DISQUS_CONFIG} />);
     unmount();
     const scriptQuery = baseElement.querySelectorAll(`#${EMBED_SCRIPT_ID}`);
     // Make sure the embed script is removed
     expect(scriptQuery.length).toEqual(0);
     // Make sure the resources created by the embed script are removed
+    // eslint-disable-next-line max-len
     const resourcesQuery = baseElement.querySelectorAll('link[href*="disquscdn.com/next/embed"], link[href*="disqus.com/next/config.js"], script[src*="disquscdn.com/next/embed"]');
     expect(resourcesQuery.length).toEqual(0);
     // Make sure window.DISQUS is removed