yandex auth, bug fixes

2024-01-29 21:31:16 +03:00
parent 0b1d5e8b79
commit 24d47644d4
5 changed files with 188 additions and 10 deletions
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -12,7 +12,7 @@
  <script>
    const API_SERVER = "{{API_SERVER}}";
  </script>
-    <!-- <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
+    <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
    <meta name="google-signin-client_id" content="638774553513-tsobvdtj1g0p43obm3e9epekbjksdmoj.apps.googleusercontent.com">
    <script src="https://accounts.google.com/gsi/client" async></script>    
    <script>
@@ -37,7 +37,7 @@
        .then(({handler}) => handler())
        .then(data => console.log('Сообщение с токеном', data))
        .catch(error => console.log('Обработка ошибки', error))
-      </script> -->
+      </script>
 </head>

 <body>
@@ -114,8 +114,8 @@
                    data-size="large"
                    data-width="328"
                    data-logo_alignment="left">
-                </div>
-                <div class="form-button" id="yandexButtonContainerId"></div> -->
+                </div> -->
+                <div class="form-button" id="yandexButtonContainerId"></div>
                
                <a href="mailto:contact@krbl.ru" id="forgotLink">Забыли пароль? <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.2489 6.23474L8.24353 0.847534C8.24353 0.428589 7.96423 0.143921 7.53992 0.143921H2.14734C1.74988 0.143921 1.45984 0.444702 1.45984 0.804565C1.45984 1.15906 1.76599 1.4491 2.1366 1.4491H4.0863L6.16492 1.3739L5.20349 2.22791L0.245972 7.1908C0.106323 7.33044 0.0257568 7.50769 0.0257568 7.67957C0.0257568 8.02869 0.348022 8.36169 0.707886 8.36169C0.885132 8.36169 1.05164 8.2865 1.19666 8.14148L6.15955 3.18396L7.01892 2.22253L6.93298 4.22058V6.24548C6.93298 6.62146 7.22302 6.92761 7.58289 6.92761C7.94275 6.92761 8.2489 6.62683 8.2489 6.23474Z" fill="#4B80CB"/>
--- a/static/templates/user/settings.html
+++ b/static/templates/user/settings.html
@@ -16,6 +16,30 @@
    import { minidenticonSvg } from 'https://cdn.jsdelivr.net/npm/minidenticons@4.2.0/minidenticons.min.js'
  </script>
  <script src="../scripts/projects.js"></script>
+  <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
+  <script>
+    window.YaAuthSuggest.init(
+        {
+            client_id: '8976c8bc90784da89467f3abd34f0192',
+            response_type: 'token',
+            redirect_uri: '{{SITE_DOMAIN}}/yandexconnect'
+        }
+        ,
+      '{{SITE_DOMAIN}}',
+      {
+        view: "button",
+        parentId: "yandexButtonContainerId",
+        buttonSize: 's',
+        buttonView: 'main',
+        buttonTheme: 'light',
+        buttonBorderRadius: "4",
+        buttonIcon: 'ya',
+      }
+    )
+    .then(({handler}) => handler())
+    .then(data => console.log('Сообщение с токеном', data))
+    .catch(error => console.log('Обработка ошибки', error))
+  </script>
 </head>

 <body>
@@ -188,6 +212,21 @@
              <button id="password-button" class="inactive" onclick="updatePassword();" type="button">Сохранить</button>
            </div>
          </div>
+
+          <div class="setting-section">
+            <div class="setting-top">
+              <h1>Авторизация через Яндекс</h1>
+              {{#if User.yandexid}}
+              <h2>Аккаунт Яндекса успешно привязан</h2>
+              {{else}}
+              <h2>Если хотите входить в аккаунт через Яндекс, вам необходимо привязать его ниже</h2>
+              {{/if}}
+            </div>
+            <div class="setting-bottom">
+              <h2>Нажмите на кнопочку справа.</h2>
+              <div style="width: 200px; border-radius: 6px;" id="yandexButtonContainerId"></div>
+            </div>
+          </div>
            
        </div>

--- a/static/templates/yandexauth.html
+++ b/static/templates/yandexauth.html
@@ -5,10 +5,16 @@
   <meta charSet="utf-8" />
   <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=no, viewport-fit=cover'>
   <meta http-equiv='X-UA-Compatible' content='ie=edge'>
+   <link rel="stylesheet" href="../styles/main.css">
   <style>
      html,
      body {
-         background: #eee;
+         height: 100%;
+         width: 100%;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         flex-direction: column;
      }
   </style>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-token-with-polyfills-latest.js"></script>
@@ -21,7 +27,57 @@
            "kek": true,
         });
      };
