Autoryzacja logowania w dwóch aplikacjach

Cześć, mam pewien problem z dodatkową implementacją.

Jestem niedoświadczonym programistą, ale przejąłem aplikację bo zostałem jedynym w firmie i proszę o pomoc.

Potrzebuję na stronie www.example.com stworzyć button (to nie problem), który po kliknięciu będzie mnie przekierowywał na stronę logowania drugiej aplikacji. Niestety nie wiem jak to zacząć. Nawet nie bardzo wiem w jakim pliku powinienem zacząć pisanie. Dodatkowo, główny widok aplikacji składa się z kafelków, które są modułami, po kliknięciu w któryś, wyskakuje popup do logowania, ścieżka URL się nie zmienia. Każdy moduł w pliku routes.js ma swoją ścieżkę np. /app/pracownicy.
Jak się mogę odnieść do danego modułu z pominięciem głównego ciała aplikacji?
Jak powinien wyglądać mój URL na stronie www.example.com i w którym pliku w aplikacji mam go stworzyć? Czy może ma to być nowy plik?
Logowanie do tej pory odbywa się przez np. www.localhost:8080/app/pracownicy/main. Jak pominąć '/app' w URL-u?
Obecnie, jak wpiszę adres ręcznie www.localhost:8080/app/pracownicy, uruchamia się tylko okienko logowania, ale nie można się zalogować, pewnie o błąd sesji chodzi albo o coś jeszcze innego.
OAuth zda tutaj egzamin, czy są inne sposoby? Na dodatek nie mogę znaleźć żadnego przykładu jak to się robi, wiem, że będzie potrzebny m.in token. Login i hasło też muszę przekazać z podpiętej bazy danych.
Ktoś jest w stanie podpowiedzieć, jak to najlepiej zrobić? Przykłady kodu bardzo mile widziane, żebym sobie mógł to zwizualizować i zobaczyć, jak napisać taki kod.

Ciężko nam pomóc bo nic nie wiemy o projekcie, jak jest zbudowany, czy to rozwiązanie customowe, czy wykorzystuje np. jakiś framework.
Generalnie to o czym piszesz wydaje się proste do zrobienia. Namierz sobie na początku plik w którym ten przycisk ma się znaleźć. Możesz to zrobić np. szukając charakterystycznych translacji/tekstów w projekcie. Jeśli to ma być tylko proste przekierowanie do gotowego uwierzytelnienia, to oAuth Ci tu jest niepotrzebny. Do przycisku dodajesz otwarcie nowego okna pod wskazany adres i tyle.

plik routes.js

    path: '/',
    component: () => import('pages/Index')
  },
  {
    path: '/app/zamowienia',
    component: () => import('layouts/zamowienia'),
    children: [
      {
        path: 'main',
        component: () => import('pages/zamowienia/mainZ')
      }
    ]
  }

plik Index.vue

<div class="col q-pa-xs" style="max-width:800px">
          <!-- templatka przycisku -->
          <div class="row gutter-xs">
            <div class="col-xs-6 col-sm-6 col-md-3 q-pa-xs" v-for="btn in moduleButtons" :key="btn.title"
              :hidden="!btn.active">
              <q-btn outline :disabled="!activeLicense" class="full-width" color="grey-9"
                style="height:16vh;min-height:80px" @click="goToModuleHelper(btn.intent, btn.loginType, btn.moduleId)"
                ripple wait-for-ripple>
                <div class="row full-width">
                  <q-badge color="orange-6" class="absolute-top-left q-ma-xs" v-if="!btn.bagde">{{
                    getNumLicense(btn.moduleId)
                  }}</q-badge>
                  <div class="col-12">
                    <q-badge v-if="btn.beta" color="grey-9" text-color="white" label="BETA" dense />
                  </div>
                  <div class="col-12">
                    <q-icon :name="btn.icon" size="4vh" class="q-pa-xs" color="grey-9" />
                  </div>
                  <div class="col-12">
                    <span class>{{ btn.title }}</span>
                  </div>
                </div>
              </q-btn>
            </div>
          </div>
        </div>

        ...

        goToModuleHelper(intent, type, moduleId) {
          if (moduleId === -1) {
            this.$router.push(intent)
          } else {
            this.gotoModule(intent, type, moduleId)
          }
        },
        
        // metoda wchodzi w wybrany moduł, i przekazuje typ (prc/uzt) logowania do panelu
        gotoModule(intent, type, moduleId) {
          if (type === 'prc') {
            console.log(
              'logowanie użytkownika, sprawdzanie konfiguracji stanowiska'
            )
            // ----
            appInitStationConfig(this.$q)
          }
          this.$store.commit('container/setLoginIntent', intent)
          this.$store.commit('container/setLoginType', type)
          this.$store.commit('container/setLoginModuleId', moduleId)
          // Pokazywanie okna logowania lub przekierowanie do strony logowania
          if (this.$q.screen.xs) {
            this.$router.push('/app/login')
          } else {
            this.dialogLogin = true
            console.log(this.login)
            console.log(this.password)
          }
      }

