Magic Auth와 Webflow를 사용하여 블로그 회원 사이트를 만드는 방법

22988 단어 magicwebflowpasswordlessauthentication
안녕하세요.🙋🏻‍♀️. 이 강좌에서는 Webflow와Magic auth를 사용하여 블로그 구성원 사이트를 구축할 것입니다.Webflow는 시각적 응답을 위한 사이트를 디자인하고 구축하며 발표하는 데 도움을 줄 것입니다.Magic는 지팡이를 포기하고 안전하고 신뢰할 수 있는 암호 없는 로그인을 만들 것입니다.
💁🏻‍♀️ 주의: 이 강좌는 웹플로우의 사용자 정의 코드를 사용합니다. 이 코드는 비용을 지불하는 웹플로우 계정에서 사용할 수 있습니다.

다음은 최종 결과Live Demo!

마법 장치

  • 마술 계좌here를 등록합니다.
  • 새 프로그램을 만들고 이 페이지를 열어 둡니다(나중에 발표할 수 있는 키를 테스트해야 합니다).
    • 참고로 이 강좌는 이메일 링크 로그인 방법을 사용하지만 다른 소셜 로그인 옵션을 선택할 수 있습니다(구글,GitHub,페이스북,애플,LinkedIn)!당신은 또한 자신의 취향에 따라 로그인 폼을 맞춤형으로 제작할 수 있습니다😎.

    Webflow 설정

  • 웹플로우 계정here을 등록합니다.
  • 새 프로젝트를 만듭니다.
  • 빈 사이트를 선택합니다.
  • 당신의 첫 번째 CMS 집합을 만듭니다(이곳은 블로그를 저장하는 곳입니다).
  • 블로그 게시물 템플릿을 선택합니다.
  • 컬렉션 만들기를 클릭하고 5개 샘플 항목을 추가합니다.

    • Webflow 탐색 모음 링크 만들기


    Webflow는 기본적으로 홈 페이지를 제공합니다. 따라서 내비게이션 표시줄을 디자인하십시오.
    탐색 모음 구성 요소를 드래그하여 배경색을 흰색으로 변경하고 다음 각 링크에 저장합니다.
  • 가--IDhomeLink입니다.
  • 로그인-ID:loginLink.
  • 프로필 - ID: profileLink.
  • 로그아웃 - ID: logOutLink.
    • 임의로 로고를 추가할 수도 있습니다.
    그리고 하나 더;모든 페이지에 이 내비게이션 표시줄이 필요하기 때문에 그것을 기호로 바꾸십시오.이것은 내비게이션 표시줄을 다시 사용할 수 있는 구성 요소로 만들 것이다.

    Webflow 페이지 설계 및 링크


    페이지를 디자인해서 내비게이션 표시줄에 연결할 때가 되었다.다음은 당신이 필요로 하는 페이지 목록입니다. 각 페이지마다 그것들을 어떻게 디자인하는지에 대한 단계별 안내서가 있습니다.

    1. 집


    드래그 앤 드롭:
  • 내비게이션 표시줄 아래의 일부분으로 윗부분과 밑부분의 간격은 50이다.
  • 이 단락의 맨 위에 있는 용기.
  • 컨테이너 상단의 제목, 제목: "🪄 블로그 회원 사이트✨”.
  • 수집 목록은 용기 맨 위, 제목 아래에 있습니다.
  • 이 즐겨찾기 목록은 홈 페이지에 블로그를 표시하는 방법입니다.두 번 클릭하면 이전에 만든 블로그 게시물 집합에 연결한 다음 이를 블로그 게시물 목록처럼 보일 수 있도록 설계할 수 있습니다.
  • 즐겨찾기 항목의 제목입니다.제목 텍스트가 블로그 게시물의 Name 필드에서 왔는지 확인합니다.
  • 방금 추가한 제목 아래에 풍부한 텍스트 필드가 있습니다.블로그 게시물의 Post Body라는 필드에서 텍스트를 가져와야 합니다.
    • 지금, 당신은 당신의 CMS 소장 중의 모든 블로그 댓글을 볼 수 있을 것입니다!
    마지막으로 Home의 내비게이션 링크 설정을 편집하여 Type: Page과Page: Home를 가지도록 한다.

    2. 로그인


    드래그 앤 드롭:
  • 내비게이션 표시줄 기호.
  • 내비게이션 표시줄 아래의 일부분으로 윗부분과 밑부분의 간격은 50이다.
  • 이 단락의 맨 위에 있는 용기.
  • 컨테이너 상단의 제목, 로그인🎉”.
  • 용기 맨 위, 제목 아래의 템플릿.
  • 이름의 탭과 텍스트 필드를 제거하면 필요 없습니다.
  • 버튼의 이름을 로그인으로 바꾸고 IDloginBtn를 입력합니다(참고: 이메일 텍스트 필드에는 이미 IDemail가 있습니다.
    • 로그인한 탐색 링크 설정Type: Page과 Page: Login를 다시 편집합니다.

    3. 소개


    드래그 앤 드롭:
  • 상단 여백이 50인 내비게이션 바 기호.
  • 내비게이션 표시줄 아래의 일부분으로 윗부분과 밑부분의 간격은 50이다.
  • 이 단락의 맨 위에 있는 용기.
  • 이 컨테이너의 레이아웃 > 표시가 Flex로 설정되었는지 확인합니다.
  • 용기에는 두 개의 제목이 있다.
  • Flex는 서로 인접하게 만듭니다.
  • 첫 번째 제목은'환영'이고 두 번째 제목은'사용자 이메일'과 같은 임시 텍스트이다.
  • 제목 사이에 공백을 추가합니다.두 번째 제목에 15의 공백을 남기다.
  • 사용자가 로그인하면 "user email"을 로그인할 전자 메일 주소로 바꿔야 합니다.이렇게 하려면 두 번째 제목의 IDemailAddress를 지정합니다.
    • NAV914(프로파일 편집) 및 454(프로파일 편집)의 경우

    4. 로그아웃


    사용자가 로그아웃하면 로그인 페이지로 라우팅해야 합니다.이를 위해 로그아웃된 내비게이션 링크 설정을 편집하여 Type: Page 와 Page: Profile 를 가지도록 합니다.
    웹 페이지를 디자인하고 링크해 주셔서 감사합니다🥳! 그런 다음 Magic SDK를 사용하여 사용자의 로그인 또는 로그아웃을 확인하고 특정 페이지를 보호하는 방법을 학습합니다.

    Webflow 사이트 범위의 사용자 정의 코드 작성


    Webflow의 사이트 범위 사용자 정의 코드는 사이트 전체에 적용됩니다.이 옵션을 사용하여 Magic SDK를 초기화하고 일부 페이지를 보호하며 로그아웃할 수 있습니다.
    다음 코드를 웹플로우 사이트의 프로젝트 설정 > 사용자 정의 코드에 붙여넣기만 하면 됩니다.

    첫 번째 코드


  • 마법 SDK를 획득합니다.
    <!-- 1. Get Magic SDK -->
<script src="https://cdn.jsdelivr.net/npm/magic-sdk/dist/magic.js"></script>

  • 네가 전에 열었던 그 페이지를 기억하니?이 페이지에서 복사 테스트를 하면 키를 발표하고 붙여넣을 수 있습니다 Type: Page.이 코드는 Magic SDK를 초기화합니다.
    <!-- 2. Initialize Magic -->
<script>
const magic = new Magic('your_test_publishable_key');
</script>

    • 바닥글 코드


  • 로그인한 사용자가 개인 페이지에 접근할 수 있는지 확인하십시오. 로그아웃한 사용자는 할 수 없습니다.
    <!-- 4. When the user is logged in/logged out. -->
<script>
  let privatePages = [
    '/profile',
    '/' // This is where your private blogs live!
  ];

  let publicPages = [
    '/login'
  ]

  // Get the user & check whether or
  // not the user is logged in. Show or
  // hide pages depending on the outcome.
  const getUser = async () => {

    // The page user is currently on
    const currentPath = window.location.pathname;

    // Checks if a user is currently logged in
    // to the Magic SDK
    const isLoggedIn = await magic.user.isLoggedIn();

    // If the user is logged in...
    if (isLoggedIn) {

      // prevent them from accessing public pages.
      if (publicPages.includes(currentPath)) {
        window.location.replace('/');
      } else {
        // Or hide links they don't need to see
        loginLink.style.display = 'none';
      }
    } else {

      // If the user is logged out and
      // they try to access a private page,
      // send them back to the login page.
      if (privatePages.includes(currentPath)) {
        window.location.replace('/login');
      } else {

        // Or hide links they shouldn't be able to see
        profileLink.style.display = 'none';
        logOutLink.style.display = 'none';
        homeLink.style.display = 'none';
      }
    }
  };

  getUser();
</script>

  • 로그인한 사용자가 로그아웃할 수 있도록 합니다.
    <!-- 5. Log out the currently authenticated Magic user. -->
<script>
  const logOut = async () => {
    try {
      await magic.user.logout();
      const isLoggedIn = await magic.user.isLoggedIn();
      console.log('Is the user still logged in? ', isLoggedIn); // => `false`
    } catch (error) {
      // Handle errors if required!
      console.log('Ran into this error while logging out: ', error);
    }
    console.log('WHOO! User has logged out.');
  }

  // Call the logOut function when the user
  // clicks the Log Out Nav Link.
  logOutLink.addEventListener('click', logOut);
</script>

    • Webflow 페이지 사용자 정의 코드만 작성


    특정 페이지 설정의 사용자 정의 코드는 이 페이지에만 적용됩니다.이 옵션을 사용하면 로그인과 파일 설정 기능을 사용할 수 있습니다.다음 코드 블록을 상응하는 정적 페이지Page: Login에 표시하기 전의 페이지 설정 내부에 붙여넣기만 하면 됩니다.

    로그인


    사용자의 로그인을 허용합니다.
    <!-- 3. Log in with Magic Link -->
<script>
  // Log in or create a new user.
  const login = async () => {
    const emailVal = email.value;
    await magic.auth.loginWithMagicLink({
        email: emailVal
      })
      .then(() => {
        // Take user to the home page once they're
        // logged in.
        window.location.replace('./');
      })
      .catch((error) => {
        console.log("Error while logging in: ", error);
      })
  }

  // Call the login function when the user
  // clicks the Login button.
  loginBtn.addEventListener('click', login);
</script>

    간략한 상황


    사용자의 전자 메일이 표시되는지 확인합니다.
    <!-- 4. Ensure the user's email is displayed -->
<script type="text/javascript">
  const displayUserName = async () => {
    const {
      email,
      publicAddress
    } = await magic.user.getMetadata();

    let elementToDisplay = document.getElementById('emailAddress');
    elementToDisplay.innerHTML = email;
  }

  displayUserName();
</script>

    코드 테스트


    훌륭하다🤩🪄! 너는 이미 블로그 회원 사이트를 세웠다.코드를 테스트하려면 사이트를 발표하고 실시간 URL을 방문해야 합니다.

    로더 추가


    페이지 사이를 탐색할 때 UI에서 지연이 발생합니다.매직 SDK를 초기화하는 데 몇 초가 걸리기 때문이다.이 문제를 해결하려면 마운트를 추가할 수 있습니다.
  • Div 블록을 탐색 모음 위의 홈 페이지로 드래그합니다.
  • 레이아웃 > 디스플레이를 Flex로 설정합니다.
  • 정렬 및 정렬을 중심으로 설정합니다.
  • 너비와 높이를 100VW로 설정합니다.
  • 배경색을 로고와 잘 대비되는 색상으로 변경합니다.
  • 이미지를 Div 블록으로 드래그한 다음 로드 프로그램을 업로드합니다.그것은 반드시 자동으로 가운데에 있어야 한다.
  • Div 블록의 ID'your_test_publishable_key'를 입력합니다.

  • 프로젝트 설정 > 사용자 정의 코드 > 바닥글 코드의 </body> 기능을 업데이트합니다.
    const getUser = async () => {

    // The page user is currently on
    const currentPath = window.location.pathname;

    // Checks if a user is currently logged in
    // to the Magic SDK
    const isLoggedIn = await magic.user.isLoggedIn();

    // If the user is logged in...
    if (isLoggedIn) {

      // prevent them from accessing public pages.
      if (publicPages.includes(currentPath)) {
        window.location.replace('/');
      } else {
        // Or hide links they don't need to see
        loginLink.style.display = 'none';
        // Get rid of loader when user gets to correct page
        loader.style.display = 'none';
      }
    } else {

      // If the user is logged out and
      // they try to access a private page,
      // send them back to the login page.
      if (privatePages.includes(currentPath)) {
        window.location.replace('/login');
      } else {

        // Or hide links they shouldn't be able to see
        profileLink.style.display = 'none';
        logOutLink.style.display = 'none';
        homeLink.style.display = 'none';
        // Get rid of loader when user gets to correct page
        loader.style.display = 'none';
      }
    }
  };
  • Div 블록을 "Loader"라는 기호로 바꿉니다.
  • 로더 기호를 나머지 페이지로 드래그합니다.
    • 변경 사항을 발표하고 실시간 사이트를 확인하여 로드 프로그램의 운행 상황을 보십시오.

    오늘은 여기까지!


    보시다시피 웹플로우로 예쁜 블로그 회원 사이트를 설계하는 것은 매우 쉽다.원소만 드래그하면 돼!안전한 인증 및 인증 시스템을 위해 사이트에 Magic auth를 통합합니다.
    다음에 Webflow와Magic auth로 어떤 유형의 회원 사이트를 만들고 싶을 때, 이 안내서는 줄곧 당신을 지원할 것입니다.다음에 다시 이야기합시다🙋🏻‍♀️.
    동적 페이지 새로 고침(페이지 스크롤)
    AS3 객체 스트리밍

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage