SPA 및 기타 사용자를 위한 로그인 관리(2부)

이 기사는 내 원래 게시물에서 가져왔습니다(읽지 않았다면 여기에서 읽을 수 있습니다: )

이 게시물에서는 구현을 완료하고 원하는 공급자로 로그인을 추가합니다.

이를 달성하는 방법에는 두 가지가 있습니다.

쉬운 방법

쉽지 않은 방법

1번으로 가겠습니다 :)

쉬운 방법

Pathfix App에서 사용할 수 있는 로그인 확장 코드를 사용합니다.

    <div>
        <script id='pinc.helper' 
          src='https://labs.pathfix.com/helper.js' 
          modules='pinc.auth.min,ui.auth' 
          data-client-id='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' 
          providers='msazuread,discord,fb,github,google,linkedin,ms' 
          data-ui-button-prefix='Login with' 
          data-on-logged-in='onLoggedIn()' 
          data-on-logged-out='onLoggedOut()' 
          data-auth-success-url=''></script>
    </div>

Pathfix의 코드는 로그인 흐름도에서 N1:/N2:/N3:/N4:와 관련된 단계를 처리합니다(아래 참조).



이것이 배치 되 자마자 로그인 버튼이 다음과 같이 표시됩니다 ...



사후 로그인 이벤트를 처리하기 위해 다음 코드를 추가합니다.

    function onLoggedIn(){
        //N5:
        console.log($pinc.auth.profile)
    }

    function onLoggedOut(){
        //Code to redirect to login page
    }

그게 다야.