+
+      function getCookie(name) {
+         var cookies = document.cookie.split(";");
+         for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            if (cookie.startsWith(name + "=")) {
+               return cookie.substring(name.length + 1);
+            }
+         }
+         return null;
+      }
+
+      document.addEventListener('DOMContentLoaded', async function () {
+         const fragment = window.location.hash.substring(1);
+
+         if (fragment.includes('access_token')) {
+            const accessToken = fragment.split('&')[0].split('=')[1];
+            console.log(accessToken);
+
+            const response = await fetch('{{API_SERVER}}/yandexauth?token=' + accessToken, {
+               method: "POST",
+               headers: {
+                  Authorization: getCookie("token"),
+                  "Content-Type": "application/json"
+               }
+            });
+
+            if (response.status === 200) {
+                const data = await response.json();
+                const token = data.token;
+
+                document.cookie = "token=" + token;
+
+                window.location.href = "/projects";
+            } else if (response.status === 401) {
+                alert("Сначала нужно привязать аккаунт Яндекса в настройках");
+                location.href= '/';
+            } else if (response.status === 403) {
+                alert("Неверный токен");
+                location.href= '/';
+            } else {
+                alert("Ошибка авторизации");
+                location.href= '/';
+            }
+         }
+      });
   </script>
+
+   <video style="border-radius: 13px; width: 300px;" src="../img/krbl-square.mp4" autoplay loop muted playsinline preload="auto"></video>
+   <h2>Пожалуйста, подождите...</h2>
+
 </body>

 </html>
--- a/static/templates/yandexconnect.html
+++ b/static/templates/yandexconnect.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="ru">
+
+<head>
+   <meta charSet="utf-8" />
+   <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=no, viewport-fit=cover'>
+   <meta http-equiv='X-UA-Compatible' content='ie=edge'>
+   <link rel="stylesheet" href="../styles/main.css">
+   <style>
+      html,
+      body {
+         height: 100%;
+         width: 100%;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         flex-direction: column;
+      }
+   </style>
+   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-token-with-polyfills-latest.js"></script>
+</head>
+
+<body>
+   <script>
+      window.onload = function() {
+         window.YaSendSuggestToken("{{SITE_DOMAIN}}/user/settings", {
+            "connect": true,
+         });
+      };
+
+      function getCookie(name) {
+         var cookies = document.cookie.split(";");
+         for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            if (cookie.startsWith(name + "=")) {
+               return cookie.substring(name.length + 1);
+            }
+         }
+         return null;
+      }
+
+      document.addEventListener('DOMContentLoaded', async function () {
+         const fragment = window.location.hash.substring(1);
+
+         if (fragment.includes('access_token')) {
+            const accessToken = fragment.split('&')[0].split('=')[1];
+            console.log(accessToken);
+
+            const response = await fetch('{{API_SERVER}}/yandexconnect?token=' + accessToken, {
+               method: "POST",
+               headers: {
+                  Authorization: getCookie("token"),
+                  "Content-Type": "application/json"
+               }
+            });
+
+            if (response.status === 200) {
+               location.href= '/user/settings';
+            } else {
+               alert("Ошибка при подключении аккаунта Яндекс.");
+               location.href= '/user/settings';
+            }
+         }
+      });
+   </script>
+
+   <video style="border-radius: 13px; width: 300px;" src="../img/krbl-square.mp4" autoplay loop muted playsinline preload="auto"></video>
+   <h2>Пожалуйста, подождите...</h2>
+
+</body>
+
+</html>