Magic을 사용하여 MFA 지원을 손쉽게 추가

17055 단어 webdev beginners auth mfa

다중 요소 인증(Multi-Factor Authentication, MFA)은 안전한 인증 과정에서 중요한 부분이지만 개발자에게 정확하게 설정하는 것은 고통스러운 일이다.
이 문서에서는 추가 보안 수준을 높이기 위해 샘플 응용 프로그램에 MFA를 설정하도록 안내합니다.

예비 지식

당신은 Magic 계좌 하나만 있으면 시작할 수 있습니다.
마법 초보?Sign up for free

설정

로그인 양식 스크립트 추가

새 로그인 페이지index.html를 만들고 스크립트 탭을 추가합니다.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Start the login flow just by including this script tag! -->
  <script
    src="https://auth.magic.link/pnp/login"
    data-magic-publishable-api-key="pk_live_7F4F8AEF74A0C9BC"
    data-redirect-uri="/callback.html"
  ></script>
</head>

API 키는 Magic Dashboard 홈 페이지에서 확인할 수 있습니다.

이것은 사용자가 계기판을 통해 사용하는 브랜드와 로그인 방법에 따라 미리 만들어진 로그인 폼을 생성합니다.

콜백 스크립트 추가

다음에 인증된 리셋을 처리하기 위해 다음 스크립트 표시를 포함하는 callback.html 페이지를 만듭니다.

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Automatically handle auth callback using Magic! -->

  <script
    src="https://auth.magic.link/pnp/callback"
    data-magic-publishable-api-key="pk_live_7F4F8AEF74A0C9BC"
  ></script>

  <!-- Use data from Magic! -->

  <script>
    window.addEventListener("@magic/ready", (e) => {
      const { idToken, userMetadata, oauth } = e.detail;
    });
  </script>

  <link rel="stylesheet" href="/css/main.css" />
</head>

<!-- UI implementation -->

<body>
  <div class="page">
    <h1>Now let's enable MFA</h1>
    <div class="data">
      <a class="link" href="/settings.html">Open user settings</a> to enable
      MFA.
    </div>
    <div class="data">
      Once enabled, <a class="link" href="/logout.html">log out</a> then log
      back in to try multi-factor login.
    </div>
  </div>
</body>

사용자가 성공적으로 로그인하면 클라이언트와 서버 측의 업무 논리를 실행하기를 원할 수도 있습니다.이를 위해 @magic/ready 스크립트를 포함하는 페이지의 window 대상에 https://auth.magic.link/pnp/callback 이벤트를 연결할 수 있습니다.@magic/ready 이벤트는 custom data attached부터 event.detail까지의 대상을 포함한다.다음 필드가 나타납니다.

magic-Magic JS의 실례로 낮은 레벨에서 어떠한 마법 방법과도 인터페이스할 수 있다.

idToken-ADID token 사용자용

userMetadata - 사용자를 위한 최신 버전user metadata.

oauth - OAuth Provider를 통해 로그인 방법이 시작되면 사용자 OAuth response - 그렇지 않으면 이 필드는 undefined입니다.

로그아웃 스크립트 추가

로그아웃 기능을 처리하기 위해 아래 스크립트 표시가 있는 logout.html 페이지를 만듭니다.

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Automatically handle logout using Magic! -->

  <script
    src="https://auth.magic.link/pnp/logout"
    data-magic-publishable-api-key="pk_live_7F4F8AEF74A0C9BC"
    data-redirect-uri="/"
  ></script>
</head>

MFA 사용자 설정 구현

Magic는 사용자가 계정의 다양한 기능을 사용할 수 있도록 셀프 서비스 multi-factor auth (MFA) 를 제공하는 기존의 설정 위젯을 제공합니다.
이제 다음 스크립트 태그가 포함된 settings.html 페이지를 만듭니다.

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Automatically handle logout using Magic! -->

  <script
    src="https://auth.magic.link/pnp/settings"
    data-magic-publishable-api-key="pk_live_7F4F8AEF74A0C9BC"
    data-redirect-uri="/callback.html"
  ></script>
</head>

