AFINA agency
no code

Как интегрировать Cotter Magic Link в ваш веб-сайт Webflow менее чем за 7 минут!

В этом руководстве мы создадим веб-сайт с входом без пароля с помощью волшебной ссылки.
перевод medium.com/cotterapp/how-to-integrate-cotter-magic-link-to-webflow-in-less-15-minutes-7e21b11cfacb
В этом руководстве мы расскажем, как аутентифицировать пользователей с помощью волшебных ссылок в Webflow.

Часть 1: Установка

Перейдите на https://dev.cotter.app, чтобы создать учетную запись. После того, как вы создали учетную запись, обязательно создайте новый проект и получите идентификатор ключа API. Мы будем использовать ваш идентификатор ключа API позже во второй части.

Часть 2: Настройка Webflow

Для этого урока мы создали 2 страницы: страницу входа и защищенную страницу. На странице входа будет отображаться встроенная форма входа в систему Cotter, чтобы пользователи могли ввести свой адрес электронной почты, а на защищенной странице будет отображаться защищенный контент, который может просматривать только зарегистрированный пользователь.

Настройка страницы входа (где появится форма входа)

На странице входа нам нужно включить элемент раздела для загрузки формы входа в Cotter; кроме того, нам нужно установить этот идентификатор раздела «cotter-form-container». Это позволяет JS SDK Cotter загружать форму входа в элемент раздела, который мы только что добавили.

После завершения настройки страницы мы можем начать с добавления пользовательского кода на страницу входа. Скопируйте и вставьте приведенный ниже код на вкладку пользовательского кода в настройках страницы входа.
Page Settings
Scroll down to "Custom Code" section
    • Получить Cotter JS SDK
    Добавьте приведенный ниже код в заголовок страницы входа.
    <!--Get Cotter JS SDK-->
    <script
        src="https://unpkg.com/cotter@0.3.16/dist/cotter.min.js"
        type="text/javascript"
    ></script>
    • Инициализировать Cotter
    Добавьте приведенный ниже код в тело страницы входа.
    <!-- 2. Initialize Cotter -->
    <script>
      var cotter = new Cotter("<YOUR_API_KEY_ID>"); // ???? Specify your API KEY ID here
      cotter
      	// Choose what method of login do you want
        // Sign In with Magic Link
        .signInWithLink()
        // Send Magic Link via email
        .showEmailForm()
        
        .then(payload => {
    	  // save OAuth token
          localStorage.setItem("user_session", JSON.stringify(payload));
          
          // redirect to the protected page
          window.location.href = "/protected";
        })
        .catch(err => {
          // handle error
        });
    </script>
    Убедитесь, что вы вставили свой идентификатор ключа API в блок кода выше.

    Настройка защищенной страницы (и любой другой страницы, которую вы хотите защитить)

    Теперь перейдем к защищенной странице, мы добавим собственный код как в заголовок, так и в тело. Мы добавим собственный код в заголовок, чтобы проверить, вошел ли пользователь в систему, и получить токен OAuth пользователя. Пользовательский код в теле будет использоваться для анализа данных пользователя и отображения его / ее электронной почты на странице.

    Добавьте приведенный ниже код в заголовок защищенной страницы.

    <script>
    // 1. We check if a user has already logged in
    var cotterOAuthToken = localStorage.getItem("user_session");
    
    // 2. If user is not logged in then we redirect to the login page
    if (!cotterOAuthToken || cotterOAuthToken.length <= 0) window.location.href = "/";
    
    // 3. If user is logged in then we fetch the user data
    let url = "https://cotterapp.herokuapp.com/login"
    fetch(url, {
        method: 'POST',
        cache: 'no-cache',
        headers: {
          'Content-Type': 'application/json'
        },
        body: cotterOAuthToken
      })
      .then(resp => resp.json())
      .then(data => {
      	if(!data.success) { window.location.href = "/" }
      });
    </script>

    Добавьте приведенный ниже код в основную часть защищенной страницы.

    <script>
    // 1. Fetch the user data
    let token = JSON.parse(cotterOAuthToken);
    // 2. Display user email
    document.getElementById("welcome-text-heading").innerHTML = `Welcome ${token.email},`;
    
    document.getElementById("signout-button").addEventListener("click", () => {
    	window.localStorage.removeItem("user_session"); // Log user out
            window.location.href = "/";                     // Redirect to home				      
    });
    </script>

    Часть 3. Публикация и тестирование

    Мы подошли к последней части этого руководства, и все, что вам нужно сделать, это нажать кнопку «Опубликовать» и протестировать аутентификацию Cotter по волшебной ссылке для вашего веб-сайта Webflow!

    Заказать no code разработку

    После уточнения деталей мы можем приступить к вашему проекту
    Made on
    Tilda