Vue.js 2 및 auth0 인증 결과 'nonce'가 됩니다.

Vue.js 2 및 auth0 인증 결과 'nonce'가 됩니다.

Vue.js 2 어플리케이션에 auth0을 구현하려고 합니다.

다음 링크를 따라 auth0 잠금을 구현했습니다.https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login

로그인 어플리케이션입니다.vue:

HTML:

<div v-show="authenticated">
    <button @click="logout()">Logout</button>
</div>
<div v-show="!authenticated">
    <button @click="login()">Login</button>
</div>

Javascript:

  function checkAuth() {
    return !!localStorage.getItem('id_token');
  }

  export default {
    name: 'login',
    data() {
      return {
        localStorage,
        authenticated: false,
        secretThing: '',
        lock: new Auth0Lock('clientId', 'domain')
      }
    },
    events: {
      'logout': function() {
        this.logout();
      }
    },
    mounted() {
      console.log('mounted');
      var self = this;
      Vue.nextTick(function() {
        self.authenticated = checkAuth();
        self.lock.on('authenticated', (authResult) => {
          console.log(authResult);
          console.log('authenticated');
          localStorage.setItem('id_token', authResult.idToken);
          self.lock.getProfile(authResult.idToken, (error, profile) => {
            if (error) {
              console.log(error);
              return;
            } else {
              console.log('no error');
            }
            localStorage.setItem('profile', JSON.stringify(profile));
            self.authenticated = true;
          });
        });
        self.lock.on('authorization_error', (error) => {
          console.log(error);
        });
    });
    },
    methods: {
      login() {
        this.lock.show();
      },
      logout() {
        localStorage.removeItem('id_token');
        localStorage.removeItem('profile');
        this.authenticated = false;
      }
    }
  }

이미 효과가 있었던 것은 확실합니다만, 갑자기 효과가 없어졌습니다.

auth0:http://127.0.0.1:8080/#/backend/login에서 정의된 콜백.이것이 브라우저에서 로그인을 여는 방법입니다.

로그인 시 localStorage에만 다음 메시지가 나타납니다.

키: com.auth0.auth.14BK0_jsJtUZMxjiy~3HBYNG27H4Xyp

값: {"nonce":eKGLCD14uEduBS-3MUIQdupDrRWLkKuv"}

또, http://127.0.0.1:8080/#/ 로 리다이렉트 되어, 네트워크 요구는 표시되지 않습니다.

문제가 어디에 있는지 아는 사람 있나요?도메인/클라이언트로 auth0에서 데모를 실행했는데 문제없이 동작했습니다.

콘솔에 에러는 표시되지 않습니다.

연구 끝에 마침내 내 문제에 대한 답을 찾았다.

동작하지 않는 이유는 vue-backup이 HTML5 이력 모드(http://router.vuejs.org/en/essentials/history-mode.html))를 사용하지 않기 때문입니다.

이력 모드를 사용하지 않고 동작하려면 잠금옵션으로 리다이렉트를 무효로 하고 해시의 자동 해석을 무효로 해야 합니다.

lock: new Auth0Lock(
    'clientId', 
    'domain', { 
         auth: { 
             autoParseHash: false, 
             redirect: false 
         }
    }
)

참고 자료: https://github.com/auth0/lock

언급URL : https://stackoverflow.com/questions/43937238/vue-js-2-and-auth0-authentication-resulting-with-nonce