Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Davor Grubelić
    @dgrubelic
    second, you can create service that will store profile for you in some internal object or in local storage
    Carsten
    @cvantum
    thanks for the solutions.. i've removed the key from client and found a way to use ẁindow.localStorage for my needs. If you need i can gave you some sample-code for OAuth2 with https://discordapp.com
    Also for server.js :)
    Davor Grubelić
    @dgrubelic
    you can send PR and i'll review it as soon as i can :)
    Carsten
    @cvantum
    PR?
    Davor Grubelić
    @dgrubelic
    Pull request :)
    Daniel Mecke
    @dmecke
    Hi there! Thanks a lot @dgrubelic for your library! Your effort is really much appreciated! :smile:
    I struggled a bit though about where to put the bindRequestInterceptor() and bindResponseInterceptor() methods though (I use axios). I eventually found out that these belong into the options of the Vue.use(), but maybe that could be highlighted in the corresponding section of the help?
    Davor Grubelić
    @dgrubelic
    Hey @dmecke , thanks for your support and thanks for reporting this to be unclear. I'll add into README.
    Daniel Mecke
    @dmecke
    cool, thanks! :-)
    Martin Hansen
    @mokkabonna
    have some issues implementing this plugin
    I try to login with github
    it opens a new window, I authorize, get redirected back, do a post to github to get the token, then redirect to SPA again with the query string token =<token>
    after that I don't know what to expect
    how does this plugin pick up the token and communicate to the main window that I am authorized?
    hope someone can help
    Davor Grubelić
    @dgrubelic
    Hi @mokkabonna , I'll be able to help you in a few hours...
    is that ok with you?
    Martin Hansen
    @mokkabonna
    sure, that would be great
    thanks @dgrubelic
    Davor Grubelić
    @dgrubelic
    Have you seen example app on github? There, you can see Github auth example
    What do you mean "i don't know what to expect"?
    Martin Hansen
    @mokkabonna
    I have looked at it, but still struggling
    is the flow I have described correct?
    Davor Grubelić
    @dgrubelic
    This is oauth standard for both oauth1 and oauth2
    Martin Hansen
    @mokkabonna
    ah, is code the expected query string param?
    i send the user directly to my server, do the post for the token there, then redirect back with the token to the vue app
    Davor Grubelić
    @dgrubelic
    that should do it
    this is all you need to do for github (except setup provider config): https://github.com/dgrubelic/vue-authenticate/blob/master/example/server.js#L88
    Martin Hansen
    @mokkabonna
    think I understand, need to change my server setup then
    what I have done is have my return url directly to the server, and not to the vue app
    Martin Hansen
    @mokkabonna
    but window don't close or request made to my server for access token
    Martin Hansen
    @mokkabonna
    was missing the redirectUri
    Martin Hansen
    @mokkabonna
    got it working now with a local server. Still struggle to get it to work with AWS lambda, only get code expired.. hmm
    Martin Hansen
    @mokkabonna
    phew got it working :)
    thanks alot
    paul van bladel
    @paulvanbladel
    Hi Davor, thanks a lot for trying to help me with interceptor problem.
    Davor Grubelić
    @dgrubelic
    Hey Paul, no problem...
    so, auth token is stored in storage but isn't sent to server?
    if token is stored in storage after auth process, that means that interceptors are working ok
    you can optionally bind exactly the same interceptors and see what the problem is when you try to send a request
    that can be done be overriding these two props in vue authenticate config:
    bindRequestInterceptor: null,
    bindResponseInterceptor: null,
    paul van bladel
    @paulvanbladel
    ok.
    this is how I configure vue-authenticate

    // === DEFAULT / CUSTOM STYLE ===
    // WARNING! always comment out ONE of the two require() calls below.
    // 1. use next line to activate CUSTOM STYLE (./src/themes)
    // require(./themes/app.${__THEME}.styl)
    // 2. or, use next line to activate DEFAULT QUASAR STYLE
    require(quasar/dist/quasar.${__THEME}.css)
    // ==============================

    import Vue from 'vue'
    import Quasar from 'quasar'
    import router from './router'
    import vuelidate from 'vuelidate'
    import VueResource from 'vue-resource'
    import VueAuthenticate from 'vue-authenticate'
    Vue.use(Quasar) // Install Quasar Framework
    Vue.use(vuelidate)

    // TODO use axios instead of vueresource
    Vue.use(VueResource)

    // TODO move to separate file
    Vue.use(VueAuthenticate, {
    baseUrl: 'http://localhost:8080',
    providers: {
    oauth2: {
    name: 'oauth2',
    url: 'Token/Exchange',

      authorizationEndpoint: 'http://localhost:5000/connect/authorize', // if this ends with slash --> game over
    
      redirectUri: window.location.origin || window.location.protocol + '//' + window.location.host,
      scope: ['profile', 'openid', 'PanelButlerApi'],
      responseParams: {
        code: 'code',
        clientId: 'clientId',
        redirectUri: 'redirectUri'
      },
      responseType: 'code',
      // responseParams: {
      //   code: 'code',
      //   token: 'access_token',
      //   state: 'state',
      //   sessionState: 'session_state',
      //   clientId: 'clientId',
      //   redirectUri: 'redirectUri'
      // },
    
      scopePrefix: '',
      scopeDelimiter: ' ',
      // defaultUrlParams: ['client_id', 'scope', 'response_type', 'redirect_uri', 'state', 'nonce'],
      defaultUrlParams: ['response_type', 'client_id', 'redirect_uri'],
    
      requiredUrlParams: ['scope', 'nonce'],
      optionalUrlParams: ['display', 'state'],
      state: function () {
        var val = ((Date.now() + Math.random()) * Math.random()).toString().replace('.', '')
        return encodeURIComponent(val)
      },
      display: 'popup',
      oauthType: '2.0',
      clientId: 'PanelButlerVueJs',
    
      nonce: function () {
        var val = ((Date.now() + Math.random()) * Math.random()).toString().replace('.', '')
        return encodeURIComponent(val)
      },
      popupOptions: { width: 452, height: 633 }
    }

    }
    })
    Quasar.start(() => {
    / eslint-disable no-new /
    new Vue({
    el: '#q-app',
    router,
    render: h => h(require('./App'))
    })
    })

    Davor Grubelić
    @dgrubelic
    so, you are saying that authenticate is ok and you get token stored in local storage, right?
    paul van bladel
    @paulvanbladel

    yes indeed, and this is how I make call to api:

    <template>
    <!-- root node required -->
    <div>
    <!-- your content -->
    <div class="layout-padding">
    <div>Identity</div>
    <pre>{{identityData }}</pre>
    </div>
    </div>
    </template>

    <script>
    export default {
    data () {
    return {
    identityData: {}
    }
    },
    created () {
    let url = '/api/Identity'

    // let token = this.$auth.getToken()
    debugger
    this.$http
    // .get(url, {headers: {'Authorization': 'Bearer ' + token}})
    .get(url)
    .then(response => { this.identityData = response.data })
    }

    }
    </script>

    <style>

    </style>

    Davor Grubelić
    @dgrubelic
    that means that response interceptor is working since this is the way library collects token during auth proces