Ошибка при получении кода подтверждения от Microsoft с Firebase и Azure

Question

Как новичок ie в веб-разработке, я пытаюсь добиться следующего в нашем Vue. js веб-приложении:

• Войдите в систему, используя учетные данные активного каталога
• Используйте базу данных Firebase Realtime для хранения данных и посмотрите в разделе «Аутентификация» на консоли Firebase, кто вошел в систему и когда

Чтобы заставить это работать, я следовал Firebase docs :

Установите Firebase в проект и добавьте «Метод входа Microsoft» с правильным «Client ID» и «Client Secret» в консоль Firebase.

Идентификатор клиента:

Секрет клиента:

Консоль Firebase "Аутентификация"

В Azure При регистрации приложения мы также добавили «URI перенаправления» в соответствии с рекомендациями Firebase:

В нашем проекте мы создали «базу данных firebase». js "файл:

import * as firebase from "firebase/app"
import "firebase/auth"

var firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID
}


let firebaseApp = firebase.initializeApp(firebaseConfig)
let provider = new firebase.auth.OAuthProvider('microsoft.com');

export { firebaseApp, provider }

и компонент Vue с двумя кнопками:

<template>
  <q-page padding>
    <h3>Home</h3>
    <p>Access token: {{ OAuthAccessToken }}</p>
    <p>User details: {{ user }}</p>
    <div>
      <q-btn color="primary" @click="login"> Login </q-btn>
      <q-btn color="primary" @click="logout" class="q-ml-xl"> Logout </q-btn>
    </div>
  </q-page>
</template>

<script>
import { firebaseApp, provider } from "boot/firebase";

export default {
  name: "PageHome",
  data() {
    return {
      OAuthAccessToken: ""
    };
  },
  computed: {
    user() {
      // return 'test user'
      let test = firebaseApp.auth().currentUser;
      console.log("user ", test);
      return test;
    }
  },
  methods: {
    login() {
      firebaseApp.auth().signInWithRedirect(provider)
    },
    logout() {
      firebaseApp
        .auth()
        .signOut()
        .then(function() {
          console.log("logout succes");
        })
        .catch(function(error) {
          console.log("logout fail");
        });
    }
  },
  components: {},
  mounted() {
    firebaseApp
      .auth()
      .getRedirectResult()
      .then(function(result) {
        if (result.credential.accessToken) {
          this.OAuthAccessToken = result.credential.accessToken;
          console.log("token ", result.credential.accessToken);
        }
      })
      .catch(function(error) {
        console.log("fail ", error);
      });
  }
};
</script>

При нажатии кнопки Кнопка login. Мы правильно перенаправлены на страницу входа Microsoft, и мы можем выполнить вход с помощью наших учетных данных AD. После этого мы также правильно перенаправлены обратно в приложение. Так что эта часть работает нормально. Однако в консоли отображается следующая ошибка:

Мы попытались создать новый секрет в «Azure Регистрация приложения» и используем его, но проблема остается. Мы упускаем что-то сверхъестественное здесь?

Спасибо за вашу помощь.