작은 위젯의 설정을 취소하면 사용자는 data-redirect-uri에서 제공한 URI로 자동으로 리디렉션됩니다(또는 값이 제공되지 않으면 /callback의 상대 경로).사용자 정의 리셋 논리에서 prevUserMetadata 이벤트 데이터의 @magic/ready 필드에 접근해서 설정을 수동으로 변경하고 응용 프로그램에서 사용할 수 있습니다.사용자가 작은 위젯에 접근할 때 현재 로그인하지 않으면, 사용자가 data-login-uri 에서 제공한 URI로 자동으로 바꿉니다. (또는 값을 제공하지 않으면 window.location.origin 를 사용합니다.

CSS를 추가하여 더 예쁘게 보이게 하기

css/main.css 파일을 만들고 다음 코드를 붙여넣습니다.

.page {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .page a {
    margin-top: 1rem;
  }

  .data:not(:first-child) {
    margin-top: 2rem;
  }

  .data label {
    font-size: 1.5em;
    font-weight: bold;
    font-family: "Roboto", sans-serif;
  }

  .data pre {
    background-color: gainsboro;
    padding: 1.5em;
    width: 500px;
    border-radius: 1em;
    overflow-x: auto;
  }

  h1 {
    color: #18171a;
  }

  .data {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    max-width: 368px;
  }

  .link {
    color: #6851ff;
  }

대시보드에서 MFA 사용

Multi-factor Auth Dashboard 페이지에서 사용할 수 있습니다.

MFA 구성 후 사용자의 첫 번째 로그인 흐름

우리 앱에서 MFA를 점검할 때가 됐다.메인(https://lmr9z.csb.app) 위처럼 보입니다.👆, 전자 우편과 문자 로그인 옵션을 사용합니다.또한 소셜 로그인 옵션을 활성화할 수도 있지만 MFA는 현재 이메일과 SMS를 주로 지원하고 있습니다.

전자 메일 메시지를 제공하고 Log in / Sign up 버튼을 클릭하면 전자 메일 확인 이라고 적힌 팝업 창이 나타납니다.
참고 이 탭을 닫지 말고 e-메일을 확인한 다음 링크를 클릭하여 로그인하십시오.

성공적으로 로그인하면 콜백 페이지로 리디렉션됩니다.여기서 MFA를 기용한다.활성화되면 다음 로그인 시 MFA 스트림이 사용됩니다.
페이지의 Open user settings 링크를 클릭하여 사용자 설정 페이지를 엽니다.

여기서 두 단계의 검증OFF을 보실 수 있습니다.Turn on 단추를 누르면 그것을 사용합니다.

2단계 유효성 검사를 사용하려면 Google authenticator 또는 Authy 같은 인증서 애플리케이션을 선택해야 합니다.

이제 검증기 프로그램이 표시하는 QR코드를 스캔하고 Next 단추를 누르십시오.

이 단계에서 authenticator 프로그램에서 6비트 코드를 입력하십시오.

성공하면 복구 코드를 저장하라는 메시지가 표시됩니다.이것을 안전한 곳에 두어라.authenticator 프로그램에 접근할 수 없으면 이 코드로 로그인할 수 있습니다.

클릭Finish setup.

2단계 검증 상태는 ON입니다.
로그아웃한 후 다시 로그인하여 MFA의 작동 상태를 확인합니다.
다음 방문에서 전자 우편의 링크를 클릭하면 검증기 프로그램의 6자리 코드를 입력하거나 안전한 위치에 저장된 동일한 복구 코드를 입력하라는 메시지가 표시됩니다.

이것이 바로 본문입니다. 나는 당신의 응용 프로그램이 MFA를 사용하는 것을 보고 싶습니다.
다음과 같은 유용한 링크가 있습니다.

현장 프레젠테이션: https://lmr9z.csb.app

GitHub의 코드: https://github.com/magiclabs/example-mfa

외교부: https://magic.link/docs/login-methods/mfa

마법: https://magic.link

Reference

이 문제에 관하여(Magic을 사용하여 MFA 지원을 손쉽게 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/shahbaz17/add-mfa-support-easily-with-magic-p6c

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

python ReportLab

【해결됨】ValueError: Object arrays cannot be loaded when allowpickle=False

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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