Как подключить регистрацию + авторизацию через ВК? (VK ID)

Question

у меня есть сайт на Flask, где реализована регистрация пользователей по имени + почте + паролю. Вход происходит по почте и паролю. Используется from flask_login import LoginManager, login_user, login_required, logout_user, current_user.

Сейчас нужно сделать быстрый вход через ВК. Читаю документацию, но не помогает. Например, сказано:

воспользуйтесь сервисом https://unpkg.com/.

А как воспользоваться? Почему нельзя просто вставить в это:

 <script src="https://unpkg.com/@vkid/sdk@<2.1.0/dist-sdk/umd/index.js"></script>

?

Потом, как сделать кнопку One Tap?

Сейчас имеется такой код:

<!-- login.html -->

{% extends 'base.html' %}

{% block content %}
{{ super() }}
{% for cat, msg in get_flashed_messages(True) %}
<div class="flash {{cat}}">{{msg}}</div>
{% endfor %}

<div class="login">
  <div class="form">
    <form action="" method="post">
      <div class="form-group">
        <label for="email">Почта:</label>
        <input type="email" id="email" name="email" placeholder="Почта" required>
      </div>
      <div class="form-group">
        <label for="psw">Пароль:</label>
        <input type="password" id="psw" name="psw" placeholder="Пароль" required>
      </div>
      <div class="form-group">
        <input type="checkbox" id="remainme" name="remainme">
        <label for="remainme">Запомнить меня</label>
      </div>
      <button type="submit">Войти</button>
      <div id="VkIdSdkOneTap"></div>  <-- ВОТ ОНА --------------------------------- -->
    </form>
    <hr>
    <p>Нет аккаунта? <a href="{{url_for('register')}}">Регистрация</a></p>
  </div>
</div>

{% endblock %}

<!-- base.html -->

 <!DOCTYPE html>
<html lang="ru">

<head>
    <link type="text/css" href="{{url_for('static', filename='css/style_reg.css')}}" rel="stylesheet" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/@vkid/sdk@<2.1.0/dist-sdk/umd/index.js"></script>
    <script src="vk_auth.js"></script>
    {% block title %}
    {% if title %}
    <title>СППР - {{ title }}</title>
    {% else %}
    <title>СППР</title>
    {% endif %}
    {% endblock %}
</head>

<body>
    {% block content %}
    {% if title %}
    <h1>{{ title }}</h1>
    {% else %}
    <h1>СППР</h1>
    {% endif %}
    {% endblock %}

</body>

</html>

// vk_auth.js 

import * as VKID from '@vkid/sdk';


VKID.Config.init({
  app: 52091976, 
  redirectUrl: 'decisionss.ru', 
  state: 'dj29fnsadjsd82', 
  codeVerifier: 'FGH767Gd65', 
  scope: 'email phone' 
});


const oneTap = new VKID.OneTap();


oneTap.render({
  container: document.getElementById('VkIdSdkOneTap'),
  scheme: VKID.Scheme.LIGHT,
  lang: VKID.Languages.RUS
}).on(VKID.WidgetEvents.ERROR, handleError);

В итоге сейчас кнопки вообще нет, хотя в js она будто бы отрисована (код из документации).

И даже когда это заработает, что что дальше? Появится файл с токеном и файлом формата json с нужными мне данными? Или нет? И как мне их записать в мою основную БД? Или же нужно изворачиваться и создавать другую для такой регистрации (не хотелось бы...)?

Помогите, пожалуйста, буду очень благодарна!

БЛОГ НА HUSL

Как подключить регистрацию + авторизацию через ВК? (VK ID)

Ответы (0 шт):