plik LoginController.js

function appLoginCheck (store, router, loginType) {
  //
  let currentPage = window.location.pathname
  let intentPage = store.state.container.loginIntent
  // console.log('sprawdzam czy mozna wejsc: cp:' + currentPage + ' ip:' + intentPage)
  // sprawdzanie czy intent sie zgadza ze wczytana stroną
  if (Platform.is.electron) {
    store.commit('container/setLoginType', '')
    store.commit('container/setLoginIntent', '')
  } else {
    if (currentPage === intentPage) {
      console.log('prawidłowe wejście do strony')
      store.commit('container/setLoginType', '')
      store.commit('container/setLoginIntent', '')
    } else {
      // wyrzucanie gdy nie ma intentu wchodzenia na te strone
      console.log('nieprawidłowe wejście do strony, przekierowanie do panelu logowania')
      store.commit('container/setLoginType', loginType)
      store.commit('container/setLoginIntent', currentPage)
      router.push('/app/login')
    }
  }
}

Co do /app w path to sprawdz w configu baseUrl https://cli.vuejs.org/config/#baseurl albo po prostu jest route pod takim pathem.

Jeśli panel logowania, do którego masz zrobić button jest w tej samej aplikacji vue, to router.push zmieniasz routa, a jak nie to location.replace('http://google.pl'). Masz zrobić button z redirectem, a piszesz coś o OAuth. Jaka ma być jego rola tutaj?

Jak masz te popupy logowania, to może w Vuexie jest zapisywany token albo dane użytkownika. Sprawdziłeś localStorage i cookies? Jak jest generowany token, to tu powinien być zapisany.

Jak wiesz, w którym komponencie ma być button, to sprawdź vue devtoolsami jego nazwę.

@Aloinopsis: Pokaż inne pliki z routami i storage.

www.google.pl to był tylko przykład, żeby odzwierciedlić o co mi chodzi. Możemy przyjąć, że mam stronę internetową www.example.com i na niej umieszczony button. Każdy moduł ma swój path poprzedzony /app/ i component, np. kolejny plik do innego widoku

Dalej nie wiem co to moduł. Weź spróbuj przeanalizować ten kod.

Przeczytałem cały wątek dwa razy ale dalej do końca nie kumam co chcesz zrobić.
Czy twój problem polega na przekierowaniu z domeny example.com na domenę twojaapka.com?
Czy może potrzebujesz przekierować użytkownika na inna stronę w tej samej domenie?

szman napisał(a):

Czy twój problem polega na przekierowaniu z domeny example.com na domenę twojaapka.com?

Tak, o to chodzi.
Apka ładuje się na localhost:8080. Kiedy się loguję do danego modułu, z pliku routes.js pobierana jest ścieżka np. /app/pracownicy. Czy cała ścieżka to localhost:8080/app/pracownicy.
Teraz mam stworzyć link, który ze strony internetowej np. www.example.com przekieruje mnie bezpośrednia do localhost:8080/pracownicy, a więc z pominięciem /app, jednak musi się to odbyć po nowym URL, np: localhost:8080/amsterdam.
W pliku routes.js dodałem coś takiego:

{
    path: '/amsterdam',
    // redirect: () => { window.location.href = 'app/pracownicy' },
    beforeEach(to, from, next) { window.open = '/app/pracownicy' },
    component: () => import('layouts/pracownicy')
  }

Działa to na tyle, że otwiera się w przeglądarce okno logowania, ale brakuje id sesji, id modułu, id użytkownika, które są zdefiniowane w index.js. W tym pliku wygląda to następująco:

data() {
    return {
      moduleButtons: [
        {
          title: 'pracownicy',
          moduleId: 123,
          intent: '/app/pracownicy',
          loginType: 'uzt',
          icon: 'fas fa-user',
          active: true,
          beta: true
        }
      ]
    }
  },
  methods: {
  goToModuleHelper(intent, type, moduleId) {
      if (moduleId === -1) {
        this.$router.push(intent)
      } else {
        this.gotoModule(intent, type, moduleId)
      }
    },
    gotoModule(intent, type, moduleId) {
      if (type === 'prc') {
        console.log(
          'logowanie użytkownika, sprawdzanie konfiguracji stanowiska'
        )
        // ----
        appInitStationConfig(this.$q)
      }
      this.$store.commit('container/setLoginIntent', intent)
      this.$store.commit('container/setLoginType', type)
      this.$store.commit('container/setLoginModuleId', moduleId)
      // Pokazywanie okna logowania lub przekierowanie do strony logowania
      if (this.$q.screen.xs) {
        this.$router.push('/app/login')
      } else {
        this.dialogLogin = true
      }
    }
  }

Chodzi o to, aby jeden moduł działał jakby poza całą aplikacją, był sam sobie.

Teraz przyszedł mi przykład, załóżmy, składamy zamówienia w sklepie internetowym. Potwierdzamy zamówienie i klikamy "zapłać". Click, który jest na buttonie, przekierowuje nas na inną witrynę, czyli do płatności, np payPal. Na tej witrynie mamy już dane z zamówienia, czyli kwotę, może nawet numer zamówienia, datę i inne dane. Chodzi o to, żeby to odzwierciedlić. Zamiast kwoty u mnie jest id modułu, zamiast numeru zamówienia jest id użytkownika itd.
Sam routing czyli

{
    path: '/amsterdam',
    beforeEach(to, from, next) { window.location = '/app/pracownicy' },
    component: () => import('layouts/pracownicy')
  }

działa.
Ale brakuje właśnie tych parametrów. Aplikacja nie wie do którego modułu ma się zalogować, nie ma przekazanego id użytkownika, id modułu.

No to w query możesz przekazać, chociaż jeśli ma tam byc login albo hasło, to średnio, ale jak są jakieś dane jawne, to w query do routa. Jeśli to jest ta sama aplikacja, to przez vuexa albo event bus.

Masz w dokumentacji https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location
Weź poczytaj najlepiej dokumentacje vue, vue routera i vuexa, to ogarniesz ocb.

Nie mam dostępu do www.example.com, szef trzyma na tym rękę, a ja mam tylko dostarczyć działające URL, które wklei do buttona. Na example.com nie będę zalogowany, mam się zalogować dopiero jak zostanie naciśnięty button, czyli już do jednego konkretnego modułu.

No to jak nie wpisujesz nigdzie hasła na example.com, to jak chcesz przekazać login i hasło do drugiej aplikacji? XDD Dopiero miałeś przekazywać login i hasło między aplikacjami, a teraz tylko przekierować na stronę. Weź ziomek, bo już tak kręcisz, że szkoda gadać. Programista, a nie wie w jakim komponencie button zrobić. Chcesz wyciągnąć kogoś dane logowania z innej strony. Dodać button na stronie, do której nie masz dostępu i przekierować na swój panel logowania, żeby wyłudzać dane.

To jest art. 286 § 1 k.k. i ja to w tej chwili zgłaszam do prokuratury. Dziękuję bardzo.

Życzę powodzenia.

Czyli musisz obsłużyć przekierowanie z zew. domeny na twoją. Jakaś osoba trzecia rozumiem, że ma dostęp do tej aplikacji trzeciej i w porozumieniu z wami doda tam jakiś URL który wy jej przekażecie.
Więc użytkownik klika guzik na tej zew. witrynie i przekierowuje go do was. I teraz pytanie: co ma się dalej zadziać?

Już jestem bliżej rozwiązania. Zostało przekazać wymagane parametry potrzebne do logowania.
Spróbuję najpierw sprawdzić URL. Jeśli po / będzie zdefiniowany ciąg znaków, to przekażę na sztywno parametry i użytkownik powinien się móc zalogować.
Nie ma trzeciej apki.
Wcześniej wprowadziłem w błąd, to jest jedna domena.
Osoba klikająca guzik ma się zalogować do apki, ale brakuje parametrów, wymaganych do logowania. W consoli Vue są puste pola.

Problem rozwiązany. W istniejącej metodzie stworzyłem ifa, który dodatkowo sprawdza adres URL. Jeśli jest true wtedy przekazuje parametry do logowania. Działa, ale trzeba to ulepszyć, wynikły inne problemy.
Wszystkim zainteresowanym tematem dziękuję za pomoc.