Vue.js 2 和 auth0 身份验证导致“nonce”

Posted 2023-03-05

【中文标题】Vue.js 2 和 auth0 身份验证导致“nonce”

【英文标题】：Vue.js 2 and auth0 authentication resulting with 'nonce'

【发布时间】：2017-10-11 17:52:02

【问题描述】：

我正在尝试在我的 Vue.js 2 应用程序中实现 auth0。

我按照这个链接来实现 auth0 锁： https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login

这是我在 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 运行了演示，它没有任何问题。

显然，我的控制台没有收到任何错误。

【参考方案1】：

经过研究，我终于找到了问题的答案。

之所以不起作用，是因为我的 vue-router 没有使用 HTML5 History Mode (http://router.vuejs.org/en/essentials/history-mode.html)。

要让它在没有历史模式的情况下工作，我必须在我的锁定选项中禁用重定向并禁用自动解析哈希：

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

参考：https://github.com/auth0/lock