Как создать автономный сайт авторизации, используя AWS Amplify with Cognito? - PullRequest
Новая
       19

Как создать автономный сайт авторизации, используя AWS Amplify with Cognito?

0 голосов
/ 22 апреля 2020

У меня есть три реагирующих веб-приложения. Две из них являются платформами, а одна - для входа в систему / регистрации. Я хочу иметь возможность войти в auth ui и перемещаться между двумя платформами, не требуя дополнительного входа в систему. Прямо сейчас у меня есть настройки для входа / регистрации в пользовательском интерфейсе аутентификации с использованием AWS Усиление. Но я не уверен, как сохранить состояние входа в систему при переходе на веб-приложения двух платформ. Я планирую, чтобы все они были в одном домене, но также и с использованием субдоменов. Например, auth.domain.com, admin.domain.com и customer.domain.com.

Я довольно новичок в AWS Усиление, и во все мои предыдущие приложения встроена аутентификация, поэтому я впервые пытаюсь отделить аутентификацию от основного приложения. Я действительно ищу направление для продвижения вперед или учебник, если таковой существует.

Спасибо за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

Таким образом, у вас есть LoginPage, который обрабатывает вход, и у вас есть другие страницы, которые вы можете видеть только при входе в систему. Вот один из способов сделать это в функциональном компоненте.

На высоком уровне у вас есть состояние, которое управляет состоянием аутентификации. По умолчанию он инициализируется для загрузки. Затем вы используете Auth.currentAuthenticatedUser(), чтобы проверить, является ли пользователь логином. Если они есть, вы выставляете их на содержание страницы. Если нет, вы перенаправляете их на страницу входа. 

import React, { useState, useEffect } from 'react';
import { Redirect } from "react-router"; //Using react-router for page navigation for example
import { Auth, Hub} from 'aws-amplify';

const OtherPage = () =>{
    // Default at loading state
    const [authState, setAuthState] = useState('loading');

    // Use effect is run when component loading is mounted
    useEffect((data) => {
        // Define updateAuthState
        let updateAuthState = async () => {
            try {
                // Get current auth user, this throw error if not authenticated
                let user = await Auth.currentAuthenticatedUser();
                // No error, change auth state to show page content
                setAuthState("authenticated");
           }
           catch(error){
               // Error, change auth state to redirect user to login page
               setAuthState("unauthenticated");
           }
       }
       // Call AuthState Once
       updateAuthState();
       // Set up Hub to listen for auth event in case user log out
       Hub.listen('auth', updateAuthStat);
       return () => Hub.remove('auth', updateAuthState); // cleanup
    }

    // Do different things based on authState
    switch (authState) {
        case 'loading':
            return <h1>Loading...</h1>;
        case 'authenticated':
            return <h1>Your authenticated component</h1>;
        case 'unauthenticated':
            return <Redirect to="/login" />; {/*I recommend using /login for your login page */}
        default:
            return null;
    }
}

export default OtherPage;

Код abode - это упрощенная версия, которую я собрал и не проверял, но идея высокого уровня есть:)

Для получения дополнительной информации я рекомендую ознакомиться с Полным руководством по аутентификации пользователя с помощью Amplify Framework Надера Дабита [https://dev.to/dabit3/the-complete-guide-to-user-authentication-with-the-amplify-framework-2inh] и его бесплатным видео [https://egghead.io/lessons/react-install-configure-the-aws-amplify-cli]

0 голосов
/ 22 апреля 2020

Во-первых, вы не можете поддерживать единый пул аутентификации для двух разных доменов, поскольку Cognito и Amplify вместе поддерживают элементы локального хранилища и токены для аутентификации для каждого домена. Этого можно достичь, если два приложения интегрированы в один домен.

...