javascript - 使用 Firebase 和 Azure 从 Microsoft 获取验证码时出错

Question

作为 Web 开发的新手，我正在尝试在 Vue.js Web 应用程序中实现以下目标:

• 使用 Active Directory 凭据登录用户
• 使用 Firebase 实时数据库存储数据，并在 Firebase 控制台的“身份验证”部分中查看登录者和登录时间

为了让它发挥作用，我遵循了 Firebase docs :

在项目中安装 Firebase，并将使用正确的“客户端 ID”和“客户端 key ”的“Microsoft”“登录方法”添加到 Firebase 控制台。

客户端 ID:

客户端 secret :

Firebase 控制台“身份验证”

在 Azure 应用注册中，我们还按照 Firebase 的建议添加了“重定向 URI”:

在我们的项目中，我们创建了一个“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 }

还有一个只有 2 个按钮的 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>

单击登录按钮时，我们会正确重定向到 Microsoft 登录页面，并且我们可以使用 AD 凭据正确登录。之后我们也正确地重定向回应用程序。所以这部分工作正常。但是，控制台中显示以下错误:

我们尝试在“Azure 应用程序注册”中生成一个新 key 并使用它，但问题仍然存在。我们在这里遗漏了一些非常明显的东西吗？

感谢您的帮助。

Answer 1

let provider = new firebase.auth.OAuthProvider('microsoft.com');
provider.setCustomParameters({
  prompt: "consent",
  tenant: "the tenant id provided by outlook",
})

这将强制用户选择要登录的帐户，然后输入密码。您可以在获取客户端 ID 的同一位置找到租户 [目录(租户)ID]。希望这会有所帮助，因为我也遇到了同样的问题，并通过尝试一些方法找到了解决方案。