Merge pull request #181 from ncsa/release/0.4.2

Release/0.4.2
ncsa · Jul 17, 2024 · 49af6e0 · 49af6e0
2 parents 4792150 + ea55f1d
commit 49af6e0
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.4.1] - 2026-06-27
+## [0.4.2] - 2024-07-17
+### Added
+- Provide google api key to authorize YouTube Data API [#179](https://github.com/ncsa/standalone-smm-smile/issues/179)
+
+## [0.4.1] - 2024-06-27
 ### Added
 - Randomly collect youtube video [#169](https://github.com/ncsa/standalone-smm-smile/issues/169)
 - Random collect youtube documentation

diff --git a/www/package-lock.json b/www/package-lock.json
diff --git a/www/package.json b/www/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smile_server",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "",
   "main": "app.js",
   "dependencies": {

diff --git a/www/public/bootstrap/js/customized/query_auth.js b/www/public/bootstrap/js/customized/query_auth.js
@@ -110,3 +110,33 @@ $("#twitter-pin").on('keyup', function (e) {
 $(".twitter-auth").find('a').on('click', function () {
     $("#twitter-callback").modal('show');
 });
+
+
+/****************************** Youtube ******************************/
+$("#submitYoutubeApiKey").on('click', function () {
+    console.log('clicked');
+    $.ajax({
+        type: 'post',
+        url: 'login/google/apikey',
+        data: {
+            "apiKey": $("#youtubeApiKey").val(),
+        },
+        success: function (data) {
+            if ('ERROR' in data) {
+                $("#error").val(JSON.stringify(data));
+                $("#warning").modal('show');
+            }
+            else {
+                location.reload(true);
+            }
+        },
+        error: function (jqXHR, exception) {
+            $("#error").val(jqXHR.responseText);
+            $("#warning").modal('show');
+        }
+    });
+});
+
+$("#youtubeApiKeyLink").on('click', function () {
+    $("#youtube-apikey-modal").modal('show');
+});
diff --git a/www/routes/auth/google_auth.js b/www/routes/auth/google_auth.js
@@ -32,6 +32,14 @@ router.get('/login/google/callback', checkIfLoggedIn, (req, res) => {
     });
 });
 
-
+router.post('/login/google/apikey', checkIfLoggedIn, function (req, res, next) {
+    if (req.body.apiKey) {
+        setCredential(req, 'google_api_key', req.body.apiKey);
+        res.status(200).send({ message: 'API Key set' });
+    }
+    else {
+        res.status(400).send({ ERROR: 'API Key not provided' });
+    }
+});
 
 module.exports = router;
diff --git a/www/routes/search/query.js b/www/routes/search/query.js
@@ -45,6 +45,7 @@ router.post('/query-dryrun', checkIfLoggedIn, function (req, res) {
                 'Content-Type': 'application/json',
                 'redditaccesstoken': obj['rd_access_token'],
                 'googleaccesstoken': obj['google_access_token'],
+                'googleapikey': obj['google_api_key'],
                 'twtaccesstokenkey': obj['twt_access_token_key'],
                 'twtaccesstokensecret': obj['twt_access_token_secret'],
                 'twtbearertoken': obj['twt_v2_access_token']
@@ -84,6 +85,7 @@ router.post('/query', checkIfLoggedIn, function (req, res) {
                         'Content-Type': 'application/json',
                         'redditaccesstoken': obj['rd_access_token'],
                         'googleaccesstoken': obj['google_access_token'],
+                        'googleapikey': obj['google_api_key'],
                         'twtaccesstokenkey': obj['twt_access_token_key'],
                         'twtaccesstokensecret': obj['twt_access_token_secret'],
                         'twtbearertoken': obj['twt_v2_access_token']
@@ -418,6 +420,7 @@ function removeInvalidToken(req, platform) {
         removeCredential(req, 'rd_access_token');
     } else if (platform === 'youtube') {
         removeCredential(req, 'google_access_token');
+        removeCredential(req, 'google_api_key');
     }
 }
 
@@ -455,7 +458,7 @@ function checkAuthorized(req) {
         if (obj && 'twt_access_token_key' in obj && 'twt_access_token_secret' in obj) response['twitter'] = true;
         if (obj && 'twt_v2_access_token' in obj) response['twitterV2'] = true;
         if (obj && 'rd_access_token' in obj) response['reddit'] = true;
-        if (obj && 'google_access_token' in obj) response['youtube'] = true;
+        if (obj && ('google_access_token' in obj || 'google_api_key' in obj)) response['youtube'] = true;
         resolve(response);
     });
 }

diff --git a/www/views/components/footer.pug b/www/views/components/footer.pug
@@ -1,3 +1,3 @@
 footer(class="footer-bs")
 	div(class="row")
-		p © #{new Date().getFullYear()} National Center for Supercomputing Applications, University of Illinois at Urbana-Champaign, All rights reserved | version 0.4.1
+		p © #{new Date().getFullYear()} National Center for Supercomputing Applications, University of Illinois at Urbana-Champaign, All rights reserved | version 0.4.2
diff --git a/www/views/search/auth.pug b/www/views/search/auth.pug
@@ -35,8 +35,51 @@ div(id="auth-panel")
                 img(src='bootstrap/img/logo/youtube-sm-logo.png', width="30px",height="30px")
                 | Authorize with your Youtube account
                 img(src="bootstrap/img/logo/checkbox.png", class="export-success", width="30px", style="display:none;")
+            div(style="display: flex; justify-content: end; align-items: center; margin-top: 10px; color:#ffffff;font-size: 16px;")
+                span If you have a YouTube API key, please&nbsp;
+                a(href="#", id="youtubeApiKeyLink", style="text-decoration: underline; color:#ffffff") click here
         else
             a(class="btn btn-primary btn-block auth-button", href="login/google" disabled)
                 img(src='bootstrap/img/logo/youtube-sm-logo.png', width="30px",height="30px")
                 | Youtube Temporarily Not Accessible
-    button(id="auth-next", style="", class="pull-right") next
+    button(id="auth-next", style="margin-top: 2em;", class="pull-right") next
+
+// youtube api key modal
+div(id="youtube-apikey-modal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false")
+    div(class="modal-dialog")
+        div(class="modal-content")
+            div(class="modal-header")
+                button(class="close", data-dismiss="modal") &times;
+                h2(class="modal-title", id="modal-title", style="text-align:left;vertical-align:middle;") Provide your Google API Key
+            div(class="modal-body form")
+                div(class="modal-message")
+                    div(class="form-group")
+                        p Please provide your API key to access the service. This is designed to help you use the
+                            |  maximum quota of the service and to ensure the service is available for you. The API key
+                            |  will be stored in&nbsp;
+                            a(href="https://redis.io/" target="_blank") Redis
+                            |  , which is an in-memory cache store, under the user's account
+                            |  for only 30 minutes to ensure the security of your credentials.
+                        p To get an API key:
+                        ol
+                            li Open the&nbsp;
+                                a(href="https://console.cloud.google.com/apis/credentials" target="_blank") Credentials page
+                                |  in the API Console.
+                            li Click&nbsp;
+                                strong Create credentials
+                                |  -->&nbsp;
+                                strong API key
+                            li Apply restrictions as needed before using the key in production.
+                        a(href="https://developers.google.com/youtube/registering_an_application" target="_blank") For more information...
+                    div(class="form-group")
+                        label(class="control-label col-md-2 col-md-2 col-xs-12") API key
+                        div(class="col-md-10 col-md-10 col-xs-12")
+                            input(class="form-control" id="youtubeApiKey", placeholder="Your API Key")
+            div(class="modal-footer")
+                button(class="btn btn-yes", id="submitYoutubeApiKey") Submit
+
+script.
+    $("#youtube-apikey-modal").on('hidden.bs.modal', function () {
+        $('#apiKey').tagsinput('removeAll');
+    });
+